如何使用 next-mdx-remote 使用语法代码突出显示？答案

【问题标题】：How to use syntax code highlighting using next-mdx-remote?如何使用 next-mdx-remote 使用语法代码突出显示？
【发布时间】：2022-06-18 11:02:30
【问题描述】：

我正在尝试在基于 Nextjs 的页面中使用 next-mdx-remote 突出显示我的代码语法。我从graphcms 获取我的降价格式并将其呈现如下：


import { serialize } from "next-mdx-remote/serialize"
import { MDXRemote } from "next-mdx-remote"
import rehypeHighlight from "rehype-highlight"


export async function getStaticProps({ params }: any) {
  const data = await getPostDetail(params?.slug)

  const source = data?.content?.markdown
  const mdxSource = await serialize(source, {
    mdxOptions: { rehypePlugins: [rehypeHighlight] },
  })

  return {
    props: {
      posts: data,
      mdxSource: mdxSource,
    },
  }
}


function Post({mdxSource}){
  return(
    <MDXRemote {...mdxSource} />
  )
}

不幸的是，代码块被渲染成普通的文本字段并且没有做任何事情。

我不确定我在这里遗漏了什么，官方documentation 也没有澄清这一点

【问题讨论】：

标签： reactjs next.js markdown

【解决方案1】：

我认为您需要添加一些 CSS？例如

import "highlight.js/styles/atom-one-dark.css";

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

根据mdx docs，您希望在标题中的某处包含以下链接。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/github-dark.min.css"></link>

如果它不起作用，请告诉我。它至少对我有用。

【讨论】：