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

According to mdx docs you want to include the below link somewhere in your header.

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

let me know if it doesn't work. it works for me at the least.

Answer 2

I think you need to add some css? For example

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