如何在Modern SharePoint页面添加公式？SPFx集成Mathjax/KaTeX咨询

一、通过SPFx Web部件集成MathJax/KaTeX #

如果要通过SPFx实现LaTeX公式渲染，直接集成这两个库即可，步骤如下：

1. 搭建基础SPFx项目并引入库 #

先初始化SPFx项目，然后在Web部件代码中加载对应库的CDN资源：

集成MathJax的示例代码

import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';

export default class MathFormulaWebPart extends BaseClientSideWebPart<any> {
  private mathJaxReady = false;

  protected async onInit(): Promise<void> {
    await super.onInit();
    // 加载MathJax核心脚本
    return new Promise(resolve => {
      if (this.mathJaxReady) {
        resolve();
        return;
      }
      const script = document.createElement('script');
      script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js';
      script.async = true;
      script.onload = () => {
        this.mathJaxReady = true;
        resolve();
      };
      document.head.appendChild(script);
    });
  }

  public render(): void {
    this.domElement.innerHTML = `
      <div style="padding:1rem;">
        <textarea id="latexInput" style="width:100%;height:100px" placeholder="输入LaTeX公式，比如\\(E=mc^2\\) 或 $$\\sum_{i=1}^n i = \\frac{n(n+1)}{2}$$"></textarea>
        <button id="renderBtn" style="margin:0.5rem 0;">渲染公式</button>
        <div id="formulaContainer"></div>
      </div>
    `;

    // 绑定渲染按钮事件
    this.domElement.querySelector('#renderBtn')?.addEventListener('click', () => {
      const input = (this.domElement.querySelector('#latexInput') as HTMLTextAreaElement).value;
      const container = this.domElement.querySelector('#formulaContainer') as HTMLElement;
      container.innerHTML = input;
      // 触发MathJax重新渲染
      (window as any).MathJax?.typeset([container]);
    });
  }
}

集成KaTeX的示例代码

KaTeX体积更小、渲染更快，代码逻辑类似：

import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';

export default class KaTeXFormulaWebPart extends BaseClientSideWebPart<any> {
  protected async onInit(): Promise<void> {
    await super.onInit();
    // 先加载KaTeX样式文件
    const styleLink = document.createElement('link');
    styleLink.rel = 'stylesheet';
    styleLink.href = 'https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css';
    document.head.appendChild(styleLink);

    // 加载KaTeX核心脚本
    return new Promise(resolve => {
      const script = document.createElement('script');
      script.src = 'https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js';
      script.async = true;
      script.onload = () => {
        // 可选加载自动渲染插件
        const renderScript = document.createElement('script');
        renderScript.src = 'https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/contrib/auto-render.min.js';
        renderScript.async = true;
        renderScript.onload = resolve;
        document.head.appendChild(renderScript);
      };
      document.head.appendChild(script);
    });
  }

  public render(): void {
    this.domElement.innerHTML = `
      <div style="padding:1rem;">
        <textarea id="latexInput" style="width:100%;height:100px"></textarea>
        <button id="renderBtn" style="margin:0.5rem 0;">渲染公式</button>
        <div id="formulaContainer"></div>
      </div>
    `;

    this.domElement.querySelector('#renderBtn')?.addEventListener('click', () => {
      const input = (this.domElement.querySelector('#latexInput') as HTMLTextAreaElement).value;
      const container = this.domElement.querySelector('#formulaContainer') as HTMLElement;
      (window as any).katex?.render(input, container, {
        throwOnError: false,
        displayMode: input.includes('$$') // 判断是否为块级公式
      });
    });
  }
}

2. 部署使用 #

打包SPFx项目，上传到SharePoint应用目录，之后就能把这个Web部件添加到任意页面。输入LaTeX代码点击渲染，即可得到矢量格式的公式（非图片）。

二、无需开发的替代方案（与Word格式一致） #

如果不想编写代码，试试这两种方法：

• Word直接中转：
  1. 在Word中插入公式，保存为docx文件后上传到SharePoint文档库，打开在线版Word
  2. 选中公式复制，粘贴到SharePoint现代页面的文本编辑器时选择「保留源格式」
  3. 此时公式会以Office MathML格式嵌入，和Word样式完全一致，是矢量可编辑状态，而非图片
• OneNote中转：
  在OneNote中插入公式（支持LaTeX和Office自带公式），复制后同样以「保留源格式」粘贴到SharePoint页面，效果与上述方法一致。

三、常见问题解决 #

• 库加载缓慢：可改用SPFx自带的SPComponentLoader.loadScript方法加载资源，比原生创建脚本更稳定
• 渲染出错：检查LaTeX语法，MathJax与KaTeX对部分LaTeX语法支持有差异，需调整为对应库兼容的写法
• 样式冲突：给Web部件容器添加独立CSS类，避免与SharePoint全局样式冲突

内容的提问来源于stack exchange，提问作者Alankruthi Saieni