当前位置：首页 > 每日看点

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

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

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

分享给朋友：

相关文章

为什么我感受不到 1500 元的手机比四五千的差？

我长期使用两千元左右的安卓机，一天接近8小时的重度手机使用者。 某天我突然想试试看传说中非常赛艇的苹果。狠了心，砸了钱。七千大样买了爱疯。 就这？什么辣鸡玩意。而且因为我一直更新软件，用了两年爱疯就卡了。并没有传说中的用四五年不卡。 用了这…

苹果为什么不做千元机？

苹果为什么不做千元机？

第一步，打开苹果官网，注意是.com，不是.cn； 第二步，点击iPhone，选择Compare iPhone； 第三步，选择最新iPhone 15系列，查看起售价格，分别为$1199，$999，$799。 这不妥妥的千元机吗，怎么苹果…

计算机专业不干互联网不热爱技术，还能转行干什么？

转行的思路，无非也就是那几个。 我们顺着每个思路，一路捋一遍，基本上，大致可行的方向，也就有了。 一、跟对口职业和岗位业务链条相邻的职业和岗位计算机专业如果找到了对口的技术岗位，跟技术工作联系最紧密的岗位是什么？ 产品经理。当然，大多数产品…

为什么有人觉得华为mate60只值2000？

为什么有人觉得华为mate60只值2000？

你以为买Mate60的人真的傻？真的那么爱国？ 国庆前，我家那傻子加价800多买了一台Mate60，当时还被我骂他是傻子。 可是他说一回到公司就被老板同事朋友看到，拿去反复查看，都在惊叹他这么快就买到新机。 跟亲戚朋友聚会，别人一看就知道他…

为什么这次 Mac mini 的 M4 版本价格这么低？

为什么这次 Mac mini 的 M4 版本价格这么低？

扫了一眼这里的回答，目测没几个人真买过 Macbook、Mac mini且真正当主力工作机用过。 这个初始(丐版)版本的机器实际谈不上多便宜，备受热捧有几个原因。 它这代产品整体做了重新设计，大幅缩减了尺寸，真正称得上 Mini 了。…

鸿蒙系统到底是不是安卓系统?

你好，是的。 接下来我给不懂技术的人简单的说一下哄蒙系统的来龙去脉。 首先你要知道什么是开源。 ‌‌开源 （Open Source）全称为开放源代码‌，意味着任何人都可以获取和使用软件的源代码，并在遵守版权协议的前提下进行修改和再发布。‌1…

发表评论

访客

看不清，换一张

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

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

Powered By Z-BlogPHP. Theme by TOYEAN.