给时光以生命,给岁月以文明
关键词:HarmonyOS、鸿蒙应用、ArkTs、markdown
目录
📚 写在前面
鸿蒙原生 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~6级标题
- 文本(斜体、加粗、标记、删除、粉色文本)
- 表格
- 引用
- 超链接
- 图片
- 分割线
- 代码块
- 列表
- 复选框
有关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中注明原作者及原仓库地址。