Next.js 블로그에 코드 Syntax 입히기

현재 기술 스택

• 프레임워크 : Next.js
• 컨텐츠 관리 : ContentLayer + MDX

세팅

1. 패키지 설치

   npm install rehype rehype-pretty-code remark-gfm shiki

2. contentLayer.config 설정

   const rehypeOptions = {
   	theme: 'github-dark-dimmed',
   	keepBackground: true,
   	defaultLang: 'plain text',
   };
   
   export default makeSource({
     contentDirPath: 'posts',
     documentTypes: [Post],
     mdx: {
       remarkPlugins: [remarkGfm],
       rehypePlugins: [[rehypePrettyCode, rehypeOptions]],
     },
   });

   • rehypePrettyCode은 타입 이슈로 as any로 타입 단언

3. 세부 설정 : rehype-pretty-code 참고