不需要服务端即可渲染latex公式

[rojer95]

katex-weapp

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

实现原理

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

依赖微信小程序的 RichText 组件渲染，请注意小程序基础库 1.4.0 开始支持，低版本需做兼容处理。

由于 katex 库过大，引入eval5模块对象 katex 模块进行在线加载，从而减小小程序的包体大小

当然如果你觉得占用体积还是太大，你也可以把katex-mini提供的的parse写成一个在线api，然后在线请求获取转化好的nodes，然后直接在小程序的RichText组件中展示（但是css还是要导入到项目中的）

在 Taro 小程序项目中直接使用

1. 在小程序中安装依赖

npm install @rojer/katex-mini

2. 创建 KatexProvider

import React, { useEffect } from "react";
import Taro from "@tarojs/taro";
import { loadKatex } from "@rojer/katex-mini";

const Context = React.createContext({
  load: false,
});

export const KatexProvider = ({ children }) => {
  const [load, setLoad] = React.useState(false);

  useEffect(() => {
    Taro.request({
      url: "https://lib.baomitu.com/KaTeX/latest/katex.min.js",
      success: ({ data: code }) => {
        loadKatex(code);
        setLoad(true);
      },
    });
  }, []);

  return (
    <Context.Provider
      value={{
        load,
      }}
    >
      {children}
    </Context.Provider>
  );
};

export const useKatexLoaded = () => {
  const context = React.useContext(Context);
  return context.load;
};

3. 在 app.js 使用 KatexProvider

import { Component } from "react";
import "./app.less";
import { KatexProvider } from "./components/katex/Loader";

class App extends Component {
  componentDidMount() {}

  componentDidShow() {}

  componentDidHide() {}

  componentDidCatchError() {}

  // this.props.children 是将要会渲染的页面
  render() {
    return <KatexProvider>{this.props.children}</KatexProvider>;
  }
}

export default App;

4. 使用 katex

import React, { useEffect, useState } from "react";
import { RichText } from "@tarojs/components";

import "@rojer/katex-mini/src/index.less"; // 引入katex的css样式保证latex公式排版正确
import parse from "@rojer/katex-mini";

import { useKatexLoaded } from "./Loader";

export default React.memo(
  ({ latex, option }) => {
    const [nodes, setNodes] = useState([]);
    const load = useKatexLoaded();

    useEffect(() => {
      // 只有在katex库加载好后才进行渲染latex公式
      if (load) setNodes(parse(latex, option));
    }, [latex, option, load]);

    return <RichText nodes={nodes} />;
  },
  (prevProps, nextProps) => prevProps.latex === nextProps.latex
);

写在最后

如果有帮到你，希望能给我点个star，感谢！
https://github.com/rojer95/katex-mini