Rushing Labs

Syntax Highlighting for MDX

Syntax Highlighting - MDX


Inspiration

This is how someone got this working in Gatsby with MDXProvider and prism-react-renderer. I used a similar idea to pull things together with Next.js and react-syntax-highlighter.

https://malikgabroun.com/blog/syntax-highlighting-in-gatsby-mdx/


Here's how I made use of <SyntaxHighlighter> in the MDX configuration, for rendering blog posts.

Pull in the react-syntax-highlighter package, and dependencies.

import { docco, a11yDark } from 'react-syntax-highlighter/dist/cjs/styles/hljs'
import SyntaxHighlighter from 'react-syntax-highlighter';

A super sneaky error§

Be careful to watch we're pulling in the /cjs/ subdirectory in the react-syntax-highlighter modules. Taken from this GitHub issue.

Trying to pull from the esm module results in a weird "Unexpected token export" error, that seems to originate from some strange typing, or TypeScript transpilation or something.

https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/230#issuecomment-568377353

Wrapper Component§

Make a wrapper component for the highlighting theme.

const MyHighlighter = ({ language, children }) => {
    return (
        <SyntaxHighlighter language={language} style={a11yDark}>
            {children}
        </SyntaxHighlighter>
    );
}

Pass wrapper to MDXRemote§

Now we need to pass the new wrapper component into the components prop so MDXRemote can make it available to our MDX content.

const Post = (props) => {
    return (
        <Layout>
            <article className={postStyles.content}>
                <MDXRemote {...mdx} components={{ Button, Image, CenteredImage, MyHighlighter }} />
            </article>
        </Layout>
    );
}

References§

RushingLabs - Analytics