프로젝트에서 코드 블럭 하이라이트 문제 해결하기: react-syntax-highlighter 사용법
·
프로젝트/Componique: UI 컴포넌트 라이브러리
코드를 작성하다 보면, 코드 블록을 하이라이트해서 가독성을 높이는 것이 중요합니다. 특히 기술 블로그나 문서 작성에서 코드를 더 잘 보여주기 위해 코드 하이라이트 기능을 자주 사용하죠. 이번 프로젝트에서도 MDX 파일에서 코드 블록을 잘 보여주기 위해 하이라이트 문제를 해결한 경험을 공유하려고 합니다.문제: MDX 파일에서 코드 블록 하이라이트가 제대로 되지 않음처음에는 MDX 파일에서 코드 블록을 작성했지만, 코드의 가독성이 떨어졌습니다. 코드 블록에 하이라이트가 제대로 적용되지 않았기 때문에, 이를 해결하기 위해 라이브러리를 찾아보게 되었습니다.더보기✅MDX 파일이란?MDX는 Markdown과 JSX를 결합한 포맷입니다. Markdown은 간결하게 글을 작성할 수 있는 언어로, 주로 블로그나 문서 작..