更新记录

1.0.3（2026-10-11）

• 围栏代码块新增行号显示：块内左侧固定行号列，代码正文放在横向 scroll-view 中，行号与正文行高对齐
• 修复窄屏下超长代码行撑破代码块、导致页面横向溢出的问题：代码块内容区限制在容器宽度内，超长行改为横向滑动查看
• 新增代码块独立复制：新增 codeCopyable 属性，开启后每个代码块右上角显示「复制」按钮，点击派发 code-copy 事件并回传 { lang, code }；组件不自动写入剪贴板，由使用者在回调中实现
• 引用块新增浅色背景与右侧圆角，视觉层次更清晰
• 新增脚注支持：行内 [^id] 引用渲染为可读编号角标，文末自动汇总为脚注列表
• 新增图片滑动组语法 <![](url),![](url)>：组内图片横向滑动展示
• 新增化学式支持：\ce{...} 自动转换为 LaTeX（元素符号、下标、电荷、-> / <=> 等箭头、\cdot），自研 UTS 引擎渲染
• 化学式转换区分系数与下标：项起始处的数字按系数（正常字号）输出，其余数字为下标
• 化学式电荷按上标渲染（如 \ce{NH4+}、\ce{OH-}、\ce{SO4^2-}）
• 化学式支持大括号显式上标 / 下标（如化合价 \ce{Hg^{II}}、同位素 \ce{{}^{14}C}）
• 化学式箭头支持条件标注（如 \ce{CaCO3 ->[高温] CaO + CO2}），标注渲染于箭头上方
• 新增原生 HTML 白名单：支持 span / div / br / sup / sub / a 六种标签及安全的 color / background-color / font-size / font-weight / text-decoration 内联样式，其余标签原样作为文本输出
• a 标签支持锚点占位（<a id="x"></a> 仅渲染不跳转）与超链接（<a href="x">文字</a>，点击派发 link 事件）
• 因 uni-app x 不支持 vertical-align，sup / sub 采用缩小字号方式近似上标 / 下标
• 示例页补充代码行号、引用、化学式、原生 HTML、图片滑动组、脚注示例

平台兼容性

uni-app x(5.07)

hy-markdown-x markdown 显示器

hy-markdown-x 是一个基于 uni-app x（uvue + UTS） 的只读 markdown 渲染组件（显示器），解析引擎与 LaTeX 公式排版引擎均为自研，无任何第三方依赖。

与 Vue2 版 hy-markdown 的差异：本组件脚本采用 <script setup lang="uts"> 写法，且 LaTeX 公式全平台统一由内置 UTS Canvas 排版引擎渲染（Vue2 版在 H5/PC 走 KaTeX）。

功能特性

• 纯只读渲染，不含任何编辑能力，体积小、依赖零
• 支持：标题（h1~h6）、段落、粗体 / 斜体 / 粗斜体、删除线、行内代码、链接、图片、引用、有序 / 无序列表、任务列表、分割线、围栏代码块、表格
• LaTeX 公式完整支持：行内公式 $...$ 与块级公式 $$...$$，全平台统一由内置 Canvas 引擎渲染
• 公式引擎覆盖：基础符号与结构、大运算符（∑∏∫）与极限、自适应括号、矩阵与方程组、重音与向量、文本与字体样式
• 支持深色主题与文本可选择（selectable）开关
• 支持一键复制按钮（copyable）：开启后组件右上角显示「复制」按钮，点击派发 copy 事件并回传纯文本，复制动作由使用者在回调中自行实现
• 支持代码块独立复制（codeCopyable）：开启后每个代码块右上角显示「复制」按钮，点击派发 code-copy 事件并回传 { lang, code }，复制动作由使用者在回调中自行实现
• 支持 AI 流式输出：content 持续追加时采用增量解析，仅重解析末段、复用已稳定的块，长文本流式渲染更流畅
• 代码块支持行号显示；引用块带浅色背景
• 支持脚注（[^id] 与文末 [^id]: 定义）
• 支持图片滑动组 <![](url),![](url)>，组内图片横向滑动
• 支持化学式 \ce{...}（自动转 LaTeX）
• 支持原生 HTML 白名单：span / div / br / sup / sub / a 及安全的行内样式
• 点击链接 / 图片派发对应事件，便于接入 uni.navigateTo / uni.previewImage

安装

将 hy-markdown-x 目录放入项目的 uni_modules 目录即可，组件已支持 easycom，无需手动 import。

需使用 uni-app x 项目（HBuilderX 编译到 App-Android / App-iOS / App-HarmonyOS / Web / 微信小程序）。

基本用法

