How to use syntax code highlighting using next-mdx-remote?

Question

I'm trying to highlight my code syntax using next-mdx-remote in my Nextjs based page. I'm getting my markdown format from graphcms and rendering it like this :

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} />
  )
}

Unfortunately, the code blocks gets rendered like normal text fields and doesn't do anything.

I'm not sure what I'm missing here, the official documentation doesn't clarify this as well

Answer 1

I think you need to add some css? For example

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