프로젝트에서 코드 블럭 하이라이트 문제 해결하기: react-syntax-highlighter 사용법

코드를 작성하다 보면, 코드 블록을 하이라이트해서 가독성을 높이는 것이 중요합니다. 특히 기술 블로그나 문서 작성에서 코드를 더 잘 보여주기 위해 코드 하이라이트 기능을 자주 사용하죠. 이번 프로젝트에서도 MDX 파일에서 코드 블록을 잘 보여주기 위해 하이라이트 문제를 해결한 경험을 공유하려고 합니다.

---

문제: MDX 파일에서 코드 블록 하이라이트가 제대로 되지 않음

처음에는 MDX 파일에서 코드 블록을 작성했지만, 코드의 가독성이 떨어졌습니다. 코드 블록에 하이라이트가 제대로 적용되지 않았기 때문에, 이를 해결하기 위해 라이브러리를 찾아보게 되었습니다.

✅MDX 파일이란?

MDX는 Markdown과 JSX를 결합한 포맷입니다. Markdown은 간결하게 글을 작성할 수 있는 언어로, 주로 블로그나 문서 작성에 많이 사용됩니다. 한편, JSX는 React 컴포넌트를 작성하는 데 사용하는 문법입니다. MDX 파일은 Markdown 문법과 JSX를 함께 사용할 수 있어, 정적인 글 작성과 동적인 컴포넌트 렌더링을 동시에 구현할 수 있게 해줍니다.

가독성이 매우 떨어지고 꼻보기 싫게 생김.

---

=> 해결책: react-syntax-highlighter 라이브러리

제가 찾은 해결 방법은 react-syntax-highlighter라는 라이브러리를 사용하는 것이었습니다. 이 라이브러리는 다양한 프로그래밍 언어를 지원하고, 코드 블록을 예쁘게 하이라이트해주는 기능을 제공합니다.

---

설치 방법

npm 또는 yarn을 사용해 간단히 설치할 수 있습니다.

npm install react-syntax-highlighter

yarn add react-syntax-highlighter

설치 후, MDX 파일이나 JSX 파일에서 이 라이브러리를 사용할 수 있습니다.

 

사용 예시:

먼저, react-syntax-highlighter에서 제공하는 Prism 스타일을 가져와야 합니다.

import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { prism } from 'react-syntax-highlighter/dist/esm/styles/prism';

<SyntaxHighlighter language="javascript" style={coy}>
{`
function hello() {
  console.log("Hello, world!");
}
`}
</SyntaxHighlighter>

더 많은 테마는 다음 링크에서 확인하실 수 있습니다.

React Syntax Highlighter Demo (react-syntax-highlighter.github.io)

React Syntax Highlighter Demo

 

테마를 변경하는 것은 매우 간단합니다. 위에서 사용한 prism 대신 다른 테마를 불러오기만 하면 됩니다.
즉 이름만 변경하면 원하는대로 하이라이트를 커스터마이징할 수 있습니다.