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

深海的鲸同学 luvi

已于 2024-09-29 16:17:25 修改

阅读量4k

点赞数 36

分类专栏： HarmonyOS 探索及解决方案文章标签： harmonyos 华为鸿蒙

于 2023-11-30 15:15:23 首次发布

本文链接：https://blog.csdn.net/weixin_44640245/article/details/134630747

版权

HarmonyOS 探索及解决方案专栏收录该内容

27 篇文章

订阅专栏

本文介绍了作者开发的lv-markdown-in插件，专为HarmonyOS和ArkTs3.0设计，支持Markdown解析，包括标题、文字、链接、图片、代码块等样式自定义。作者分享了安装步骤和自定义样式的详细方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

📚 写在前面

📦 效果预览

📦 版本说明【重要】

🎁 lv-markdown-in 目前支持

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

1.纯文本模式（text）

2.资源文件模式（rawfile）

3.沙箱文件模式（sandbox）

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

📚 写在前面

鸿蒙原生Markdown解析插件，可在OpenHarmony、HarmonyOS系统运行，兼容api9（1.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~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

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