如何在Markdoc中编写数学公式？Tailwind Syntax模板场景需求

由于Markdoc原生不支持$/$$包裹的LaTeX公式语法，你可以通过以下两种方式解决：

方法一：自定义Markdoc标签 + KaTeX/MathJax渲染（推荐复杂公式） #

Markdoc允许自定义标签，你可以通过创建专用的数学公式标签，结合KaTeX或MathJax来渲染公式：

步骤1：在Markdoc配置中定义自定义标签 #

在项目的Markdoc配置文件（如markdoc.config.js）中添加如下配置：

import { defineSchema } from '@markdoc/markdoc';

export default defineSchema({
  tags: {
    // 行内公式标签
    math: {
      render: 'Math',
      attributes: {
        content: { type: String, required: true },
      },
    },
    // 块级公式标签
    display-math: {
      render: 'DisplayMath',
      attributes: {
        content: { type: String, required: true },
      },
    },
  },
});

步骤2：创建渲染组件 #

以React项目为例，创建对应的公式渲染组件（需先安装KaTeX依赖：npm install katex）：

import katex from 'katex';
import 'katex/dist/katex.min.css';

// 行内公式组件
export function Math({ content }) {
  return (
    <span className="inline-block" dangerouslySetInnerHTML={{
      __html: katex.renderToString(content, {
        throwOnError: false, // 忽略渲染错误
      })
    }} />
  );
}

// 块级公式组件
export function DisplayMath({ content }) {
  return (
    <div className="my-4 overflow-x-auto" dangerouslySetInnerHTML={{
      __html: katex.renderToString(content, {
        displayMode: true,
        throwOnError: false,
      })
    }} />
  );
}

步骤3：在Markdoc中使用 #

• 行内公式：{% math content="y_i = e(x_i) ≡ x_i + s_i \\mod 2" %}
• 块级公式：

{% display-math content="y_i = e(x_i) ≡ x_i + s_i \\mod 2" %}

方法二：HTML原生标签（适合简单公式） #

对于仅包含下标、基础符号的简单公式，可以直接使用HTML标签：

• 下标：y<sub>i</sub>（渲染为yᵢ）
• 特殊符号：直接使用Unicode字符，如≡、+、mod等
  示例：y<sub>i</sub> = e(x<sub>i</sub>) ≡ x<sub>i</sub> + s<sub>i</sub> mod 2

内容的提问来源于stack exchange，提问作者Mark Watney