当前位置：首页 >> 每日看点 >> 那种markdown编辑器能够支持githu风格的markdown?

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

卡卷网 每日看点 129

<>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

协助本站SEO优化一下，谢谢！
关键词不能为空
同类推荐

发表评论

访客

看不清，换一张

◎欢迎参与讨论，请在这里发表您的看法和观点。
最新文章
热门文章
随机文章