更新记录

1.0.0（2026-07-08） 下载此版本

• 支持 $...$ 和 $$...$$ 公式识别。
• 支持小学、初中、高中、大学常用数学写法：上下标、分数、根号、三角函数、对数、极限、导数、偏导、积分、重积分、求和、连乘、集合、关系符、希腊字母、矩阵、方程组、分段函数、向量、行列式、上划线、着重号等。
• 支持普通题干中混排公式，不破坏已有 HTML 富文本标签。
• 提供公式输入弹窗组件，包含 LaTeX 输入、模板插入和实时预览。

平台兼容性

uni-app(5.05)

XLB 数学公式渲染与编辑器

这是从当前项目题库编辑能力中封装出来的轻量数学公式插件，不引入 KaTeX、MathJax 或字体资源

安装

直接复制整个目录到目标项目：

uni_modules/xlb-mathformula

插件复制后即可通过 easycom 使用组件，或通过 js_sdk 引入渲染 API。

平台兼容

• 微信小程序：支持。
• 抖音/字节小程序：支持。
• 百度小程序：支持。
• Android App / iOS App：支持 App-Vue。
• H5：支持。

说明：插件输出的是 rich-text 可识别的轻量 HTML 字符串。复杂矩阵、分式、根号等使用行内样式模拟排版，不依赖 canvas 或 webview。

能力范围

• 支持 $...$ 和 $$...$$ 公式识别。
• 支持小学、初中、高中、大学常用数学写法：上下标、分数、根号、三角函数、对数、极限、导数、偏导、积分、重积分、求和、连乘、集合、关系符、希腊字母、矩阵、方程组、分段函数、向量、行列式、上划线、着重号等。
• 支持普通题干中混排公式，不破坏已有 HTML 富文本标签。
• 提供公式输入弹窗组件，包含 LaTeX 输入、模板插入和实时预览。

渲染 API

import {
    renderMathContent,
    renderFormulaPreview,
    normalizeLatex,
    FORMULA_TEMPLATES
} from '@/uni_modules/xlb-mathformula/js_sdk/xlb-mathformula/index.js';

const html = renderMathContent('$(1+x)^n \geqslant 1+nx$');
const latex = normalizeLatex('$\frac{a}{b}$');

渲染组件

<xlb-mathformula
    :content="questionTitle"
    color="#333333"
></xlb-mathformula>

export default {
    data() {
        return {
            questionTitle: '$(1+x)^n \geqslant 1+nx \quad (x>-1)$'
        };
    }
};

公式输入弹窗

<xlb-mathformula-popup
    ref="formulaPopup"
    @confirm="insertFormula"
></xlb-mathformula-popup>

this.$refs.formulaPopup.open({
    value: '\frac{a}{b}',
    editorId: 'stemEditor'
});

confirm 事件会返回：

{
    latex: '\frac{a}{b}',
    html: '<span>...</span>',
    editorId: 'stemEditor',
    formulaIndex: null
}

继续扩展

后续新增公式命令时，优先集中到插件的 js_sdk/xlb-mathformula/index.js 或底层渲染实现，页面只调用插件 API。

注意事项

• 这是轻量公式渲染器，目标是覆盖教学题库常用公式，不是完整 TeX 引擎。
• 如果目标项目已有自己的富文本清洗逻辑，请在入库前保留 $...$ 或 $$...$$ 原文。
• 编辑器插入建议保存原始 LaTeX，例如 $ \frac{a}{b} $，展示时再调用 renderMathContent 或 <xlb-mathformula>。