[TIL] Prism.js: code prettier

html과 json을 예쁘게 보여줄 필요가 있어 라이브러리를 찾아보다가 prism.js를 사용해 보게 되었다.

react에서 사용해 보기 위해 prism-react-renderer부터 시작해봤다.

npm install --save prism-react-renderer

<Highlight code={jsonString} theme={themes.oneLight} language="js">
  {({ className, style, tokens, getLineProps, getTokenProps }) => (
    <pre className="mb-5 text-xs font-light text-gray-700">
      {tokens.map((line, i) => (
        <div {...getLineProps({ line, key: i })}>
          {line.map((token, key) => (
            <span {...getTokenProps({ token, key })} />
          ))}
        </div>
      ))}
    </pre>
  )}
</Highlight>

custom theme이 다양하게 있었지만, 오히려 기본 theme이 어울릴 것 같다는 의견에 서드파티가 아닌 Prism.js 공식 사이트에서 제공해준 대로 개발해 보았다.

npm i -D @types/prismjs
npm uninstall prism-react-renderer
npm install prismjs

import Prism from "prismjs";
import 'prismjs/components/prism-json' // Language
import 'prismjs/themes/prism.css' // Theme
...

useEffect(() => {
  Prism.highlightAll()
}, []);

...
<code className="language-html" style={{ backgroundColor: "transparent" }}>{ html }</code>

오히려 사용은 더 간단해진 듯 했다. html을 더 쉽게 렌더링해 주었다.

그러고 보니 default theme은 notion에 적용된 것과 비슷한 것 같다!