코드 하이라이팅은 Astro에 이미 들어 있다

기술 글에서 코드블록은 절반이다. 색이 없으면 읽기 힘들다. 다행히 Astro는 Shiki를 기본으로 품고 있어서, 별도 플러그인 없이 마크다운 코드펜스가 바로 하이라이팅된다.

설정은 테마 한 줄

astro.config.mjs에서 테마만 고르면 끝이다. 이 블로그는 종이 같은 밝은 배경에 어울리도록 밝은 테마를 썼다.

// astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
  markdown: {
    shikiConfig: {
      theme: 'github-light',
      wrap: false,
    },
  },
});

Shiki는 빌드 타임에 동작한다. 브라우저로 하이라이팅용 자바스크립트를 내려보내지 않는다. 결과 HTML에는 색이 인라인 스타일로 이미 박혀 있어서, 자바스크립트가 꺼져 있어도 색이 그대로 보인다. 정적 블로그에 잘 맞는 방식이다.

언어별로 보기

언어는 코드펜스에 이름만 붙이면 인식한다.

type Post = {
  title: string;
  pubDate: Date;
  draft?: boolean;
};

function isPublished(post: Post): boolean {
  return post.draft !== true && post.pubDate.getTime() <= Date.now();
}

.prose pre {
  padding: 1rem;
  border: 1px solid var(--color-rule);
  overflow-x: auto;
}

npm run build      # dist/ 에 정적 파일 생성
npm run preview    # 빌드 결과를 로컬에서 확인

인라인 코드

문장 안에서 npm run dev 처럼 감싼 짧은 코드는 하이라이팅 없이 단색으로 둔다. 색을 아끼는 편이 문장 흐름을 덜 끊는다. 코드블록은 넓어지면 가로로 스크롤되게 해서 좁은 화면에서도 본문이 밀리지 않는다.

색을 입히는 데 들인 노력은 0에 가깝다. 이미 있는 걸 켰을 뿐이다.