블로그 제작 시 코드 문을 잘 보이게 하기 위해서 highlight.js라이브러리를 사용하다가 react문에서는 적절하게 표현되지 않아 최종적으로 react-highlight 라이브러리를 적용했다.
react-highlight npm
react-highlight 설치
npm install react-highlight --save
import
import Highlight from 'react-highlight'
스타일 적용
theme-name부분에는 highlight.js에 있는 테마 이름을 넣으면 적용할 수 있다.
<link rel="stylesheet" href="/path/to/styles/theme-name.css">
blockContent.type 이 code일 때 하위 코드가 적용되게 만들었다.
case "code": return ( <pre key={blockContent.id} className="text-xs overflow-x-auto !text-[#4e5156] dark:!text-[#d6deeb] p-5 bg-[#f6f4ef] dark:bg-[#011627] md:text-sm my-4 border border-transparent rounded-lg dark:border-slate-600" > {codeLag === "javascript" ? ( <Highlight className="javascript">{codeTxt}</Highlight> ) : codeLag === "css" ? ( <Highlight className="css">{codeTxt}</Highlight> ) : ( <Highlight className="html">{codeTxt}</Highlight> )} </pre> );