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;
나중에 써야할 때 잊을 것 같아서 또 포스팅 해둡니다,,
예전에 노션에 써두긴했지만 그래도.. 포스팅 해봅니다
'Web > React' 카테고리의 다른 글
React 중복 체크 (0) | 2022.11.05 |
---|---|
Next.js 절대경로 설정 (0) | 2022.02.25 |
Next.js 고정 스타일링, styled-components 설치 및 사용법 (2) | 2022.02.05 |
Next.js styled-jsx 사용법 (0) | 2022.01.28 |
eject (0) | 2021.11.23 |