Nextjs Prism Syntax highlighting

1. Code highlighter Library

Highlight.js

Syntaxhighlighter

Rainbow

Prismjs 등

 

2. Prismjs 설치

npm install Prismjs

 

3. 사용법

// _app.tsx에 추가
import "prismjs/themes/prism-tomorrow.css";

...

import Prism from 'prismjs';
import { useEffect } from 'react';

const code = `
Lorem Ipsum is simply dummy text ... <div>Example</div> ... \
printing and typesetting industry. Lorem Ipsum is simply dummy \
printing and typesetting industry.
`.trim();

const listgroup = () => {
  
  useEffect(() => {
    Prism.highlightAll();
  }, []);
  
  return (
  	<>
    	...
        <TemplateCode>
        	<code className="language-html">{code}</code>
            또는
            <code>
            {`
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
    Lorem Ipsum has ... <p>Example</p> ... 코드 내용 넣기
  </div>`}
            </code>
        </TemplateCode>
   	</>
  );
};
 
export default listgroup;

나중에 써야할 때 잊을 것 같아서 또 포스팅 해둡니다,,

예전에 노션에 써두긴했지만 그래도.. 포스팅 해봅니다

 

https://frendly.dev/posts/using-prism-js-in-next-js