Syntax Highlighting

Using the MDXProvider

// src/App.js
import React from 'react'
import { MDXProvider } from '@mdx-js/react'
const components = {
pre: (props) => <div {...props} />,
code: (props) => <pre style={{ color: 'tomato' }} {...props} />,
}
export default (props) => (
<MDXProvider components={components}>
<main {...props}></main>
</MDXProvider>
)

Source -> MDXJS

Syntax Highlighting