Mdx: Add demo for code syntax highlighting

[silvenon]

In #221 there was a great suggestion to add a demo for how to implement syntax highlighting, most probably it will be using @mapbox/rehype-prism. I will add this demo, but first I need to solve the problem outlined in https://github.com/mdx-js/mdx/issues/221#issuecomment-419183553.

[phil-lgr]

yea, good one, something like

Syntax Highlighting

Prismjs

npm i --save prismjs
npm i --save-dev @mapbox/rehype-prism

const rehypePrism = require('@mapbox/rehype-prism');

module.exports = {
    test: /(\.mdx?)$/,
    use: [
        {
            loader: 'babel-loader',
            options: {
                plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-object-rest-spread'],
                presets: ['@babel/preset-react']
            }
        },
        {
            loader: '@mdx-js/loader',
            options: {
                hastPlugins: [rehypePrism]
            }
        }
    ]
};

[silvenon]

@phil-lgr why do we need prismjs?

[phil-lgr]

oh for the default css:

_in a webpack project_

// default prismjs theme
import 'prismjs/themes/prism.css';

[silvenon]

Ah, got it! Maybe prism-themes instead, so it's easier to try on different ones.

[timneutkens]

Just leaving this here for future reference, implementing the plugin using next-mdx:

const rehypePrism = require('@mapbox/rehype-prism');
const withMDX = require('@zeit/next-mdx')({
  extension: /\.(md|mdx)?$/,
  options: {
    hastPlugins: [
      rehypePrism
    ]
  }
})

[elitan]

I'm using @timneutkens's example with NextJS and MDX, and my question is:

How do I add PrismJS plugin dif highlight (or any other plugin) to this setup?