如何在 Next.js markdown 博客上进行语法高亮答案

【问题标题】：How to do syntax highlighting on Next.js markdown blog如何在 Next.js markdown 博客上进行语法高亮
【发布时间】：2020-08-26 13:22:54
【问题描述】：

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

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

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

【问题讨论】：

标签： markdown next.js highlight.js

【解决方案1】：

我想通了！我将react-syntax-highlighter 与react-markdown 结合使用。我从this blog 获得了一些代码 sn-ps，其中介绍了如何解析代码 sn-ps 并通过语法高亮显示。

Here's my repo，如果你想看看我的解决方案。

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

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

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

【讨论】：

【解决方案2】：

正如您在回答中提到您使用的是react-markdown，您不需要react-syntax-highlighter。

这是一个基于prismjs的包，那为什么不直接使用prismjs呢。

此博客syntax-highlighting-next-js 包含演练。

如果不考虑特殊用例（如您的情况），使用父包总是比包装包更好。

【讨论】：

【解决方案3】：

这是我在 Next.js https://thetombomb.com/posts/adding-code-snippets-to-static-markdown-in-Next%20js 中使用语法高亮显示的方法

我最初使用的是 graymatter，因为我在 Next.js 入门应用项目之后构建了该应用。我不得不转而使用 react-markdown 和 react-syntax-highlighter 来让一切正常工作。

【讨论】：

欢迎来到 Stack Overflow！欢迎来到堆栈溢出！虽然您的回答可能会解决问题，但including an explanation 关于如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。您可以编辑您的答案以添加解释并指出适用的限制和假设。 - From Review

【解决方案4】：

import ReactMarkdown from "react-markdown";
import { Content } from "mdast";
// import light build
import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
// import only whatever languages you are using. Thaw will dramatically reduce the build size of the page
import js from "react-syntax-highlighter/dist/cjs/languages/prism/javascript";
import python from "react-syntax-highlighter/dist/cjs/languages/prism/python";
// those tags are used when you write ```js  {code here} ```
SyntaxHighlighter.registerLanguage("js", js);
SyntaxHighlighter.registerLanguage("py", python);

您定义了一个自定义渲染器：常量 customRenderers= { // 修改代码标签代码（代码）{ // 节点，因为我使用 ts，这里的代码可能在你的应用程序中有所不同常量 { 节点 } = 代码；常量 { 语言，值 } = 节点；返回（

); }, };

然后返回这个组件

return (
         <article style={{ paddingLeft: "2rem" }}>
            <ReactMarkdown  renderers={customRenderers}>
              // place whatever you want to render
              {blog.content} 
            </ReactMarkdown>
          </article>
)

【讨论】：