Markdown代码工坊

鸿蒙原生 Markdown 解析与渲染三方库，一款专为 OpenHarmony 与 HarmonyOS 系统设计的原生 Markdown 渲染解决方案。让Markdown内容在界面中拥有更平滑的性能表现与更统一的视觉体验。

该库以高性能与原生体验为核心，支持数学公式本地渲染，支持流式数据渲染，采用Worker子线程加载，并提供 50+ 可定制样式 API，助力开发者灵活定义 Markdown 内容的视觉风格与交互体验。从基础文本排版到复杂组件布局，都能精确适配系统特性。

充分结合鸿蒙资源机制，支持三种内容加载模式：

• 纯文本加载：适用于动态内容；
• 资源文件加载：便于内置模板与预设内容展示；
• 沙箱文件加载：保障用户内容安全与私有化存储。

适配 $rawfile 原生资源图片加载能力 ，并支持 html常用标签解析与图片加载代理，兼顾 Markdown 与富文本场景的灵活性。

立即使用

import { Markdown } from "@luvi/lv-markdown-in"

@Entry
@Component
struct Index {


  build() {
    Column() {
      Row() {
        Markdown({ text: "金马迎春，福暖四季。祝您在马年里龙马精神，身体康健；事业一马当先，步步高升。万事顺遂，阖家幸福，马到成功！" })
      }.width("100%").height("10%")

    }.width("100%").height("100%").justifyContent(FlexAlign.Center).backgroundColor("#aabbcc")
  }
}

import { Markdown } from "@luvi/lv-markdown-in"

@Entry
@Component
struct Demo1 {


  build() {
    Column()
    {
      Row(){
        Markdown({ text: "鸿蒙ArkTS基于Markdown代码工坊" })
      }.width("100%").height("10%")

      Scroll()
      {
        Column()
        {
          Markdown({
            mode: "rawfile",
            context: this.getUIContext().getHostContext(),      // 资源文件模式必填参数
            rawfilePath: "m1.md",   // 资源文件地址
            callback: {                 // callback 可省略
              complete: () => {
                console.log("Markdown component load success.")
              },
              fail: (code: number, message: string) => {
                console.error("Markdown component load error. code: " + code + ", message: " + message)
              }
            }
          })

        }

      }.width("100%").height("90%")


    }.width("100%").height("100%")
  }
}

import { Markdown } from "@luvi/lv-markdown-in"

@Entry
@Component
struct Demo2 {
  @State isShow: boolean = false

  //自定义弹窗的内容
  @Builder
  myBuilder() {
    Column() {
      Row() {

        Text("关闭").onClick(() => {
          this.isShow = false
        })

      }.width("100%").height("8%").backgroundColor("#aabbcc")

      Scroll() {
        Column() {
          Markdown({
            mode: "rawfile",
            context: this.getUIContext().getHostContext(), // 资源文件模式必填参数
            rawfilePath: "m2.md", // 资源文件地址
            callback: {
              // callback 可省略
              complete: () => {
                console.log("Markdown component load success.")
              },
              fail: (code: number, message: string) => {
                console.error("Markdown component load error. code: " + code + ", message: " + message)
              }
            }
          })

        }

      }.width("100%").height("90%")

    }.width("100%").height("100%")
  }

  build() {
    Column() {
      Row() {
        Image($r("app.media.startIcon")).width(30).height(30).onClick(() => {
          this.isShow = true
          //弹出一个全模态弹出框
        }).bindContentCover(this.isShow, this.myBuilder(),
          { backgroundColor: "#97FFFF", modalTransition: ModalTransition.ALPHA })


      }.width("100%").height("8%").backgroundColor("#DCDCDC").justifyContent(FlexAlign.Start)

    }.width("100%").height("100%")

  }
}

 Markdown 代码工坊为全模态交互提供轻量化、易扩展的内容载体：通过 Markdown 定义全模态交互的规则（如语音指令映射、触控响应逻辑），代码工坊解析后生成 ArkTS 全模态组件，实现 “一份 Markdown 内容，多模态交互适配”，降低全模态应用的开发成本。