rojer95/katex-mini

在微信小程序上渲染Latex公式（不依赖服务端渲染，使用KaTeX）

katex-weapp

基于 KaTeX 构建的小程序原生 LaTeX 渲染组件（不依赖服务端渲染）

效果预览图

实现原理

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

局限性

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

包体过大解决方式

• 【推荐】使用小程序分包：小程序分包文档
• 【不推荐】如果你希望再小一点，可以将解析模块放在服务端，提供解析接口，再将结果展示在 rich-text 中（已实现）虽然这里使用了服务端，但是这里是产出json格式的nodes而非图片，相对于将latex转为图片的方案也好很多

有没有完整题目编排方案？

DSlate 富文本编辑器 ：支持 Latex、图文、混合编排的编辑器，可以直接导出小程序 rich-text 支持格式的 JSON 数据。DEMO

预览图：

如何使用？

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

1. 在小程序中安装依赖

npm install @rojer/katex-mini

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

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

@import "./miniprogram_npm/@rojer/katex-mini/index.wxss";

4. 在小程序中解析 latex

// index.js
import parse from "@rojer/katex-mini";

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,
      }),
    });
  },
});

5. 在页面中展示

<!--index.wxml-->
<view class="container">
  <rich-text nodes="{{nodes}}"></rich-text>
  <textarea value="{{latex}}" bindinput="onInput" maxlength="1400"></textarea>
  <button bindtap="renderLatex">渲染</button>
</view>

在 Taro 中直接使用

1、clone 项目

git clone https://github.com/rojer95/katex-mini-taro-demo.git

2、项目根目录安装依赖

yarn

3、编译

yarn dev:weapp

4、编译后:

• 打开小程序开发者工具, 打开 dist 目录
• 可以修改文本框内容 Latex 公式，点击渲染查看效果

使用 API 调用方式

API 的 Demo 源码: https://github.com/rojer95/katex-mini-api

1、导入 wxss

// 在app.wxss中
@import "katex-mini.wxss";

katex-mini.wxss 的下载地址： https://cdn.jsdelivr.net/npm/@rojer/katex-mini/dist/index.wxss

2、请求接口

wx.request({
  url: "https://katex-mini-api.vercel.app",
  data: {
    latex: "a=b+c",
  },
  dataType: "json",
  success(res) {
    this.setData({
      nodes: res.data,
    });
  },
});

3、放到 RichText 组件里

<rich-text nodes="{{ nodes }}" />

贡献者 ✨

rojer

had0ngzhu

写在最后

如果能帮到你，希望能给我一个Star。感谢！

katex-mini's Issues

怎样解析 富文本中的Latex

富文本中含有latex，也有上传的图片，怎样保证解析出来的内容都正常显示

使用之后如何控制richtext的样式？

前端使用了colorui的界面。 目前渲染是正常的。 但是wxml调试器里看不到选然后的richtext，放到view里，view就不见了。如何控制样式？ 比如text-align:center

请问可以输出html格式的结果吗，目前我看输出的是json的

1.1.1版本中矩阵渲染异常

矩阵中的数字均不能正常显示，其中latex为：

\begin{matrix}` 0 & 1 \\ 1 & 0 \end{matrix}\quad
\begin{pmatrix} 0 & -i \\ i & 0 \end{pmatrix}\\
\begin{bmatrix} 0 & -1 \\ 1 & 0 \end{bmatrix}\quad
\begin{Bmatrix} 1 & 0 \\ 0 & -1 \end{Bmatrix}\\
\begin{vmatrix} a & b \\ c & d \end{vmatrix}\quad
\begin{Vmatrix} i & 0 \\ 0 & -i \end{Vmatrix}

在此版本前的版本能正常渲染，该版本渲染结果缺失了以下节点：

这个问题似乎是src/index.ts的153行if (!type) return null;导致的，丢失的节点似乎不是"text" | "span" | "svg" | "anchor" | "line" | "path"其中任何一种类型，且删去153行后渲染正常。

svg的部分无法使用css或latex中\color{}设置颜色

由于将svg放置在img内，无法通过css的color或fill属性控制svg的颜色，同时\color{}也使用css控制颜色，导致两种方法均无法设置svg颜色，可以使用css的filter强制转换，或在img中src的svg标签内嵌入fill='color'

rich-text \n <br> 都不能换行

小程序集成了该库, 转换效果挺好的 , 但是现在遇到一个问题.

index.wxml

... ...

index.wxss ->

...
.latex-container {
word-break:break-all;
width: 100%;
height: 100%;
padding: 6px;
color: #323232;
font-size: 12px;
}
...

index.js ->

import parse from '@rojer/katex-mini'

Page{

data: {
nodes: [],
latex: 9. 用简便方法计算下面各题. 3.8 \\times 1.45+0.38 \\times 4.2+0.038 \\times 13" \\frac{1}{2}+\\frac{1}{4}+\\frac{1}{8}+\\ldots \\ldots+\\frac{1}{128},
},

onShow() {
this.renderLatex()
},

renderLatex: function () {
var content = this.data.latex;
console.log(content)
if (content.includes('\(') && content.includes('\)')) {
content = content.replace(/\(/g, '').replace(/\)/g, '');
}

if (content.includes('\\[') && content.includes('\\]')) {
  content = content.replace(/\\\[/g, '').replace(/\\\]/g, '');
}

if (content.includes('\\\\')) {
  content = content.replace(/\\\\/g, '').replace(/\n/g, '');
}

...

}
}

运行效果如下:

请问大佬有解决方法吗?
非常感谢 !