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

user_10900875 0
Viewed 684

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

next.js reactjs markdown
3 Answers

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.

user_75505920

I think you need to add some css? For example

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

user_138418800

You just need to add the highlight style in your header

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(
    <>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css"></link>
    <MDXRemote {...mdxSource} />
    </>
  )
}

And to enhance your code you can add this style inside the Head element or inside the document file which allows you to inject extra components styles, SEO,... etc. _document.js

import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link
            rel="stylesheet"
            href="https://unpkg.com/dracula-prism/dist/css/dracula-prism.css"
          ></link>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;
user_68357720
Related