我的博客使用Next.js，我将博客存储在markdown文件中，并使用Greymatter将这些文件转换为字符串，然后转换为HTML。我的代码块分解为<pre><code class="language-whatever">，无论我做什么，我都无法实现语法高亮显示。
我尝试过通过npm添加highlight.js，从highlight.jss和prism下载文件，使用它们的cdn，但没有什么真正有效的。
有没有人有使用Next.js在markdown博客上设置语法高亮的经验？举个例子或任何建议都很好！谢谢
我想通了！我将react语法highlighter与react markdown结合使用。我从这个博客中得到了一些代码片段，介绍了如何解析代码片段，然后通过语法高亮显示。
如果你想看看我的解决方案，这是我的回购。
我使用marked将我的markdown转换为HTML字符串，这阻止了高亮显示的发生。一旦我从标记的依赖项中提取了我的markdown内容，并将graymatter.content传递给我的ReactMarkdown，它就完美地工作了。
嗯，也许不完全。。。
当我尝试使用颜色主题时，发生了一些奇怪的事情。我最终从节点模块中提取了我想要的主题，并将其放置在我的根中，然后从那里调用它，这非常好。有点生气，但它有效！
正如您在回答中提到的，您使用的是react markdown，您不需要react语法高亮。
它是一个基于prismjs的包，那么为什么不直接使用prismjs。
这个突出显示next js的博客语法包含演练。
如果没有考虑特殊的用例(如您的用例(，那么使用父包总是比包装包更好。
以下是我如何在Next.js中使用语法高亮显示https://thetombomb.com/posts/adding-code-snippets-to-static-markdown-in-Next%20js
自从我按照Next.js入门应用程序项目构建应用程序以来，我最初使用的是灰度。我不得不转而使用带有react语法高亮的react markdown来让一切正常工作。
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);
定义自定义渲染器：
const customRenderers= {
// modify the code tag
code(code) {
// node since i use ts, this code here might vary in your app
const { node } = code;
const { lang, value } = node;
return (
<div style={{ fontSize: "1.6rem" }}>
<SyntaxHighlighter
style={vscDarkPlus}
language={lang}
children={value}
/>
</div>
);
},
};
之后返回该组件
return (
<article style={{ paddingLeft: "2rem" }}>
<ReactMarkdown renderers={customRenderers}>
// place whatever you want to render
{blog.content}
</ReactMarkdown>
</article>
)
如果你使用Markdown，那么你可以转向MDX(Markdown扩展(，这样你就可以启用插件，比如与highlight.js相同的重新键入突出显示插件。
启用此功能后，您可以导入它&将其添加到您的MDX选项中，然后您所需要做的就是选择highlight.js样式并将其导入您的页面：
- 安装重新键入突出显示：
npm install rehype-highlight - 添加到您的mdx选项：
import rehypeHighlight from 'rehype-highlight';
const options = {
mdxOptions: {
remarkPlugins: [],
rehypePlugins: [rehypeHighlight],
}
}
- 将highlight.js样式下载到
/styles/highlight-js/并导入到您的页面中：
import "@/styles/highlight-js/github-dark.css"
完整说明可在此处找到：https://gaudion.dev/blog/mdx-syntax-highlighting