当前位置：卡卷网 / 每日看点 / 正文

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

作者：卡卷网发布时间：2025-01-11 16:44浏览数量：100次评论数量：0次

<>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则不拦截，但会进入该逻辑。

//导入mdRegisterimport{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，后续使用新属性修改样式即可，示例代码如下。

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

<>自定义样式</>

<>1.标题样式（lvTitle）</>

//导入lvTitleimport{lvTitle}from'@luvi/lv-markdown-in'//用法lvTitle.setLevel1Title(50)//设置一级标题字号50lvTitle.setLevelTitleColor("lue")//设置标题字体颜色为蓝色

方法	说明	参数
setLevel1Title()	设置1级标题字号	numer/string默认：32
setLevel2Title()	设置2级标题字号	numer/string默认：29
setLevel3Title()	设置3级标题字号	numer/string默认：26
setLevel4Title()	设置4级标题字号	numer/string默认：23
setLevel5Title()	设置5级标题字号	numer/string默认：20
setLevel6Title()	设置6级标题字号	numer/string默认：17
setLevelTitleColor()	设置标题字体颜色	string默认："#303133"

<>2.文字样式（lvText）</>

//导入lvTextimport{lvText}from'@luvi/lv-markdown-in'//用法lvText.setTextSize(20)//设置文本字号20lvText.setTextColor("red")//设置文本颜色为红色lvText.setTextMarkackground("#000")//设置标记文本的背景颜色为黑色lvText.setTextLineHeight("25")//设置标记文本的行高

方法	说明	参数
setTextSize()	设置文本字号	numer/string默认：15
setTextColor()	设置文本颜色	string默认："#303133"
setTextMarkackground()	设置标记文本的背景颜色	string默认："#7cff8321"
setTextLineHeight()	设置标记文本的行高	string默认："24"

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

//导入lvLinkimport{lvLink}from'@luvi/lv-markdown-in'//用法lvLink.setTextSize(20)//设置超链接文本字号20lvLink.setTextColor("red")//设置超链接文本颜色为红色lvLink.setTextUnderline(true)//设置超链接下划线

方法	说明	参数
setTextSize()	设置超链接文本字号	numer/string默认：15
setTextColor()	设置超链接文本颜色	string默认："#3A8AE"
setTextUnderline()	设置超链接下划线	oolean默认：false

<>4.图片样式（lvImage）</>

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

//导入lvImageimport{lvImage}from'@luvi/lv-markdown-in'//用法lvImage.setImgWidth("70%")//设置图片宽度为70%lvImage.setImgHeight(null)//设置图片高度为nulllvImage.setConfGloal(true)//强制开启图片全局宽高

方法	说明	参数
setImageWidth()	设置图片宽度	numer/string默认："60%"
setImageHeight()	设置图片高度	string默认：null
setConfGloal()	强制开启全局宽高	oolean默认：false

<>5.代码块（lvCode）</>

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

//导入lvCodeimport{lvCode}from'@luvi/lv-markdown-in'//用法lvCode.setTheme("dark")//设置代码块主题为暗夜lvCode.setIndexState(true)//展示代码块索引列

方法	说明	参数
setTheme()	设置代码块主题	string:"dark"/"light"默认："dark"
setIndexState()	设置索引列的展示与隐	oolean默认："false"

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

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

//导入lvQuoteimport{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进行设置

END

免责声明：本文由卡卷网编辑并发布，但不代表本站的观点和立场，只提供分享给大家。

评论打赏

上一篇：FreeSD还有前途吗？
下一篇：你投资的域名的最多钱的一个是哪个？

卡卷网主页 联系他吧

请记住:卡卷网 Www.Kajuan.Net

卡卷网

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

<>lv-markdown-in</>

<>使用效果演示</>

<>简介</>

<>lv-markdown-in目前支持</>

<>版本说明【重要】</>

<>lv-markdown-in安装</>

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

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

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

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

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

<>动态样式改变</>

<>自定义样式</>

<>1.标题样式（lvTitle）</>

<>2.文字样式（lvText）</>

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

<>4.图片样式（lvImage）</>

<>5.代码块（lvCode）</>

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

<>7.样式</>

卡卷网主页 联系他吧

相关推荐

取消回复欢迎你发表评论:

最新文章

随机文章

广告位

卡卷网

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

<>lv-markdown-in</>

<>使用效果演示</>

<>简介</>

<>lv-markdown-in目前支持</>

<>版本说明【重要】</>

<>lv-markdown-in安装</>

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

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

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

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

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

<>动态样式改变</>

<>自定义样式</>

<>1.标题样式（lvTitle）</>

<>2.文字样式（lvText）</>

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

<>4.图片样式（lvImage）</>

<>5.代码块（lvCode）</>

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

<>7.样式</>

卡卷网 主页 联系他吧

相关推荐

取消回复欢迎 你 发表评论:

最新文章

随机文章

广告位

卡卷网主页联系他吧

取消回复欢迎你发表评论: