Rehype Pretty Code

rehypoe-pretty-code는 shiki syntax에 의해 동작하는 Rehype 플러그인이다. 이 플러그인은 MD나 MDX를 위해 아름다은 코드 블록을 제공한다. 서버에서 빌드할 때와, 클라이언트에서 동적으로 또한 하이라이팅을 제공한다.

에디터 단계의 하이라이팅

VS Code의 Syntax하이라이팅 엔진과 이것의 유명한 테마 생태계를 즐기세요. 어떠한 vS Code 테마도 제공합니다.

설치

• npm install rehype-pretty-code shiki
• next.config 예시 (with @next/mdx)

사용법

서버와 클라이언트에서 모두 아래와 같이 동작합니다.

import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import rehypeStringify from "rehype-stringify";
import rehypePrettyCode from "rehype-pretty-code";
 
async function main() {
  const file = await unified()
    .use(remarkParse)
    .use(remarkRehype)
    .use(rehypePrettyCode, {
      // See Options section below.
    })
    .use(rehypeStringify)
    .process("`const numbers = [1, 2, 3]{:js}`");
 
  console.log(String(file));
}
 
main();

unified v11이 의존성으로 설치되어 있어야 합니다.

• MDX

  아래는 Next.js에서 사용하는 예시입니다.

  import fs from "node:fs";
  import nextMDX from "@next/mdx";
  import rehypePrettyCode from "rehype-pretty-code";
   
  /** @type {import('rehype-pretty-code').Options} */
  const options = {
    // See Options section below.
  };
   
  const withMDX = nextMDX({
    extension: /\.mdx?$/,
    options: {
      remarkPlugins: [],
      rehypePlugins: [[rehypePrettyCode, options]],
    },
  });
   
  /** @type {import('next').NextConfig} */
  const nextConfig = { reactStrictMode: true };
   
  export default withMDX(nextConfig);
  

스타일링

라이브러리는 스타일되어 있지 않습니다. 즉, 기본적으로 적용하는 css파일을 제공하지 않습니다. 대신, 당신은 직접 스타일을 적용할 수 있습니다.

예를 들어, 아래 CSS는 overflow와 padding을 제거합니다.

pre {
  overflow-x: auto;
  padding: 1rem 0;
}
 
pre [data-line] {
  padding: 0 1rem;
}

옵션