prism-react-renderer를 사용하여 Gatsby MDX에 줄 번호로 구문 강조 표시 추가

이 문서에서는 prism-react-renderer 가 있는 Gatsby MDX 파일의 줄 번호로 코드 강조 표시를 활성화하는 방법에 대한 단계를 살펴보겠습니다.

MDX를 프로젝트에 아직 통합하지 않은 경우(MDX가 훌륭하기 때문에 통합해야 함) Gatsby 설명서official guide에서 프로젝트에 추가할 수 있습니다. 그러나 프로젝트에서 이미 Markdown Remark를 사용하고 있다면 고려하십시오. 이 게시물에서는 PrismJS 구문 강조를 prism-react-renderer 을 사용하여 MDX와 통합할 것입니다. 또한 코드 블록에 줄 번호를 추가할 것입니다. 이것이 우리가 목표로 하는 것입니다:

1단계: prism-react-renderer 패키지 설치

시작하려면 PrismJS를 React 구성 요소로 래핑하는 prism-react-renderer 를 설치해야 합니다.

npm install prism-react-renderer

.mdx 파일에 분리 코드 블록을 추가하면 gatsby-plugin-mdx가 코드를 <pre> 요소로 래핑하고 프로그래밍 언어를 나타내는 클래스 이름을 추가합니다. prism-react-renderer는 이를 사용하여 언어를 식별하고 코드 블록을 강조 표시합니다.

2단계: CodeBlock 구성 요소 생성

코드 블록에 줄 번호(선택 사항)가 있는 코드 강조 표시를 추가하는 React 구성 요소를 만들어 봅시다. 먼저 CodeBlock.jsx에 파일src/components/을 생성한 후 다음 내용을 추가합니다.

// CodeBlock.jsx
import React from 'react'
import Highlight, { defaultProps } from 'prism-react-renderer'
import theme from 'prism-react-renderer/themes/vsDark'

export default function CodeBlock(props) {
  const className = props.children.props.className || ''
  const matches = className.match(/language-(?<lang>.*)/)
  const showLineNumbers = props.children.props.lineNumbers
  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} style={{ ...style, padding: '20px' }}>
          {tokens.map((line, i) => (
            <div key={i} {...getLineProps({ line, key: i })}>
              {showLineNumbers && <span className='line-number'>{i + 1}</span>}
              {line.map((token, key) => (
                <span key={key} {...getTokenProps({ token, key })} />
              ))}
            </div>
          ))}
        </pre>
      )}
    </Highlight>
  )
}

이 구성 요소는 코드 블록을 강조 표시합니다. 선택적으로 lineNumbers 파일의 코드 블록에 메타 문자열.mdx을 전달하여 줄 번호를 추가할 수 있습니다. 다른 테마를 원하면 theme 가져오기를 원하는 대로 사용 가능한 theme으로 변경하십시오.

3단계: <MDXProvider>에 CodeBlock 구성 요소 추가

<MDXRenderer> 구성 요소(제 경우에는 내 블로그 게시물을 렌더링하는 src/templates/blog-post.js)를 사용하는 파일로 이동하여 <MDXProvider> 구성 요소로 래핑합니다. 그런 다음 CodeBlock 구성 요소를 components 개체에 추가하고 이를 <MDXProvider> 구성 요소에 전달합니다.

// blog-post.js
// ...
import { MDXProvider } from '@mdx-js/react'
import CodeBlock from '/src/components/CodeBlock.jsx'

const components = {
  pre: CodeBlock,
}

const BlogPostTemplate = ({ data, location }) => {
  const post = data.mdx
  //...

  return (
    //...
    <MDXProvider components={components}>
      <MDXRenderer>{post.body}</MDXRenderer>
    </MDXProvider>
    //...
  )
}

export default BlogPostTemplate

4단계: 줄 번호 스타일 지정

줄 번호를 올바르게 렌더링하기 위해 일부 스타일을 추가합니다. style.css 폴더에 파일src을 만들고 다음 CSS 스타일을 추가합니다. 전역 CSS 파일이 이미 있는 경우 다음 스타일을 추가합니다.

/* style.css */

.line-number {
  text-align: right;
  padding-right: 1em;
  user-select: none;
  opacity: 0.5;
}

이제 gatsby-browser.js 파일에서 방금 만든 파일을 가져옵니다.

// gatsby-browser.js

// custom CSS styles
import './src/style.css'

5단계: .mdx 파일에 코드 추가

코드 강조 표시를 테스트하려면 .mdx 파일 중 하나를 열고 일부 코드를 추가하십시오. 줄 번호를 지정하려면 언어 선언 뒤에 메타 문자열lineNumbers을 전달하면 됩니다. 참고: 공간이 중요합니다.

```javascript lineNumbers
function add(num1, num2) {
  const result = num1 + num2
  return result
}

console.log(add(1, 2))
```

And that's it! Save your files, run gatsby develop, and go to the pages created from .mdx files to see your code blocks highlighted and optionally numbered. If something went wrong, let's put on the debugging glasses and get to work.

---

디버깅 오류

Here're some errors that popped up when I was integrating prism-react-renderer with MDX.

props.children.props.children.trim은 함수가 아닙니다.

My blog previously used gatsby-remark-prismjs to highlight code blocks, which conflicted with prism-react-renderer. So I uninstalled it and removed it from the plugins array in gatsby-config.js.