lv-markdown-in 鸿蒙ArkTs原生Markdown解析插件

给时光以生命，给岁月以文明

关键词：HarmonyOS、鸿蒙应用、ArkTs、markdown

目录

📚 写在前面

📦 效果预览

📦 版本说明【重要】

🎁 lv-markdown-in 目前支持

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

🍺 lv-markdown-in 安装

🍺 自定义样式 Methods

1. 标题样式（lvTitle）

2. 文字样式（lvText）

3. 超链接样式（lvLink）

4. 图片样式（lvImage）

5. 代码块主题（lvCode）

6. 引用块样式（lvQuote）

7. 列表样式（lvTabulate）

8. 复选样式（lvCheckbox）

🍺 写在后面&版权声明

---

---

📚 写在前面

鸿蒙原生 Markdown 解析插件，支持在OpenHarmony、HarmonyOS系统运行，支持api9（1.x.x版本）、api10及以上（2.x.x版本），致力于更便捷的OpenHarmony设备的Markdown内容解析。

lv-markdown-in OpenHarmony：OpenHarmony三方库中心仓 lv-markdown-in

lv-markdown-in Gitee：🔥 lv-markdown-in 是鸿蒙 ArkTS3.0+ 原生 Markdown 解析插件。

📦 效果预览

📦 版本说明【重要】

1.x.x 版本系列兼容 API9
2.x.x 版本系列兼容 API10及以上

🎁 lv-markdown-in 目前支持

1.  1~6级标题
2.  文本（斜体、加粗、标记、删除、粉色文本）
3.  表格
4.  引用
5.  超链接
6.  图片
7.  分割线
8.  代码块
9. 列表
10. 复选框

有关Markdown的更多信息，请参阅GitHub指南：https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#what

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

// 导入 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
}

🍺 lv-markdown-in 安装

1. 运行命令

ohpm install @luvi/lv-markdown-in

2. 在项目中引入插件

import { lvMarkdownIn } from @luvi/lv-markdown-in

3. 在代码中使用

lvMarkdownIn({ text: item.toString() })

🍺 自定义样式 Methods

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")     // 设置标记文本的背景颜色为黑色

方法	说明	参数
setTextSize()	设置文本字号	number | string        默认：15
setTextColor()	设置文本颜色	string        默认："#303133"
setTextMarkBackground()	设置标记文本背景颜色	string        默认："#7cff8321"

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()	设置图片高度	number | string | null       默认：null
setConfGlobal()	强制开启全局宽高	boolean        默认：false

5. 代码块主题（lvCode）

---

提供 暗夜 与 明亮 双主题

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

方法	说明	参数
setTheme()	设置代码块主题	string: "dark" | "light"        默认："dark"

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. 列表样式（lvTabulate）

---

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

8. 复选样式（lvCheckbox）

---

需要注意的是：复选样式中字体大小与字体颜色，请使用 lvText 进行设置

🍺 写在后面&版权声明

本项目采用 MIT 开源协议，允许商用，修改，再分发，但您需尊重原作者的劳动成果，对于修改，再分发的代码或者发行包中 必须 包含原作者的许可信息，并在项目README中注明原作者及原仓库地址。