Nuxt 3 + nuxt-content：如何在Markdown中渲染数学公式？

1. 安装依赖 #

首先安装处理数学公式的remark插件、rehype插件以及KaTeX核心库：

npm install remark-math rehype-katex katex

2. 修改Nuxt配置 #

在nuxt.config.ts中配置@nuxt/content的markdown处理器，添加对应的remark和rehype插件，并引入KaTeX的样式文件：

export default defineNuxtConfig({
  modules: ['@nuxt/content'],
  content: {
    markdown: {
      remarkPlugins: ['remark-math'],
      rehypePlugins: [
        ['rehype-katex', {
          // 可选：自定义KaTeX渲染规则，比如关闭严格模式避免小语法错误导致渲染失败
          strict: false,
          throwOnError: false
        }]
      ]
    }
  },
  // 全局引入KaTeX的样式文件，确保公式渲染样式正确
  css: ['katex/dist/katex.min.css']
})

3. 测试使用 #

在你的markdown文件中直接用$...$标记行内公式，$$...$$标记块级公式即可：

行内公式示例：$E=mc^2$
块级公式示例：
$$
\sum_{i=1}^n i = \frac{n(n+1)}{2}
$$

注意事项 #

• 如果需要更个性化的渲染效果，可以在rehype-katex的配置项中添加KaTeX支持的参数，比如自定义字体、禁用某些特性等；
• 若遇到公式渲染异常，可检查markdown文件中的符号是否符合LaTeX语法，或调整strict参数为false降低语法校验强度。

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