代码块语法高亮

发表于 2025/8/18 GMT+8 21:38:32

最后更新于 2025/8/18 GMT+8 21:38:32

语法高亮显示有些问题,困扰我很久了,今天终于揪出原因所在,一直以来我以为 next-mdx-remote 转换 markdown 的时候出现的问题,或者是 mdx,又或者是 taiwindcss 使用了新的css属性触及了我的知识盲区?最终发现是 sugar-high 的问题。

How to highlight a part of code block in markdown

sugar-high 转换后的代码里会包多余的换行导致显示出现多的空白,以及莫名的多行,用 rehype-prism-plus 则不会

我的理解是 rehype-prism-plus 是基于 prism 为 next.js 作了适配,prism 提供了多种主题prism-themes,目前我使用了两个主题,分别是 VS 对应 light 模式, VS Code Dark+ 对应于 dark 模式

@import '../node_modules/prism-themes/themes/prism-vs.css';

@media (prefers-color-scheme: dark) {
  @import '../node_modules/prism-themes/themes/prism-vsc-dark-plus.css';
}