MDX语法高亮实现方案详解

柏雅瑶Winifred

于 2025-06-02 09:02:14 发布

阅读量413

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_01123/article/details/148374994

MDX语法高亮实现方案详解

mdx Markdown for the component era 项目地址: https://gitcode.com/gh_mirrors/md/mdx

MDX作为Markdown的扩展语法，允许我们在文档中无缝混合使用Markdown和JSX组件。其中代码块的高亮显示是技术文档中非常重要的功能，本文将深入探讨在MDX中实现语法高亮的几种方案。

语法高亮基础概念

在标准Markdown中，代码块使用三个反引号包裹，可以指定语言标识符：

```js
console.log('Hello World')


MDX完全兼容这种语法，但默认不会对代码进行语法高亮处理。我们需要通过额外配置来实现这一功能。

## 两种实现方式对比

在MDX中实现语法高亮主要有两种思路：

1. **编译时处理**：在构建阶段完成代码高亮转换
   - 优点：用户端无需额外处理，性能好
   - 缺点：构建时间增加，灵活性较低

2. **运行时处理**：在浏览器中动态高亮代码
   - 优点：灵活性高，可动态调整
   - 缺点：需要加载额外资源，可能影响性能

## 编译时语法高亮方案

编译时处理推荐使用rehype插件生态系统，以下是几种常用方案：

### 1. 使用rehype-starry-night插件

```javascript
import {compile} from '@mdx-js/mdx'
import rehypeStarryNight from 'rehype-starry-night'

const result = await compile('```js\nconsole.log(1)\n```', {
  rehypePlugins: [rehypeStarryNight]
})

该插件基于TextMate语法引擎，支持VS Code同款语法高亮规则，特点是：

支持语言广泛
高亮效果精准
需要额外引入CSS样式

2. 使用rehype-highlight插件

import rehypeHighlight from 'rehype-highlight'

// 配置方式与starry-night类似

基于highlight.js实现，特点是：

体积相对较小
社区支持广泛
支持自动语言检测

3. 使用rehype-prism插件

import rehypePrism from '@mapbox/rehype-prism'

基于Prism.js实现，特点是：

主题丰富
支持行高亮等高级功能
插件系统完善

运行时语法高亮方案

如果选择在运行时处理，可以使用专门的高亮组件：

import {MDXProvider} from '@mdx-js/react'
import {Prism as SyntaxHighlighter} from 'prism-react-renderer'

const components = {
  code: ({className, children}) => {
    const language = className.replace('language-', '')
    return (
      <SyntaxHighlighter language={language}>
        {children}
      </SyntaxHighlighter>
    )
  }
}

function App() {
  return (
    <MDXProvider components={components}>
      <YourMDXContent />
    </MDXProvider>
  )
}

运行时方案的优势在于：

可以动态切换主题
支持交互式代码演示
不需要重新构建即可更新高亮样式

高级技巧：处理代码元数据

MDX支持在代码块语言标识后添加元数据：

```jsx {1-3} title="示例代码"
function Example() {
  return <div>Hello</div>
}
```

要利用这些元数据，可以使用rehype-mdx-code-props插件：

import rehypeMdxCodeProps from 'rehype-mdx-code-props'

// 在编译配置中添加该插件

处理后，你可以在自定义组件中访问这些属性：

const CodeBlock = ({className, title, children, ...props}) => {
  return (
    <div className="code-block">
      {title && <div className="code-title">{title}</div>}
      <pre {...props}>
        <code className={className}>{children}</code>
      </pre>
    </div>
  )
}