MDX 코드 블록 스타일링: rehype-pretty-code와 remark-gfm 가이드

npm install next-mdx-remote rehype-pretty-code remark-gfm shiki

import remarkGfm from 'remark-gfm';
import rehypePrettyCode from 'rehype-pretty-code';
 
/** @type {import('rehype-pretty-code').Options} */
const options = {
  theme: 'one-dark-pro', // 다양한 테마 선택 가능 (github-dark, dracula 등)
  keepBackground: true,
};
 
const nextConfig = {
  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
  // MDX 설정
  experimental: {
    mdxRs: true,
  },
};
 
// MDX 구성 함수 (버전에 따라 설정 방식이 다를 수 있음)
export default withMDX({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [remarkGfm], // 표, 리스트 등 확장 문법 지원
    rehypePlugins: [[rehypePrettyCode, options]], // 코드 하이라이팅
  },
})(nextConfig);

// 1번 줄과 3, 4번 줄이 강조됩니다.
const a = 1;
const b = 2;
const c = 3;

export const add = (a: number, b: number) => a + b;

/* 글로벌 CSS 또는 Tailwind 레이어에 추가 */
code[data-theme*=' '] {
  @apply grid min-w-full break-words rounded-none border-l-4 border-l-transparent bg-transparent py-1;
}
 
/* 하이라이트된 라인 스타일 */
div[data-rehype-pretty-code-fragment] span[data-highlighted-line] {
  @apply border-l-blue-500 bg-blue-500/10;
}
 
/* 코드 블록 제목 스타일 */
div[data-rehype-pretty-code-title] {
  @apply mt-4 rounded-t-lg bg-slate-800 px-4 py-2 text-sm font-medium text-slate-200;
}