Web/React
Nextjs Prism Syntax highlighting
__bo0o_
2022. 3. 23. 01:56
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;
나중에 써야할 때 잊을 것 같아서 또 포스팅 해둡니다,,
예전에 노션에 써두긴했지만 그래도.. 포스팅 해봅니다
반응형