更新记录

2.0.0（2026-08-03）

• 初始版本
• 基于 UTS 实现，支持 uniapp（vue2/vue3）与 uniappx（uvue）双端
• 跨平台覆盖：Android / iOS / Harmony / Web / 小程序
• 各平台使用原生渲染引擎，高性能公式显示
• 支持 LaTeX 数学公式渲染（含分数、根号、积分、矩阵、方程组、定界符、希腊字母等）
• 支持设置字号（fontSize）、文字颜色（color）
• 支持块级 / 行内显示模式（displayMode）
• 支持 renderToImage 导出图片 API（仅 Android / iOS / Harmony 原生端， 自动生成临时文件路径或返回 base64 dataURL）
• 支持 load / error 事件，load 返回渲染尺寸
• 支持动态切换公式、字号、颜色，实时更新渲染
• 内置完整 demo：基础公式、自定义样式、动态交互、流式生成、公式库测试、图片导出

平台兼容性

uni-app(4.45)

uni-app x(4.61)

name: lime-katex 数学公式 description: 基于 UTS 实现的跨平台 LaTeX 数学公式渲染组件，支持 uniapp 和 uniappx，覆盖 Android、iOS、Harmony、Web 和小程序全平台。 tags:

• katex
• latex
• 公式
• 数学
• 原生 componentTag: l-katex plugin: lime-katex category: 原生组件 dependencies:

• lime-shared

lime-katex 数学公式

一款基于 UTS 实现的跨平台 LaTeX 数学公式渲染组件，支持 uniapp 和 uniappx。各平台使用原生渲染引擎实现高性能公式显示，支持导出图片。

插件依赖：lime-shared

安装方法

1. 在 uni-app 插件市场中搜索并导入 lime-katex
2. 由于普通授权版无法自定义基座，如需使用原生渲染请购买源码版
3. 在页面中使用 l-katex 组件

::: tip 注意🔔

• uniappx iOS 和安卓需要自定义基座
• Web 和小程序端需安装 katex：npm install katex :::

代码演示

基础使用

通过设置 tex 属性来渲染 LaTeX 公式。

<!-- 简单公式 -->
<l-katex tex="E = mc^2" />

<!-- 分数 -->
<l-katex tex="\frac{a}{b}" />

<!-- 希腊字母 -->
<l-katex tex="\alpha + \beta = \gamma" />

::: warning 注意 🔔 uniappx（uvue）端：\ 在模板属性中可能被转义为控制字符（如 \f → 换页符）， 推荐使用 :tex 动态绑定并转义反斜杠：

<l-katex :tex="'\\frac{a}{b}'" />

:::

块级显示模式

设置 displayMode 为 true，公式将以块级方式居中显示（Web 和小程序端生效，原生端为行内渲染）。

<l-katex tex="\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}" :displayMode="true" />

设置字号和颜色

通过 fontSize 和 color 自定义公式的字号和颜色。

<l-katex tex="x^2 + y^2 = r^2" :fontSize="24" color="#FF0000" />

自定义样式

通过 lClass 和 lStyle 自定义组件容器样式。

<!-- 通过 lStyle 设置样式 -->
<l-katex tex="E = mc^2" :lStyle="{ padding: '10px', background: '#f5f5f5' }" />

<!-- 通过 lClass 配合 CSS 样式 -->
<l-katex tex="E = mc^2" lClass="custom-katex" />

<style>
.custom-katex {
  padding: 10px;
  background: #f5f5f5;
}
</style>

API 文档

Props 分类

🎯 基础配置

🎨 样式与外观

⚙️ 行为与交互

Events

渲染为图片（renderToImage）

通过 API 方式将公式渲染为 PNG 图片，可在任意位置调用（不依赖组件实例）。

::: warning 注意 🔔 renderToImage 仅 APP 端（Android / iOS / Harmony）支持，依赖原生渲染引擎。 Web 和小程序端无此 API，如需在 Web/小程序展示图片请使用 KaTeX 服务端渲染或其他方案。 :::

import { renderToImage } from '@/uni_modules/lime-katex'

// 生成临时文件路径
renderToImage({
  tex: 'E = mc^2',
  fontSize: 24,
  color: '#FF0000',
  success: (res) => {
    console.log(res.tempFilePath, res.width, res.height)
  }
})

// 生成 dataURL
renderToImage({
  tex: 'E = mc^2',
  dataURL: true,
  success: (res) => {
    // res.tempFilePath 为 data:image/png;base64,... 字符串
    img.value = res.tempFilePath
  }
})

平台渲染方案

导出图片说明：renderToImage 仅 Android / iOS / Harmony 原生端可用，Web 和小程序端无此 API。 另注意 \color/\textcolor 为双参数命令且仅支持 #RGB/#RRGGBB 十六进制颜色。

公式支持范围（各平台对比）

各平台公式渲染能力存在差异：Web 端覆盖最全，iOS 端覆盖最窄（iOS 为能力下限）。 以下为各平台实测支持情况。

运行环境与渲染引擎对应关系

::: warning 重要说明 🔔 公式支持能力取决于实际使用的渲染引擎，而非单纯的操作系统，请先确认你的运行环境：

:::

说明：

1. uniappx app 端：组件渲染与导出图片均使用原生引擎，能力对应表格中 Android / Harmony / iOS 列。
2. uniapp app 端（vue）：组件渲染走 KaTeX.js（useKatexWeb），公式能力等同 Web 列 （约 600+ 命令，覆盖最全）；但若使用 renderToImage 导出图片，则调用原生引擎， 公式支持范围受对应平台列限制（如 Android 不支持 \tag 编号、iOS 不支持 \operatorname 等）。
3. Web / 小程序端：组件渲染均使用 KaTeX.js（小程序端将解析结果转为 rich-text 展示），公式能力等同 Web 列；两端均无 renderToImage 导出能力（API 返回错误码 9020005）。
4. 编写跨端通用公式时，建议仍以 iOS 原生引擎为基准（三者中最窄），保证各端一致。

总体规模

关键命令支持对比

环境（\begin{...}）支持对比

建议

1. 写公式前以 iOS 为基准：三端中 iOS 命令覆盖最窄，公式库中的公式若含 \operatorname、\pmod、\newcommand、\tag、\xrightarrow、\boxed 等，iOS 端会渲染失败。
2. 等价替代写法（保持三端一致）：
   • \operatorname{argmax} → \mathrm{argmax}
   • a \pmod n → a \;\text{mod}\; n
   • \xrightarrow{a} → \overset{a}{\rightarrow}
   • \boxed{x} → \fbox{$x$}（Web/Android/Harmony 可用）
3. 宏定义类命令（\newcommand/\def）：Web/Android/Harmony 支持，iOS 不支持，应避免使用。
4. \bmod 已在 iOS 端做了兼容替换（自动转为 \;\text{mod}\;），可直接使用。
5. 公式库 220 条内置公式均已按上述兼容性原则验证，三端可正常渲染。

Vue2 使用说明

插件使用了 composition-api，如需在 Vue2 项目中使用，请按照官方教程配置。

关键配置代码（在 main.js 中添加）：

// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-katex/components/lime-katex -->
<lime-katex />

插件标签说明