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

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

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

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

分享给朋友:

相关文章

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

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

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

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

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

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

抖音和快手最大的区别是什么?

1、目标人群定位不同抖音:一二线城市,占比52%,大专学历以上,女性偏多。抖音以年轻群体居多。快手:三四线城市,占比64%,高中学历以下,男女更均衡。快手所覆盖的年龄段范围更广。2、内容创作的形式和深度不同抖音:偏深层,内容的装饰及表达更高...

2024,java开发,已经炸了吗?

炸的透透的了,坐标南京。一月底,一个好哥们,双休朝九晚六不加班18K,被裁。入职不到两年,算是工资和年终奖才赔了6.5W左右。上周五新公司入职,周六开始加班。现在每周134加班到晚上八点,好像薪资还不如以前高。三月上旬,另一个好哥们,薪资好...

你每天用来涨知识的手机应用程序有哪些?

你每天用来涨知识的手机应用程序有哪些?

经过深度使用和测评,从100个APP中选出的这35个超实用的app,每一个都是最硬核最有料的涨知识神器!每天打开看看,能让你提神醒脑,眼界大开,成为朋友聚会上的话题王者!双击屏幕取走哦~先放上全部APP目录,有新闻资讯类、英语学习类、读书类...

闲鱼上为什么会有人问都不问直接下单?

我去年卖一个荣耀90,挂的2200,最终成交2137.5元。对方是一个高高壮壮的西北口音,要求的自取。大概我吃过午饭,约了旁边的商场,那里有荣耀售后。见了面,先看了手机,试了好一会儿,各种测试,没问题。然后去了商场二楼的荣耀售后,让人家售后...

发表评论

访客

看不清,换一张

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