코드 블록 하이라이팅 테마 추가하기

기본적으로, Astro는 마크다운 코드 블록에 대한 구문 강조를 제공합니다. 이를 활용하기 위해서는 일반적으로 Shiki나 Prism을 사용할 수 있지만, Astro Docs는 Shiki를 사용하는 예제를 제공합니다.

Shiki는 VSCode의 테마를 사용할 수 있기 때문에, Shiki를 사용하는 것이 더 편리합니다. 코드 블록 하이라이팅 테마 추가하는 방법을 배워봅시다!

---

하이라이팅 테마 찾기

먼저, 여기에서 사용하고자 하는 테마의 이름을 찾아 복사합니다. (저는 min-light를 사용합니다.)

astro.config.mjs 파일 수정하기

다음으로, astro.config.mjs 파일에 다음 내용을 추가합니다.

//...
import tailwind from '@astrojs/tailwind';

export default defineConfig({
  //...
  integrations: [
    tailwind()
  ],
  markdown: {
    shikiConfig: {
      theme: 'min-light', // 이곳이 중요합니다!
      langs: [],
      wrap: true
    }
  }
})

---

이제 프로젝트를 만들어봅시다!

위의 설정을 통해, 다음과 같은 코드 블록 하이라이팅을 확인할 수 있습니다!

이제까지, Astro에서 코드 블록 하이라이팅을 하는 방법을 배워봤습니다.

다음에 봐요!