鸿蒙原生markdown三方库

徐建国

发布于 2025-01-09 18:56:36

5400

代码可运行

文章被收录于专栏：个人路线个人路线

运行总次数：0

代码可运行

lv-markdown-in

🍃 使用效果演示

📚 简介

鸿蒙原生 Markdown 解析预览库，可在 OpenHarmony、HarmonyOS 系统运行，兼容api9（1.x.x版本）、api10及以上（2.x.x版本），支持3种内容加载模式（纯文本、资源文件、沙箱文件），支持 html 常用标签解析[1]，致力于更便捷的 OpenHarmony 设备的 Markdown 内容解析。

🎁 lv-markdown-in 目前支持

基本语法	拓展语法
标题[2]	表格[3]
段落[4]	代码块[5]
换行[6]	脚注[7]
强调（粗体、斜体、粗斜体）[8]	任务列表[9]
引用块[10]	删除线[11]
列表[12]	支持 html 常用标签解析[13]
代码[14]
分割线[15]
链接[16]
图片[17]

🔥 版本说明【重要】

1.x.x 版本系列兼容 API9
2.x.x - 2.0.2 版本系列兼容 API10及以上
2.0.3 及以上版本系列兼容 API11及以上

🍺 lv-markdown-in 安装

1.运行命令

ohpm install @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可省略
    loadCallBack: { // loadCallBack回调可省略
      success(r: LMICallBack) {
        console.log("luvi-markdown-in > " + r.code, r.message)
      },
      fail(r: LMICallBack) {
        console.error("luvi-markdown-in > " + r.code, r.message)
      }
    }
})

2.资源文件模式（rawfile）

使用资源文件模式，需要将 loadMode 字段设置为 rawfile，rawfilePath 需要填写模块中 rawfile 目录的文件路径，同时需要传递应用上下文 context，loadCallBack 为可选参数，用于资源加载时的回调检查。

LvMarkdownIn({
    context: getContext(),  // 资源文件模式必填参数
    loadMode: "rawfile",
    rawfilePath: "t/text.md",
    loadCallBack: {
      success(r: LMICallBack) {
        console.log("luvi-markdown-in > " + r.code, r.message)
      },
      fail(r: LMICallBack) {
        console.error("luvi-markdown-in > " + r.code, r.message)
      }
    }
})

3.沙箱文件模式（sandbox）

使用沙箱文件模式，需要将 loadMode 字段设置为 sandbox，loadCallBack 为可选参数，用于资源加载时的回调检查。

LvMarkdownIn({
    loadMode: "sandbox",
    sandboxPath: getContext().getApplicationContext().filesDir + "/t2/text.md",
    loadCallBack: {
      success(r: LMICallBack) {
        console.log("luvi-markdown-in > " + r.code, r.message)
      },
      fail(r: LMICallBack) {
        console.error("luvi-markdown-in > " + r.code, r.message)
      }
    }
})

🍊 超链接、图片点击拦截，自定义控制跳转行为

需要注意的是，使用拦截行为后，return false才可拦截正常拦截库中默认打开行为，return true则不拦截，但会进入该逻辑。

// 导入 mdRegister
import { mdRegister } from '@luvi/lv-markdown-in'

// 注册超链接点击回调、return false 则表示拦截，自行处理超链接跳转逻辑
mdRegister.HandleHyperlink = (url: string) => {
    console.log("拦截跳转 > " + url)
    return false
}

// 注册图像点击回调、return false 则表示拦截，自行处理图像展示逻辑
mdRegister.HandleImage = (url: string) => {
    console.log("拦截打开图像 > " + url)
    return false
}

🍊 动态样式改变

在页面加载完成后动态改变样式，以 lvText 字体样式为例，在自定义组件中需要使用 @State 装饰 lvText，类型为 LvText，后续使用新属性修改样式即可，示例代码如下。

// 导入 lvTitle
import { lvTitle, LvText } from '@luvi/lv-markdown-in'

// @State装饰 lvText
@State newText: LvText = lvText

// 动态改变字体颜色
Button("改变lvText.setTextColor").onClick(() => {
    this.newText.setTextColor("blue")
})

📦 自定义样式

1.标题样式（lvTitle）

// 导入 lvTitle
import { lvTitle } from '@luvi/lv-markdown-in'
// 用法
lvTitle.setLevel1Title(50)            // 设置一级标题字号50
lvTitle.setLevelTitleColor("blue")    // 设置标题字体颜色为蓝色

方法	说明	参数
setLevel1Title()	设置 1 级标题字号	number / string 默认：32
setLevel2Title()	设置 2 级标题字号	number / string 默认：29
setLevel3Title()	设置 3 级标题字号	number / string 默认：26
setLevel4Title()	设置 4 级标题字号	number / string 默认：23
setLevel5Title()	设置 5 级标题字号	number / string 默认：20
setLevel6Title()	设置 6 级标题字号	number / string 默认：17
setLevelTitleColor()	设置标题字体颜色	string 默认："#303133"

2.文字样式（lvText）

// 导入 lvText
import { lvText } from '@luvi/lv-markdown-in'
// 用法
lvText.setTextSize(20)                   // 设置文本字号20
lvText.setTextColor("red")               // 设置文本颜色为红色
lvText.setTextMarkBackground("#000")     // 设置标记文本的背景颜色为黑色
lvText.setTextLineHeight("25")           // 设置标记文本的行高

