Shiki在Next.js中集成remark-math的解决方案

在使用Shiki进行代码高亮时，很多开发者会选择在Next.js项目中通过MDX来处理Markdown内容。当需要支持数学公式时，通常会引入remark-math插件，但这可能导致Shiki报错提示找不到math语言支持。本文将深入分析这个问题并提供完整的解决方案。

问题背景

Shiki作为代码高亮工具，默认并不包含对数学公式的语言支持。当我们在Next.js项目中同时使用remark-math插件和rehype-shiki插件时，Shiki会尝试将数学块(```math)作为代码块进行高亮处理，但由于缺乏对应的语言定义，就会抛出"Language math not found"错误。

核心原理

1. remark-math插件的作用是将Markdown中的数学公式转换为特殊的HTML结构
2. rehype-shiki插件负责对代码块进行语法高亮
3. 数学公式本质上不应该被当作代码进行语法高亮

解决方案

正确的处理流程应该是：

1. 首先使用remark-math解析数学公式
2. 然后使用rehype-katex将数学公式转换为可渲染的HTML
3. 最后使用rehype-shiki处理真正的代码块

具体配置示例如下：

const withMDX = createMDX({
  extension: /\.(md|mdx)$/,
  options: {
    remarkPlugins: [remarkMath],
    rehypePlugins: [
      rehypeKatex,  // 先处理数学公式
      [
        rehypeShiki,  // 再处理代码高亮
        {
          themes: {
            light: "vitesse-light",
            dark: "vitesse-dark",
          }
        }
      ]
    ]
  }
});

深入理解

这种处理顺序之所以重要，是因为：

1. rehype-katex会识别并转换数学公式块，将它们从代码块形式转换为数学公式的HTML表示
2. 经过rehype-katex处理后，Shiki就只会看到真正的代码块，而不会尝试对数学公式进行高亮
3. 这种管道式的处理方式符合Markdown处理的一般原则：先转换特殊结构，再处理通用内容

最佳实践建议

1. 对于数学公式密集的项目，建议单独测试数学公式的渲染效果
2. 主题选择时要注意与数学公式样式的协调性
3. 可以考虑添加错误边界处理，当数学公式渲染失败时提供优雅降级
4. 对于复杂的文档，建议分阶段测试各个插件的效果

通过这样的配置，开发者可以在Next.js项目中同时享受Shiki的代码高亮能力和remark-math的数学公式支持，而不会产生冲突。这种组合特别适合技术文档、学术文章等需要同时展示代码和数学公式的场景。