Mdx: How to work with remark-highlight.js?

[egoist]

Trying to use remark-highlight.js:

{
    mdPlugins: [
        require('remark-highlight.js')
    ]
}

But what I got is:

[timneutkens]

@johno this is actually a bug in mdx's wrapping of code tags.

[trevordmiller]

For anyone else who stumbles on this in the future trying to add syntax highlighting to MDX, here are the steps + diffs it required for me:

• Step 1: Add markdown code syntax highlighting compiling. Since MDX uses remark, this adds the most popular syntax highlighting plugin (remark-highlight.js). Note that this actually uses lowlight under the hood. Also note that this only breaks up markdown code block syntax groups into separate elements with highlight.js/lowlight classnames, it doesn't actually color anything.
• Step 2: Add CSS for the element syntax groups. This styles the elements from step 1. Note that the remark-highlight.js parsing isn't that great so most code will only be partially colored (a good amount of the code I have tried isn't wrapped in any semantic syntax groups in the output so it inherits the base CSS color). In my diff I added my own custom theme, but it looks like you could use any from highlight.js: https://github.com/isagalaev/highlight.js/tree/master/src/styles.

[Cherdinand]

@trevordmiller thank you guys! it works

[mattdamon108]

@trevordmiller Great helps! It helps me a lot.

[wooorm]

Hey folks! tip: use hastPlugins with rehype-highlight (lowlight) or @mapbox/rehype-prism (refractor) instead!

There are some slight differences and I’d suggest using the rehype versions above remark versions!