How to do syntax highlighting on Next.js markdown blog

Question

I'm using Next.js for my blog and I'm storing my blogs in markdown files and converting those files to string and then into HTML using Greymatter. My code blocks break down into <pre><code class="language-whatever"> and no matter what I do, I can't get syntax highlight to occur.

I've tried adding highlight.js through npm, downloading files from highlight.js and prism, using their cdn's, and nothing is really working.

Is there anybody who has experience setting up syntax highlighting on a markdown blog using Next.js? An example or any advice would be great! Thanks.

Ramble

Code Hike works great with Next.js: codehike.org/docs/installation/nextjs – Proscribe

Answer 1

I figured it out! I used react-syntax-highlighter in combination with react-markdown. I got some code snippets from this blog with how to parse the code snippets and pass then through the syntax highlighter.

Here's my repo, if you want to check out my solution.

I was using marked to convert my markdown to an HTML string which was blocking the highlighting for happening. Once I pulled my markdown content out of marked dependencies and passed in the gray-matter.content to my ReactMarkdown it worked perfectly.

...Well, maybe not perfectly...

There was some weird stuff happening when I was trying to use color themes. I ended up having the pull the theme I wanted out of the node modules and placed it in my root and called it from there and it was perfectly fine. A little hacky, but it works!

Ramble

Answer 2

As you've mentioned in your answer that you're using react-markdown, you don't need react-syntax-highlighter.

It is a package built upon prismjs, then why not use prismjs directly.

This blog syntax-highlighting-next-js contains walkthrough.

Using the parent package is always better than the wrapper package if no special use case is considered (as in yours).

Lys

Answer 3

Here is how I got syntax highlighting working in Next.js https://thetombomb.com/posts/adding-code-snippets-to-static-markdown-in-Next%20js

I was originally using greymatter since I built the app following the Next.js starter app project. I had to move over to using react-markdown with react-syntax-highlighter to get everything working.

Vladimar

Welcome to Stack Overflow! Welcome to Stack Overflow! While your answer may solve the question, including an explanation of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. You can edit your answer to add explanations and give an indication of what limitations and assumptions apply. - From Review – Clynes

Answer 4

If you're using Markdown then you could pivot to MDX (Markdown extended) with this you can enable plugins such as the rehype-highlight plugin which is the same as highlight.js.

With this enabled you can import it & add it to your MDX options and then all you need to do is choose a highlight.js style and import it into your page:

1. Install rehype-highlight: npm install rehype-highlight
2. Add to your mdx options:

import rehypeHighlight from 'rehype-highlight';

const options = {
    mdxOptions: {
        remarkPlugins: [],
        rehypePlugins: [rehypeHighlight],
    }
}

3. Download a highlight.js style into /styles/highlight-js/ and import it into your page:

import "@/styles/highlight-js/github-dark.css"

Full instructions can be found here: https://gaudion.dev/blog/mdx-syntax-highlighting

Holism

Answer 5

    import ReactMarkdown from "react-markdown";
    import { Content } from "mdast";
    // import light build
    import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
    // import only whatever languages you are using. Thaw will dramatically reduce the build size of the page
    import js from "react-syntax-highlighter/dist/cjs/languages/prism/javascript";
    import python from "react-syntax-highlighter/dist/cjs/languages/prism/python";
    // those tags are used when you write ```js  {code here} ```
    SyntaxHighlighter.registerLanguage("js", js);
    SyntaxHighlighter.registerLanguage("py", python);

you define a custom renderer:

 const customRenderers= {
    // modify the code tag 
    code(code) {
    // node since i use ts, this code here might vary in your app
      const { node } = code;
      const { lang, value } = node;
      return (
        <div style={{ fontSize: "1.6rem" }}>
          <SyntaxHighlighter
            style={vscDarkPlus}
            language={lang}
            children={value}
          />
        </div>
      );
    },
  };

after that return this component

    return (
             <article style={{ paddingLeft: "2rem" }}>
                <ReactMarkdown  renderers={customRenderers}>
                  // place whatever you want to render
                  {blog.content} 
                </ReactMarkdown>
              </article>
    )

Jenks