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

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

卡卷网1年前 (2025-01-10)每日看点239

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

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

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

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

分享给朋友：
返回列表

上一篇：如何编写一个chrome和edge可以使用的扩展程序？

下一篇：有哪些JVM性能调优常用参数？

相关文章

每天5点就下班了，闲着也是闲着，有哪些副业可以推荐？

每天5点就下班了，闲着也是闲着，有哪些副业可以推荐？

今天整理了36个搞钱APP可以先接触学习看看，然后选定一个感兴趣的方向去精进要知道机会不是一下子来临的，而一定是你前期做了很多准备每天进步一点点，就像滚雪球一样希望所以女生，能够在2024年提升自己，立下一个新的搞钱Flag吧实用APP安利...

电视参数哪个最重要?

电视参数哪个最重要?

在选择智能电视时，面板类型是一个关键因素。IPS面板以其宽广的视角和出色的色彩还原能力受到青睐，尤其适合日常观看和游戏。尽管可能会有轻微的漏光，但在大多数情况下，这并不影响使用体验。相比之下，VA面板提供更高的对比度和更深的黑色，增强了沉浸...

小米14 Pro和Redmi K70Pro怎么选?

小米14 Pro和Redmi K70Pro怎么选?

两款手机都使用了最新的骁龙8Gen3旗舰芯片，性能都是顶级，但是两款手机定位不同，卖点不同，红米K70 Pro定位主打性能的旗舰入门手机，小米14Pro定位旗舰中高端手机。具体根据个人需求与预算来选择：两款手机的相同、相似点：都使用了骁龙8...

k70和红米note14pro+咋选啊?

k70和红米note14pro+咋选啊?

首选红米K70，可满足题主的功能需求。红米 Note 14 pro+的使用者定位并不是学生，红米K70的使用者定位才是学生。一、k70和红米note14pro+各自的参数红米K70推出的定位初衷，是主打性能为主。最佳使用对象是喜欢游戏者，...

腾讯文档回收站彻底删除文件真的找不回来了吗？

趁早打电话联系腾讯文档的人可能还有救，一般这种都是数据库里标记为删除，文件还没有实际删除，然后经过一段时间后程序统一进行真删除。这个“一段时间”可长可短，可能是一小时也可能是几天几个月甚至几年，要看腾讯服务器的程序是怎么写的。不过你联系腾讯...

NAS那么好，为什么还是没能成为大多数家庭必备的存储设备？

NAS那么好，为什么还是没能成为大多数家庭必备的存储设备？

最主要原因是因为——贵！看看我家里搭建的这一套吧。目前我家中有5台常用的NAS，分别为群晖DS1522+、威联通TS-464C2、绿联DX4600 Pro 、极空间Z4S、威联通TS-AI642。个人认为，这其中的每台NAS都是时代的翘楚，...

发表评论

访客

看不清，换一张

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

Copyright © 2019-2024 www.kajuan.net 版权所有

Powered By Z-BlogPHP. Theme by TOYEAN.