当前位置：首页 > 每日看点 > 正文内容

那种markdown编辑器能够支持githu风格的markdown?

卡卷网10个月前 (01-10)每日看点170

<>lv-markdown-in

<>使用效果演示

<>简介

鸿蒙原生Markdown解析预览库，可在OpenHarmony、HarmonyOS运行，兼容api9（1.x.x版本）、api10及以上（2.x.x版本），支持3种内容加载模式（纯文本、资源文件、沙箱文件），支持html常用标签解析，致力于更便捷的OpenHarmony设备的Markdown内容解析。

<>lv-markdown-in目前支持

基本语法拓展语法标题表格段落代码块换行脚注强调（粗体、斜体、粗斜体）任务列表引用块删除线列表支持html常用标签解析代码分割线链接图片

<>版本说明【重要】

<>1.x.x版本系列兼容API9<>2.x.x-2.0.2版本系列兼容API10及以上<>2.0.3及以上版本系列兼容API11及以上

<>lv-markdown-in安装

1.运行命令

ohpminstall@luvi/lv-markdown-in

2.在项目中引入插件

import{LvMarkdownIn}from@luvi/lv-markdown-in

3.在代码中使用

LvMarkdownIn({text:content.toString()})//content为文本内容

<>3种内容加载模式（纯文本、资源文件、沙箱文件）

<>1.纯文本模式（text）

