katex-for-weapp

基于 KaTeX 构建的小程序原生 LaTeX 渲染组件，支持常用的数学、化学公式

实现原理

基于 katex 库，解析 latex 公式生成虚拟 dom 树对象，将 dom 对象翻译成小程序的 rich-text 支持的 nodes 由小程序渲染

局限性

• 依赖微信小程序的 rich-text 组件渲染，请注意小程序基础库 1.4.0 开始支持
• 由于 katex 库过大会大量占用小程序包体大小。

如何使用？

在原生小程序项目中直接使用

1. 在小程序中安装依赖

npm install mini-katex

2. 在小程序开发者工具中 - 工具 - 构建 npm，执行后会看到生成的miniprogram_npm目录

3. 在 app.wxss 加载 katex 的内置 css 样式

@import './miniprogram_npm/mini-katex/index.wxss';

4. 在小程序中解析 latex

// index.js
import parse from 'mini-katex';

Page({
  data: {
    nodes: [],
    latex:
      '\\displaystyle \\frac{1}{\\Bigl(\\sqrt{\\phi \\sqrt{5}}-\\phi\\Bigr) e^{\\frac25 \\pi}} = 1+\\frac{e^{-2\\pi}} {1+\\frac{e^{-4\\pi}} {1+\\frac{e^{-6\\pi}} {1+\\frac{e^{-8\\pi}} {1+\\cdots} } } }',
  },

  onInput: function (e) {
    this.setData({
      latex: e.detail.value,
    });
  },

  renderLatex: function () {
    const katexOption = {
      displayMode: true,
    }; // 参考 katex 的配置
    this.setData({
      nodes: parse(this.data.latex, {
        throwError: true, // 为true时，解析失败会抛出错误，否则会直接把错误信息解析为nodes结构展示
        ...katexOption,
      }),
    });
  },
});