如何在 Next.js 降价博客上进行语法高亮显示

Question

我将 Next.js 用于我的博客，并将我的博客存储在 Markdown 文件中，并将这些文件转换为字符串，然后使用 Greymatter 转换为 HTML。我的代码块分解成<pre><code class="language-whatever">，无论我做什么，我都无法让语法高亮显示。

我尝试通过 npm 添加 highlight.js，从 highlight.js 和棱镜下载文件，使用他们的 CDN，但没有任何效果。

有没有人有使用 Next.js 在降价博客上设置语法高亮的经验？一个例子或任何建议都会很棒！谢谢。

Answer 1

我想到了！我将react-syntax-highlighter与react-markdown结合使用。我从这个博客中获得了一些代码片段，以及如何解析代码片段并通过语法荧光笔传递。

如果您想查看我的解决方案，这是我的存储库。

我正在使用 Markdown 将 Markdown 转换为 HTML 字符串，这会阻止突出显示的发生。一旦我将 markdown 内容从标记的依赖项中取出并将 grey-matter.content 传递到我的 ReactMarkdown 中，它就完美地工作了。

...嗯，也许并不完美...

当我尝试使用颜色主题时发生了一些奇怪的事情。我最终从节点模块中提取了我想要的主题，并将其放置在我的根目录中并从那里调用它，一切都很好。有点 hacky，但它有效！