LvMarkdownIn({ text:content.toString(),//content为文本内容 loadMode:"text",//默认text可省略 loadCallack:{//loadCallack回调可省略 success(r:LMICallack){ console.log("luvi-markdown-in>"+r.code,r.message) }, fail(r:LMICallack){ console.error("luvi-markdown-in>"+r.code,r.message) } } })

<>2.资源文件模式（rawfile）

使用资源文件模式，需要将loadMode字段设置为rawfile，rawfilePath需要填写模块中rawfile目录的文件路径，同时需要传递应用上下文context，loadCallack为可选参数，用于资源加载时的回调检查。

LvMarkdownIn({ context:getContext(),//资源文件模式必填参数 loadMode:"rawfile", rawfilePath:"t/text.md", loadCallack:{ success(r:LMICallack){ console.log("luvi-markdown-in>"+r.code,r.message) }, fail(r:LMICallack){ console.error("luvi-markdown-in>"+r.code,r.message) } } })

<>3.沙箱文件模式（sandox）

使用沙箱文件模式，需要将loadMode字段设置为sandox，loadCallack为可选参数，用于资源加载时的回调检查。

LvMarkdownIn({ loadMode:"sandox", sandoxPath:getContext().getApplicationContext().filesDir+"/t2/text.md", loadCallack:{ success(r:LMICallack){ console.log("luvi-markdown-in>"+r.code,r.message) }, fail(r:LMICallack){ console.error("luvi-markdown-in>"+r.code,r.message) } } })

<>超链接、图片点击拦截，自定义控制跳转行为

需要注意的是，使用拦截行为后，retnfalse才可拦截正常拦截库中默认打开行为，retntrue则不拦截，但会进入该逻辑。

//导入mdRegister import{mdRegister}from'@luvi/lv-markdown-in' ​ //注册超链接点击回调、retnfalse则表示拦截，自行处理超链接跳转逻辑 mdRegister.HandleHyperlink=(l:string)=>{ console.log("拦截跳转>"+l) retnfalse } ​ //注册图像点击回调、retnfalse则表示拦截，自行处理图像展示逻辑 mdRegister.HandleImage=(l:string)=>{ console.log("拦截打开图像>"+l) retnfalse }

<>动态样式改变

在页面加载完成后动态改变样式，以lvText字体样式为例，在自定义组件中需要使用@State装饰lvText，类型为LvText，后续使用新属性修改样式即可，示例代码如下。

//导入lvTitle import{lvTitle,LvText}from'@luvi/lv-markdown-in' ​ //@State装饰lvText @StatenewText:LvText=lvText ​ //动态改变字体颜色 utton("改变lvText.setTextColor").onClick(()=>{ this.newText.setTextColor("lue") })

<>自定义样式

<>1.标题样式（lvTitle）

//导入lvTitle import{lvTitle}from'@luvi/lv-markdown-in' //用法 lvTitle.setLevel1Title(50)//设置一级标题字号50 lvTitle.setLevelTitleColor("lue")//设置标题字体颜色为蓝色 方法说明参数setLevel1Title()设置1级标题字号numer/string默认：32setLevel2Title()设置2级标题字号numer/string默认：29setLevel3Title()设置3级标题字号numer/string默认：26setLevel4Title()设置4级标题字号numer/string默认：23setLevel5Title()设置5级标题字号numer/string默认：20setLevel6Title()设置6级标题字号numer/string默认：17setLevelTitleColor()设置标题字体颜色string默认："#303133"

<>2.文字样式（lvText）

//导入lvText import{lvText}from'@luvi/lv-markdown-in' //用法 lvText.setTextSize(20)//设置文本字号20 lvText.setTextColor("red")//设置文本颜色为红色 lvText.setTextMarkackground("#000")//设置标记文本的背景颜色为黑色 lvText.setTextLineHeight("25")//设置标记文本的行高 方法说明参数setTextSize()设置文本字号numer/string默认：15setTextColor()设置文本颜色string默认："#303133"setTextMarkackground()设置标记文本的背景颜色string默认："#7cff8321"setTextLineHeight()设置标记文本的行高string默认："24"

<>3.超链接样式（lvLink）

//导入lvLink import{lvLink}from'@luvi/lv-markdown-in' //用法 lvLink.setTextSize(20)//设置超链接文本字号20 lvLink.setTextColor("red")//设置超链接文本颜色为红色 lvLink.setTextUnderline(true)//设置超链接下划线 方法说明参数setTextSize()设置超链接文本字号numer/string默认：15setTextColor()设置超链接文本颜色string默认："#3A8AE"setTextUnderline()设置超链接下划线oolean默认：false

<>4.图片样式（lvImage）

需要注意的是：若在md文本内容中未单设置图片宽高，将采用默认全局宽高，可通过setImgWidth()与setImgHeight()进行设置。若强制开启图片全局宽高将会覆盖所有图片的宽高，即使在md文本内容中已设置图片宽高，可通过setConfGloale()进行设置

//导入lvImage import{lvImage}from'@luvi/lv-markdown-in' //用法 lvImage.setImgWidth("70%")//设置图片宽度为70% lvImage.setImgHeight(null)//设置图片高度为null lvImage.setConfGloal(true)//强制开启图片全局宽高 方法说明参数setImageWidth()设置图片宽度numer/string默认："60%"setImageHeight()设置图片高度string默认：nullsetConfGloal()强制开启全局宽高oolean默认：false

<>5.代码块（lvCode）

提供暗夜与明亮双主题，同时可设置索引列的展示与隐。

//导入lvCode import{lvCode}from'@luvi/lv-markdown-in' //用法 lvCode.setTheme("dark")//设置代码块主题为暗夜 lvCode.setIndexState(true)//展示代码块索引列 方法说明参数setTheme()设置代码块主题string:"dark"/"light"默认："dark"setIndexState()设置索引列的展示与隐oolean默认："false"

<>6.引用块样式（lvQuote）

需要注意的是引用块中字体大小与字体颜色，请使用lvText进行设置

//导入lvQuote import{lvQuote}from'@luvi/lv-markdown-in' //用法 lvQuote.setackgroundColor("rga(234,239,255,0.62)")//设置引用块背景颜色为淡粉色 lvQuote.setorderColor("red")//设置引用块左边颜色为红色 方法说明参数setackgroundColor()设置引用块背景颜色string默认："rga(234,239,255,0.62)"setorderColor()设置引用块左边颜色string默认："#409EFF"

<>7.样式

需要注意的是列表、表格、任务列表、脚注、删除线、引用块等语法中字体大小与字体颜色，请使用lvText进行设置

<>DN同步文章

详细用法请参考DN文章：lv-markdown-inforDN

<>

有关Markdown的更多信息，请参阅Markdown教程Markdown

<>关于坚果派

最初我们以鸿蒙为基石，不断向同级诸如ArkUI-X、仓颉，以及同类诸如蓝河、欧拉等扩展，如今在不断努力和尝试下，我们平台已具备了各类产品的优秀开发团队及支持的万粉团队。专注于分享的技术包括HarmonyOS/OpenHarmony、仓颉、ArkUI-X、AI、lueOS作。团队成员主要聚集在北京，上海，南京，深圳，广州，苏州、长沙、宁夏等地，目前已为华为、vivo、、亚马逊以及三方技术社区提供各类咨询200+。累计粉丝100+w，孵化开发者10w+，高校20+、企业10+。自研应用14款，三方库70个，鸿蒙原生应用课程500+。持续助力鸿蒙仓颉等生态繁荣发展。

三方库列表：s://do./sheet/DYnl1dUxhV21JTWNl?ta=08J2

扫描二维码推送至手机访问。

版权声明：本文由卡卷网发布，如需转载请注明出处。

本文链接：https://www.kajuan.net/ttnews/2025/01/8581.html

分享给朋友：
返回列表

上一篇：如何编写一个chrome和edge可以使用的扩展程序？

下一篇：有哪些JVM性能调优常用参数？

相关文章

怎么免费看电视地方台和央视台？

怎么免费看电视地方台和央视台？

免费看央视和地方台，办法当然有，而且太多了，我怕你挑花了眼用不过来……首先题主需要明确一点，你家的电视需要是基于安卓系统的智能电视，能安装第三方安卓电视软件。比如小米电视、雷鸟电视等等；如果不是，你至少需要购置一个电视盒子，比如小米电视盒子...

下班后可以做点什么副业赚钱呢？

下班后可以做点什么副业赚钱呢？

首先说明一下，我分享的任务不需要交钱，也不需要入群，只需要你去平台学习就可以。如果有任何让你交钱，进群的任务，请警惕被割韭菜。今天给大家分享7大赚钱副业，新手小白0粉丝0门槛0技术都可以去做，不说大富大贵，但是赚个零花钱还是可以。如果你已经...

你是如何在不依靠工资收入的情况下赚到一万元的？

你是如何在不依靠工资收入的情况下赚到一万元的？

分享几个路子稳，门槛低，变现快，适合年轻人的靠谱的副业。绝对不是送外卖、滴滴、搬砖等等的苦力活，这几个副业都是能是性价比极高，还能让你快速成长的工作。想通过副业实现暴富、立马月入过万的同学，建议速速划走。今天撇哥就给大家分享100+个靠谱赚...

NAS那么好，为什么还是没能成为大多数家庭必备的存储设备？

NAS那么好，为什么还是没能成为大多数家庭必备的存储设备？

最主要原因是因为——贵！看看我家里搭建的这一套吧。目前我家中有5台常用的NAS，分别为群晖DS1522+、威联通TS-464C2、绿联DX4600 Pro 、极空间Z4S、威联通TS-AI642。个人认为，这其中的每台NAS都是时代的翘楚，...

有哪些是你用上了mac才知道的事？

用上了高端的Mac（已退货）才知道：原来文件夹里面的文件，你看到是8个，其实可能有12个。其中3个图标重叠在一起了，另外一个被拖动到屏幕外面了。用上了高端的Mac（已退货）才知道：原来鼠标灵敏度有问题是因为系统内置了鼠标加速度，只能用控制台...

腾讯云为何在云服务市场败给了阿里云？

IDC领域，2010年以前，万网、新网互联、新网，三家公司瓜分天下，其中万网市场份额最高，排名第一。当时，万网的域名是http://www.net.cn，通过该域名就可以判断万网的地位。2010年阿里云成立，直接收购了万网，大量用户直接流向...

发表评论

访客

看不清，换一张

◎欢迎参与讨论，请在这里发表您的看法和观点。

Copyright © 2019-2024 www.kajuan.net 版权所有

Powered By Z-BlogPHP. Theme by TOYEAN.