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

Question

我试图next-mdx-remote在基于 Nextjs 的页面中突出显示我的代码语法。我正在获取我的降价格式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} />
  )
}

不幸的是，代码块像普通文本字段一样呈现，并且不执行任何操作。

我不确定我在这里缺少什么，官方文档也没有澄清这一点

Answer 1

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

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