react-highlight

블로그 제작 시 코드 문을 잘 보이게 하기 위해서 highlight.js라이브러리를 사용하다가 react문에서는 적절하게 표현되지 않아 최종적으로 react-highlight 라이브러리를 적용했다.

 

react-highlight npm

react-highlight

 

react-highlight 설치

npm install react-highlight --save

 

import

import Highlight from 'react-highlight'

 

 

스타일 적용

theme-name부분에는 highlight.js에 있는 테마 이름을 넣으면 적용할 수 있다.

Demo - highlight.js

<link rel="stylesheet" href="/path/to/styles/theme-name.css">

 

blockContent.type 이 code일 때 하위 코드가 적용되게 만들었다.

• <Highlight className="코드에 보여질 언어"> : className에 보여줄 언어를 넣으면 된다.

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>
   );