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

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


目录

📚 写在前面

📦 效果预览

📦 版本说明【重要】

🎁 lv-markdown-in 目前支持

🍊 3种内容加载模式(纯文本、资源文件、沙箱文件)

1.纯文本模式(text)

2.资源文件模式(rawfile)

3.沙箱文件模式(sandbox)

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

🍺 lv-markdown-in 安装

🍺 自定义样式 Methods

1. 标题样式(lvTitle)

2. 文字样式(lvText)

3. 超链接样式(lvLink)

4. 图片样式(lvImage)

5. 代码块主题(lvCode)

6. 引用块样式(lvQuote)

7. 列表样式(lvTabulate)

8. 复选样式(lvCheckbox)

🍺 写在后面&版权声明


📚 写在前面

鸿蒙原生Markdown解析插件,可在OpenHarmony、HarmonyOS系统运行,兼容api91.x.x版本)、api10及以上(2.x.x版本),支持3种内容加载模式(纯文本、资源文件、沙箱文件),致力于更便捷的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

🍊 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)
      }
    }
})

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

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

040ce94a45e04e09ac6df6d85beaf23c.png

🍺 自定义样式 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")     // 设置标记文本的背景颜色为黑色
lvText.setTextLineHeight("25")           // 设置标记文本的行高
方法 说明 参数 版本说明
setTextSize() 设置文本字号 number | string        默认:15
setTextColor() 设置文本颜色 string        默认:"#303133"
setTextMarkBackground() 设置标记文本背景颜色 string        默认:"#7cff8321"
setTextLineHeight()  设置文本的行高 string        默认:"24" 2.0.2

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)


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

daeaee2b0e0346cd99f0ac10c9bbb83b.png

// 导入 lvCode
import { lvCode } from '@luvi/lv-markdown-in'
// 用法
lvCode.setTheme("dark")         // 设置代码块主题为暗夜
lvCode.setIndexState(true)      // 展示代码块索引列
方法 说明 参数 版本说明
setIndexState() 设置索引列的展示与隐藏 boolean        默认:false 2.0.2
setTheme() 设置代码块主题 string: "dark" | "light"        默认:"dark"

6. 引用块样式(lvQuote)


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

6515d1615e684324b3774123a5855815.pnga88b626dec974876a62505c9bfaebf24.png

// 导入 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中注明原作者及原仓库地址。

推荐内容
点击阅读全文
Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