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

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

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

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

分享给朋友:

相关文章

推荐几个问卷调查平台?

推荐几个问卷调查平台?

我给大家免费推荐一些市面上不多,且稳定的免费的问卷平台,这个在网上都是能够搜索到的,有的还是世界500钱企业,这里推荐的基本上都是上市的问卷公司了。上面都是可以免费去注册的,对外公开开放的,做完了直接奖励美刀的,不需要兑换卡什么的。Cint...

为什么微服务一定要有网关?

为什么微服务一定要有网关?

网关一句话总结,网关的作用是上浮公共逻辑,下沉差异逻辑。公共逻辑就是所有接口都需要做的事,比如权限校验,限流算法等,这样业务就只需要关心业务逻辑即可。下面是一个对比图: 当然除了一些公共逻辑外,路由也是网关的核心功能,它可以进行流量转发。...

开发了个小程序,咋推广呢?

要是开发了个小程序,想推广的话,可以先从自己的朋友圈子下手,让亲戚朋友都帮忙转发宣传,这样能先有点人气。然后去一些跟你的小程序相关的论坛、社区啥的,发帖子介绍介绍,吸引有兴趣的人。还能找些网红、博主合作,要是他们觉得你的小程序不错,帮忙推荐...

有哪些网站,一旦知道,你就离不开了?

有哪些网站,一旦知道,你就离不开了?

这六个网站,一旦用过,基本上是离不开了。都是我超爱的一些网站,基本上每天都用。1 地图生成器第一个,我要给大家推荐的是地图生成器。可以下载到各省,各市,各县的svg格式的地图素材。这些素材导入PPT中都是可以编辑的。可以单独更改颜色和轮廓。...

荣耀magic 7 首发的应该都收到货了,感觉怎么样?

8号入手magic7,跟mate40pro比。优点:1、电池真耐用,充电块,华为电池也是新换的但是明显荣耀耐用;2、系统明显快多了,mate40pro下半年开始卡的不行,实在受不了了。3、声音、震动效果提升明显,指纹反应灵敏很多。 缺点:1...

PHP承载百万/天 访问量需要用到什么技术?

当年做一个百万PV的商城,也不过是两台2c4g的阿里云虚机罢了(其实一台就够,另外一台主要的逼着大家一定开发的时候一定要有负载均衡和横向扩容的意识)。当时框架还是Thinkphp3.2,框架提高运行效率的开关全打开,标准的lnmp模式,单机...

发表评论

访客

看不清,换一张

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