[Next.js] 코드 하이라이트. prism.js

서론

[마크다운 불려오기 fetch]
[마크다운 파싱 markdown-to-jsx]
[마크다운 디자인 typography]

전편에서는
tailwind에 공식문에 있는 plugin,
Typography를 사용해서
<Markdown>컴포넌트의 기본 디자인을 만들었다.

하지만 <pre> 태그의 <code> 안 텍스트가
강조되지 않아서 코드를 가독성이 떨어진다.

Prism.js

Prism.js은
문법 강조( syntax highlighter )를 해준다.
[Prism.js 공식 사이트]

Prism.js 외에도 다른 highlighter가 많다.
Prism.js를 사용한 이유는 그저
내가 찾은 것 중에서 사용자가 많고 가벼웠다.

Prism.js 설치

테미널에서 npm을 사용해서 설치한다.

npm install prismjs

PrismLoader 컴포넌트

원래 공식문의 사용법으로는
모든 강조가 필요한 텍스트에 적용해야 한다.

사용법을 검색해보니
간단한 사용법이 있다.

Prism 컴포넌트를 만들고
필요한 페이지에서 컴포넌트를 사용만하면
해당 페이지의 class명이 prism과 같으면
전부 하이라이트를 적용해준다.

// .\app\components\PrismLoader.js

"use client";
import { useEffect } from "react";

import Prism from "prismjs";
import "prismjs/themes/prism-okaidia.css";

export default function PrismLoader() {
  useEffect(() => {
    Prism.highlightAll();
  }, []);
  return <div className="hidden" />;
}

우선
설치한 prismjs을 가져온다.
강조 테마의 css도 가져온다.
강조 테마는 공식사이트에서 확인하고 선택할 수 있다.

강조를 적용하기 위해서
useEffect으로
Prism.highlightAll()을 실행했다.
return은 비어있는 <div>에 hidden처리를 했다.

이제 이 컴포넌트를 blog 페이지에 아무 위치애 사용하면 된다.

// .\app\blog\[slug]\page.js

import Markdown from "markdown-to-jsx";
import PrismLoader from "../../../components/PrismLoader";

export default async function Post(props) {
  const slug = props.params.slug;
  const postRes = await fetch(`http://localhost:3000/${slug}.md`);
  const data = await test.text();
  const options = {...};
  const mdClass = "prose prose-stone ... "

  return (
    <>
      <PrismLoader />
      <Markdown className={mdClass} options={options}>{data}</Markdown>;
    </>
  )
}

markdown 코드 언어 지정하기

테스트를 하기 위해
markdown에 코드를 만들어봤다.

그냥 ```을 사용하면
강조가 되지 않는다.

```js
const num = 1;
```

위에 처럼 ``` 옆에 언어 이름을 적는다.

jsx 강조하기

```jsx으로
언어를 jsx로 지정해도 강조되지 않는다.
jsx를 사용하겠다고 선언하지 않아서이다.

기본으로 html css javascript는 자동으로 강조하지만 다른 언어는 가져오기를 해야한다.

// .\app\components\PrismLoader.js

"use client";
import { useEffect } from "react";

import Prism from "prismjs";
import "prismjs/components/prism-jsx";
import "prismjs/components/prism-bash";
import "prismjs/components/prism-git";
import "prismjs/components/prism-markdown";
import "prismjs/themes/prism-okaidia.css";

export default function PrismLoader() {
  useEffect(() => {
    Prism.highlightAll();
  }, []);
  return <div className="hidden" />;
}

결론

• Prism.js 사용
• npm으로 설치
• PrismLoader 컴포넌트 작성. 클라이언트 사용
• useEffect 사용 Prism.highlightAll() 실행
• 필요한 언어 추가 import
• 사용하는 페이지에서 PrismLoader 사용

이렇게 해서 텍스트의
기본 코드와 jsx 등 언어를 강조했다.