Rushing Labs

Syntax Highlighting for MDX

Syntax Highlighting - MDX


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.

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.

Wrapper Component§

Make a wrapper component for the highlighting theme.

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

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 (
            <article className={postStyles.content}>
                <MDXRemote {...mdx} components={{ Button, Image, CenteredImage, MyHighlighter }} />


RushingLabs - Analytics