현재 기술 스택

• 프레임워크 : 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로 타입 단언
   • 위 options은 예시다. theme은 지정하지 않으면 github-dark-dimmed가 기본값이고, 전체 목록은 rehype pretty code 공식문서 참고

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