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:

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

<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

-- end of line --