🎨

[Gatsby] mdx 코드에 스타일 입히기


Syntax highlighting - 코드에 스타일 입히기

마크다운 불러오는 플러그인을 gatsby-plugin-mdx로 변경하면서 마크다운이 생얼이 됐다. 폰트를 적용하니 오히려 스타일 없는게 더 맘에 들어서 생으로 쓰고 있었는데, 코드는 생얼이면 참 못생겨서 참을 수가 없었다. 가독성도 떨어지고. 그래서 공식 문서를 뒤져보니 prism-react-renderer를 추천해서 썼다!

그래서 어떻게 하는데?

일단 prism-react-renderer 패키지를 받자.

1npm install prism-react-renderer

그리고 공식 문서에 있는 CodeBlock 컴포넌트를 고대로 가져온다.

1import React from 'react'
2import Highlight, {defaultProps} from 'prism-react-renderer'
3
4export default ({children, className}) => {
5 const language = className.replace(/language-/, '')
6
7 return (
8 <Highlight {...defaultProps} code={children} language={language}>
9 {({className, style, tokens, getLineProps, getTokenProps}) => (
10 <pre className={className} style={{...style, padding: '20px'}}>
11 {tokens.map((line, i) => (
12 <div key={i} {...getLineProps({line, key: i})}>
13 {line.map((token, key) => (
14 <span key={key} {...getTokenProps({token, key})} />
15 ))}
16 </div>
17 ))}
18 </pre>
19 )}
20 </Highlight>
21 )
22}

그리고 스타일을 적용하고 싶은 곳에 @mdx-js/reactMDXProvider 컴포넌트에 components prop으로 넘겨주면 끝이다.

1import { MDXProvider } from "@mdx-js/react"
2import CodeBlock from "../components/CodeBlock";
3...
4
5const components = { //코드 스타일링
6 code: CodeBlock,
7};
8
9const PostTemplate = () => {
10 ...
11 <MDXProvider components={components}>
12 //Syntax Highlight 적용될 부분
13 </MDXProvider>
14 ...
15}

추가적으로 prism-react-renderer에서 기본적으로 제공하는 테마를 사용하려면, 원하는 테마를 import한 후 CodeBlockHighlighttheme이라는 prop으로 넘겨주면 된다.


참조: MDX