如何在Next.js中配置Rehype Pretty Code明暗主题及工作原理解析

你的这份配置从主题配色定义和高亮元素自定义两个维度，实现了Rehype Pretty Code的明暗模式适配，下面拆解具体工作逻辑：

1. 明暗主题的核心配置 #

Rehype Pretty Code基于Shiki实现代码高亮，完全兼容Shiki的主题格式。你的配置里：

• 通过theme.dark和theme.light分别指定深色、浅色模式下的主题规则：
  • 用fs.readFileSync读取主题JSON文件内容，再通过JSON.parse转换成JavaScript对象，供Rehype Pretty Code直接调用。
  • 这里配置的是GitHub官方明暗主题，对应的配色规则会自动映射到代码的不同语法元素（比如关键字、字符串、注释等）上。

当网站切换明暗模式时，Rehype Pretty Code会自动匹配当前模式对应的配色规则，渲染出适配的代码高亮样式。

注意：require.resolve通常用于解析本地npm模块或文件路径，直接传入远程GitHub文件URL可能在构建阶段出现依赖问题，建议把主题JSON文件下载到本地项目后再读取本地路径更稳妥。

2. 高亮行与高亮单词的自定义 #

配置里的两个回调函数是定制高亮元素的样式钩子：

• onVisitHighlightedLine：当处理到你标记为需要高亮的代码行时（比如Markdown里用{1-3}标记行范围），这个函数会给该行对应的DOM节点添加line--highlighted类名。之后你可以通过CSS给这个类写自定义样式，比如设置高亮行的背景色、左侧边框等。
• onVisitHighlightedWord：当处理到标记为需要高亮的单词时（比如Markdown里用==关键词==），这个函数会给该单词对应的DOM节点设置word--highlighted类名，你同样可以用CSS定制单词的高亮样式，比如背景高亮、字体颜色变化等。

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