MDX 블로그 코드블록에 라이트·다크 두 테마를 한 번에 — rehype-pretty-code

이 블로그는 정적 사이트라서 코드블록 하이라이팅을 런타임이 아니라 빌드 타임에 처리해요. 그렇게 하면 방문자 쪽에서 색을 입히는 JavaScript를 돌릴 필요가 없어요. 여기에 라이트·다크 두 테마를 같이 넣는 게 이번 주제예요.

빌드 타임 하이라이팅

rehype-pretty-code는 Shiki를 기반으로 동작하는 rehype 플러그인이에요. MDX를 HTML로 바꾸는 과정에서 코드에 색 정보를 미리 입혀둬요. 결과물은 색이 입혀진 정적 HTML이라, 브라우저에서 추가 연산이 없어요.

두 테마를 동시에

theme 옵션에 라이트·다크 테마를 객체로 넘기면, 두 테마의 색을 CSS 변수 형태로 함께 출력해요.

const options = {
  theme: {
    light: 'github-light',
    dark: 'github-dark',
  },
}

이렇게 하면 각 토큰에 라이트용 색과 다크용 색이 둘 다 들어가요. 그래서 테마를 바꿀 때 코드블록을 다시 칠하지 않아도 돼요.

CSS에서 전환

남은 일은 다크 모드일 때 다크 색 변수를 쓰도록 CSS에서 연결하는 거예요.

html[data-theme='dark'] code span {
  color: var(--shiki-dark);
  background-color: var(--shiki-dark-bg);
}

테마 토글이 data-theme 값만 바꾸면, 코드블록 색은 CSS 변수만 따라 바뀌어요. 자바스크립트로 색을 다시 계산하는 단계가 없어서 깜빡임도 줄어요.

작은 마무리

코드블록에 파일명을 보여주고 싶을 때는 펜스에 title 속성을 붙이면 돼요. 위 예시의 title="..." 처럼요. 사소하지만 어떤 파일 이야기인지 알려주면 읽는 분이 맥락을 덜 잃어요.

비슷한 정적 블로그를 만든다면 이 구성이 출발점으로 괜찮을 거예요.