方法	说明	参数
setTextSize()	设置文本字号	number / string 默认：15
setTextColor()	设置文本颜色	string 默认："#303133"
setTextMarkBackground()	设置标记文本的背景颜色	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()	设置超链接文本字号	number / string 默认：15
setTextColor()	设置超链接文本颜色	string 默认："#3A8AEB"
setTextUnderline()	设置超链接下划线	boolean 默认：false

4.图片样式（lvImage）

需要注意的是：若在 md 文本内容中未单独设置图片宽高，将采用默认全局宽高，可通过 setImgWidth() 与 setImgHeight() 进行设置。若强制开启图片全局宽高将会覆盖所有图片的宽高，即使在 md 文本内容中已设置图片宽高，可通过 setConfGloable() 进行设置

// 导入 lvImage
import { lvImage } from '@luvi/lv-markdown-in'
// 用法
lvImage.setImgWidth("70%")         // 设置图片宽度为70%
lvImage.setImgHeight(null)         // 设置图片高度为null
lvImage.setConfGlobal(true)        // 强制开启图片全局宽高

方法	说明	参数
setImageWidth()	设置图片宽度	number / string 默认："60%"
setImageHeight()	设置图片高度	string 默认：null
setConfGlobal()	强制开启全局宽高	boolean 默认：false

5.代码块（lvCode）

提供 暗夜 与 明亮 双主题，同时可设置索引列的展示与隐藏。

// 导入 lvCode
import { lvCode } from '@luvi/lv-markdown-in'
// 用法
lvCode.setTheme("dark")         // 设置代码块主题为暗夜
lvCode.setIndexState(true)      // 展示代码块索引列

方法	说明	参数
setTheme()	设置代码块主题	string: "dark" / "light" 默认："dark"
setIndexState()	设置索引列的展示与隐藏	boolean 默认："false"

6.引用块样式（lvQuote）

需要注意的是引用块中字体大小与字体颜色，请使用 lvText 进行设置

// 导入 lvQuote
import { lvQuote } from '@luvi/lv-markdown-in'
// 用法
lvQuote.setBackgroundColor("rgba(234, 239, 255, 0.62)")      // 设置引用块背景颜色为淡粉色
lvQuote.setBorderColor("red")                                // 设置引用块左边颜色为红色

方法	说明	参数
setBackgroundColor()	设置引用块背景颜色	string 默认："rgba(234, 239, 255, 0.62)"
setBorderColor()	设置引用块左边颜色	string 默认："#409EFF"

7.其他样式

需要注意的是列表、表格、任务列表、脚注、删除线、引用块等语法中字体大小与字体颜色，请使用 lvText 进行设置

🍺 CSDN 同步文章

详细用法请参考 CSDN 文章：lv-markdown-in for CSDN[18]

🍺 其他

有关 Markdown 的更多信息，请参阅 Markdown 官方教程 Markdown[19]

关于坚果派

最初我们以鸿蒙为基石，不断向同级诸如 ArkUI-X、仓颉，以及同类诸如蓝河、欧拉等扩展，如今在不断努力和尝试下，我们平台已具备了各类产品的优秀开发团队及支持运营的万粉团队。专注于分享的技术包括 HarmonyOS/OpenHarmony、仓颉、ArkUI-X、AI、BlueOS 操作系统。团队成员主要聚集在北京，上海，南京，深圳，广州，苏州、长沙、宁夏等地，目前已为华为、vivo、腾讯、亚马逊以及三方技术社区提供各类咨询 200+。累计粉丝 100+w，孵化开发者 10w+，高校 20+、企业 10+。自研应用 14 款，三方库 70 个，鸿蒙原生应用课程 500+。持续助力鸿蒙仓颉等生态繁荣发展。

三方库列表：https://docs.qq.com/sheet/DYnl1dUxhV21JTWNl?tab=BB08J2

参考资料

[1]

支持 html 常用标签解析: https://ohpm.openharmony.cn/#/cn/detail/@luvi%2Fhtml2md

[2]

标题: https://markdown.com.cn/basic-syntax/headings.html

[3]

表格: https://markdown.com.cn/extended-syntax/tables.html

[4]

段落: https://markdown.com.cn/basic-syntax/paragraphs.html

[5]

代码块: https://markdown.com.cn/extended-syntax/fenced-code-blocks.html

[6]

换行: https://markdown.com.cn/basic-syntax/line-breaks.html

[7]

脚注: https://markdown.com.cn/extended-syntax/footnotes.html

[8]

强调（粗体、斜体、粗斜体）: https://markdown.com.cn/basic-syntax/emphasis.html

[9]

任务列表: https://markdown.com.cn/extended-syntax/task-lists.html

[10]

引用块: https://markdown.com.cn/basic-syntax/blockquotes.html

[11]

删除线: https://markdown.com.cn/extended-syntax/strikethrough.html

[12]

列表: https://markdown.com.cn/basic-syntax/lists.html

[13]

支持 html 常用标签解析: https://ohpm.openharmony.cn/#/cn/detail/@luvi%2Fhtml2md

[14]

代码: https://markdown.com.cn/basic-syntax/code.html

[15]

分割线: https://markdown.com.cn/basic-syntax/horizontal-rules.html

[16]

链接: https://markdown.com.cn/basic-syntax/links.html

[17]

图片: https://markdown.com.cn/basic-syntax/images.html

[18]

lv-markdown-in for CSDN: https://blog.csdn.net/weixin_44640245/article/details/134630747

[19]

Markdown: https://markdown.com.cn/

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2025-01-09，如有侵权请联系 cloudcommunity@tencent.com 删除

https

本文分享自大前端之旅微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度