HMarkdown

基于marked的鸿蒙端markdown渲染库

v3.0.0特性

1. 支持公式本地渲染
2. 支持子线程渲染
3. 完全重构

Tips:

1. 本次更新支持Api变动较大,如需旧版本请查看→
2. v2.0.8因为没有考虑到子线程内存隔离问题会导致设置的插件不生效

效果图(如无法预览请前往Github)

---

参数

名称	是否必传	默认值	说明
content	否	""	markdown文本内容
token	否	[]	markdown文本内容解析后Tokens
options	否	undefined	属性，主题等相关配置
onLoading, onSuccess ,onError	否	undefined	加载状态回调(方面设置Loading等)
nestedScroll	否	undefined	嵌套滚动
contentStartOffset	否	undefined	内容头部偏移量，参考List组件
contentEndOffset	否	undefined	内容尾部偏移量，参考List组件
paddings	否	undefined	内边距
scrollBar	否	undefined	滚动条状态
cachedCount	否	undefined	懒加载缓存数量
cachedShow	否	undefined	懒加载缓存组件是否显示

MarkdownOptions参数

名称	是否必传	默认值	说明
theme	否	defaultTheme(参考Jetbrains的ui)	亮色主题相关配置
darkTheme	否	defaultDarkTheme(参考Jetbrains的ui)	暗色主题相关配置
darkMode	否	false	是否亮色/暗色
lineSpace	否	12	item之间的间距
textLineSpace	否	LengthMetrics.vp(12)	item中text的行间距
options	否	undefined	marked相关配置
extensions	否	undefined	marked插件,可参考数学公式
imageClick	否	undefined	图片点击事件
linkClick	否	undefined	超链接点击事件
customBlockBuilder	否	undefined	自定义块元素渲染
customInlineBuilder	否	undefined	自定义行内元素渲染
maxLines	否	undefined	如果是行内元素则显示最大行数(多为List列表内item都是Markdown时使用)

---

下载安装

ohpm install @lidary/markdown

---

导包

// V2状态管理 不支持V1
import { Markdown } from '@lidary/markdown';

---

使用方式

Markdown({
  content: this.text,
  options: {
    darkMode: this.isDark,
    options: {
      gfm: true
    },
    darkTheme: {
      themeColor: Color.Orange
    },
    imageClick: (url?: string) => {
      promptAction.showToast({
        message: `图片被点击:${url}`,
        duration: 1500,
        bottom: "center",
      })
    },
    linkClick: (url?: string) => {
      promptAction.showToast({
        message: `超链接被点击----url:${url}`,
        duration: 1500,
        bottom: "center",
      })
    }
  },
  onLoading: () => {
    this.isLoading = true
  },
  onError: () => {
    this.isLoading = false
  },
  onSuccess: () => {
    this.isLoading = false
  },
  contentStartOffset: AppUtils.WindowUtil.getBottomHeight(),
  contentEndOffset: AppUtils.WindowUtil.getBottomHeight(),
  paddings: {left: 16, right: 16},
  scrollBar: BarState.Off,
  nestedScroll: {
    scrollForward: NestedScrollMode.PARENT_FIRST,
    scrollBackward: NestedScrollMode.SELF_FIRST
  },
  cachedCount: 3,
  cachedShow: true
}).height("100%")

---

特性

• 支持标题语法
• 支持段落语法
• 支持分割线语法
• 支持代码语法
• 支持加粗语法
• 支持斜体语法
• 支持删除线语法
• 支持链接语法
• 支持表格语法
• 支持有序列表语法
• 支持无序列表语法
• 支持块引用语法
• 支持数学公式语法
• 支持图片语法
• 支持单独代码块功能
• 支持列表嵌套功能
• 支持文本样式设置
• 支持深浅主题色设置
• 支持部分html语法
• 支持任务列表语法

更新日志

开源协议

本项目基于 MIT License ，请自由地享受和参与开源