<template>
    <view style="padding: 15px;">
        <hy-markdown-x
            :content="md"
            :dark="false"
            :selectable="true"
            :copyable="true"
            :code-copyable="true"
            @link="onLink"
            @image="onImage"
            @copy="onCopy"
            @code-copy="onCodeCopy"
        />
    </view>
</template>

<script setup lang="uts">
    const md = ref('# 标题\n\n支持 **粗体**、*斜体*、`代码` 与公式 $E=mc^2$。')

    const onLink = (href : string) => {
        uni.showToast({ title: '链接：' + href, icon: 'none' })
    }

    const onImage = (src : string) => {
        uni.previewImage({ urls: [src] })
    }

    const onCopy = (text : string) => {
        // 复制动作由使用者自行实现
        uni.setClipboardData({
            data: text,
            success: () => {
                uni.showToast({ title: '已复制', icon: 'none' })
            },
            fail: () => {}
        })
    }

    const onCodeCopy = (e : UTSJSONObject) => {
        // 代码块复制：e['code'] 为代码内容，e['lang'] 为语言标识
        uni.setClipboardData({
            data: (e['code'] as string) ?? '',
            success: () => {
                uni.showToast({ title: '已复制代码', icon: 'none' })
            },
            fail: () => {}
        })
    }
</script>

完整可运行示例见插件目录 example/example.uvue：将其拷入 uni-app x 工程并在 pages.json 中注册后即可预览。

属性 Props

事件 Events

AI 流式输出

组件的 content 为普通响应式属性，直接持续追加内容即可实现流式渲染，例如把大模型返回的增量片段不断拼接到 content：

// 每次收到增量片段时追加
md.value += delta

• 解析层内置增量解析：当新内容是在原内容尾部追加时，仅重新解析最后一个稳定空行之后的尾部，复用之前已解析好的块，避免每帧全量重解析。
• 流式过程中出现的未闭合语法（如末尾未完成的 ``` / $ / 表格）会被当作普通文本安全渲染，待闭合后自动补全。
• 如需自行控制频率，可对上游增量做节流后再赋值给 content。

也可通过组件方法 getText()（defineExpose 暴露）获取当前渲染内容的纯文本。

支持的语法

公式（LaTeX）

本组件的 LaTeX 由内置 UTS Canvas 排版引擎渲染，覆盖以下常见语法：

• 上标 ^、下标 _，如 x^2、a_{i+1}
• 分数 \frac{}{}、根式 \sqrt{}、\sqrt[n]{}
• 大运算符与极限 \sum、\prod、\int、\lim、\iint 等，上下限自动排布
• 自适应括号 \left( \right)、\left\{ \right\}
• 矩阵与方程组 \begin{bmatrix}、\begin{matrix}、\begin{cases}
• 重音与向量 \vec、\hat、\bar、\dot、\overline、\underline
• 文本与字体样式 \text{}、\mathbf、\mathbb、\mathrm、\mathsf
• 化学式 \ce{...}（自动转换为 LaTeX，如 \ce{Ca(OH)2}、\ce{2H2 + O2 -> 2H2O}；支持下标、上标电荷（\ce{NH4+}、\ce{SO4^2-}）与大括号显式上下标（\ce{Hg^{II}}、\ce{H_{2}O}）、箭头 -> / <- / <=> / => 及其条件标注 ->[高温] 与 \cdot）
• 常用希腊字母、运算符、关系符号、箭头与定界符

说明：自研引擎覆盖日常约 90% 常用语法，极冷门宏或复杂宏包（如 TikZ、自定义 \newcommand）不在支持范围内。

平台支持

注意事项

1. 组件为只读显示器，不提供编辑、光标、选区等编辑能力。
2. 图片与公式在行内混排时，会以「片段分组」方式横向排列；纯文本段落则以单个文本节点呈现，保证中文自然换行。
3. 表格默认铺满容器宽度、列宽按各列内容比例自适应；单元格内容超出列宽时自动折行显示，列数过多时支持横向滚动（代码块同理），横向滚动时表头背景与分隔线会随内容完整显示。
4. 表格单元格当前以纯文本方式渲染（单元格内的行内标记不会进一步解析）。
5. 公式画布会随容器宽度自适应，超宽公式建议放在块级 $$...$$ 中。
6. 原生 HTML 仅支持白名单标签 span / div / br / sup / sub / a 及少量安全内联样式：<a id="x"></a> 仅作锚点占位、不参与点击跳转，<a href="x">文字</a> 渲染为链接并通过 @link 派发；其余标签（如 <strong>）会原样作为文本输出，不被解析。
7. uni-app x 不支持 vertical-align 与 em 字号，<sup> / <sub> 采用缩小字号方式近似上标 / 下标（不会上下偏移）。
8. \ce{...} 由组件在解析阶段自行转换为等价 LaTeX，无需额外扩展。