Note: This site is currently "Under construction". I'm migrating to a new version of my site building software. Lots of things are in a state of disrepair as a result (for example, footnote links aren't working). It's all part of the process of building in public. Most things should still be readable though.

Add line-numbers to pre tags with next-mdx-remote

### NOTE - This may not be the best way to do this

I'm having problems with line highlighting with errors like:

Code

Warning: Prop `className` did not match. Server: "line-numbers language-jsx" Client: "line-numbers"

I'm now looking at this:

https://github.com/FormidableLabs/prism-react-renderer

This is how I got line numbers working with Prism

Code

<MDXRemote
    {...source}
    components={{
        pre: (props) => (
            <pre className="line-numbers">{props.children}</pre>
        ),
    }}
/>

This adds the className to all the pre tags. That's fine in this case. Just something to be aware of.

According to this, there's no way to send extra data down in a code fence besides the language. If you want to do more, you'll need to make a new component

Reference: next-mdx-remote