/
gatsby-browser.js
49 lines (44 loc) · 1.57 KB
/
gatsby-browser.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
import './src/css/index.css'
import React from 'react'
import { MDXProvider } from '@mdx-js/react'
import theme from 'prism-react-renderer/themes/vsDark'
import Highlight, { defaultProps } from 'prism-react-renderer'
const components = {
pre: (props) => {
const className = props.children.props.className || ''
const matches = className.match(/language-(?<lang>.*)/)
return (
<Highlight
{...defaultProps}
code={props.children.props.children.trim()}
language={
matches && matches.groups && matches.groups.lang
? matches.groups.lang
: ''
}
theme={theme}
>
{({
className,
style,
tokens,
getLineProps,
getTokenProps,
}) => (
<pre className={`${className} p-4 rounded`} style={style}>
{tokens.map((line, i) => (
<div {...getLineProps({ line, key: i })}>
{line.map((token, key) => (
<span {...getTokenProps({ token, key })} />
))}
</div>
))}
</pre>
)}
</Highlight>
)
},
}
export const wrapRootElement = ({ element }) => {
return <MDXProvider components={components}>{element}</MDXProvider>
}