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

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

卡卷网1年前 (2025-01-11)每日看点179

<>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进行设置



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

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

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

分享给朋友:

相关文章

WordPress建设的网站为什么不推荐国内机房?

WordPress建设的网站为什么不推荐国内机房?

我劝大家不要用WordPress做国内网站,不要用国内机房的主机。原因如下:1 WordPress 很多主题和插件都是国外开发的,特别是付费版本,需要联网验证,或者远程写入。国内机房的虚拟主机和服务器大概率会屏蔽或者阻断这些连接,无法完成任...

为何 Linus 一个人就能写出这么强的系统,中国却做不出来?

为何 Linus 一个人就能写出这么强的系统,中国却做不出来?

我给你举个真实的例子。。有一个人叫高伟东,在哈尔滨工作。在2012年做了一个APP。使用词根词缀背单词。名字叫:词根词缀词典这个人编辑了2300余条词根,给10万多条单词建立了词根索引,整理了50多万条的单词记忆方法,包括新版本的诸多新功能...

自媒体如何快速起步?

自媒体如何快速起步?

有两种经验,可供参考。第一种是:现象级的爆火、爆款,这种情况捞到钱,实现财务自由的人并不多,但确实存在。只不过非要说清楚为什么这个账号可以火、可以短时间内赚到普通人一辈子赚不到的钱,他们自己也不一定能说清楚,因为赶上了风口(内外部情况)。举...

小米15就要来了,不知道小米15值不值得买?

小米15就要来了,不知道小米15值不值得买?

俗话说得好,好饭不怕晚,看似有点姗姗来迟的小米15系列,一官宣就迅速登上热搜。在此次小米14发布会上,雷军曾说过小米14将是最后一代3999起的旗舰,那么这一次涨价了的小米15,值不值得买呢?下面为大家总结一下小米15将会有哪些升级点:软件...

用红米手机会很丢人吗?

前些日子遇到了一位快递小哥,京东的,签收小哥年纪不算大,目测二十多岁他的手机上全是一道道极严重的划痕,有点卡,他开热点了,热点名就是手机型号,红米9a,我父母的同款现在他那边操作了一会,然后又是我这边操作了一会小哥看着我手机刷刷的,颇有些好...

MacOS真的比Windows流畅吗?

我现在公司配的机器,配置是绝对的大古董了惠普z230sff薄塔cpu只是个4770,没错不是4790k,4770全核睿频只有3.8g显卡更是古董,k600,已经结束驱动更新支持了,显存仅1g,跑分跑不过13代uhd核显内存是加到16g得,但...

发表评论

访客

看不清,换一张

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