코드 하이라이터 라이브러리, 뭘 써야 할까?

들어가며

블로그에 코드 블록을 넣을 때마다 고민했습니다. “지금 쓰는 하이라이터, 정말 최선일까?”

코드 하이라이터는 개발 블로그나 기술 문서에서 필수적인 요소입니다. 하지만 선택지가 생각보다 많고, 각각의 특성도 꽤 다릅니다.

저는 최근 이 블로그의 코드 하이라이터를 Prism.js에서 Shiki로 변경했습니다. SSG 환경과 정말 궁합이 잘 맞더라고요. 이 과정에서 각 라이브러리의 장단점을 정리해볼 필요를 느꼈습니다.

이번 글에서는 실무에서 자주 사용되는 3가지 하이라이터를 비교하고, 어떤 상황에서 어떤 라이브러리를 선택하면 좋을지 정리해봤습니다.

선택 기준부터 정하기

본격적으로 라이브러리를 소개하기 전에, 코드 하이라이터를 선택할 때 무엇을 봐야 할까요?

제가 생각하는 우선순위는 이렇습니다:

1. 번들 크기: 블로그는 초기 로딩 속도가 중요합니다.
2. 테마 다양성: VS Code 테마를 그대로 쓸 수 있으면 금상첨화.
3. 언어 지원: 주로 쓰는 언어가 잘 지원되는가?
4. SSR/SSG 호환성: 빌드 타임에 하이라이팅하면 더 빠릅니다.
5. 사용 편의성: 설정이 복잡하면 유지보수가 힘듭니다.
6. 라인 하이라이팅: 특정 라인 강조 기능이 있으면 좋습니다.

"모든 언어를 지원한다"는 건 큰 장점이 아닐 수 있습니다. 실무에서는 JS/TS/Python 정도만 잘 지원되면 충분하니까요. 오히려 테마를 내 마음대로 커스터마이징할 수 있는 게 더 중요합니다.

1. Prism.js - 가볍고 유연한 클래식

GitHub Stars: 12k+ | 라이선스: MIT | 번들 크기: ~2KB (core)

npm install prismjs
# Vue.js용
npm install markdown-it-prism

특징

Prism.js는 가장 오래되고 검증된 하이라이터입니다. 저도 최근까지 이 블로그에서 사용했었어요.

강점:

• 번들 크기가 정말 작습니다. 필요한 언어만 import하면 2-5KB 정도.
• 플러그인 생태계가 탄탄합니다. (라인 번호, 라인 하이라이팅, 복사 버튼 등)
• CSS로 테마를 완전히 커스터마이징할 수 있습니다.
• 클라이언트 사이드에서도 서버 사이드에서도 잘 작동합니다.
• markdown-it과의 통합이 쉽습니다.

약점:

• 테마가 직접 작성해야 하는 CSS 기반입니다. (VS Code 테마를 바로 쓸 수 없음)
• 언어 정의가 다른 라이브러리보다 덜 정교합니다.
• 새로운 언어 추가가 느립니다.

사용 예시

// markdown-it과 함께 사용
import MarkdownIt from 'markdown-it'
import Prism from 'markdown-it-prism'

const md = new MarkdownIt()
md.use(Prism, {
  // 필요한 언어만 로드
  plugins: ['line-numbers', 'show-language']
})

const html = md.render('```js\nconst hello = "world"\n```')

<!-- 테마 CSS 포함 -->
<link href="prismjs/themes/prism-tomorrow.css" rel="stylesheet" />

정말 간단합니다. CSS를 import하고 마크다운을 렌더링하면 끝.

언제 쓰면 좋을까?

• 번들 크기가 최우선일 때
• CSS로 테마를 직접 만들고 싶을 때
• 마크다운 기반 블로그 (SSG/SSR)
• 오래 검증된 솔루션이 필요할 때

2. Highlight.js - 자동 감지의 강자

GitHub Stars: 23k+ | 라이선스: BSD-3-Clause | 번들 크기: ~7KB (core)

npm install highlight.js

특징

Highlight.js는 가장 인기 있는 하이라이터입니다. Stack Overflow도 이걸 씁니다.

강점:

• 언어 자동 감지 기능이 뛰어납니다.
• 195개 이상의 언어를 지원합니다.
• 테마가 90개 이상 내장되어 있습니다.
• 사용법이 정말 간단합니다.
• 커뮤니티가 가장 큽니다.

약점:

• 번들 크기가 Prism보다 큽니다. (전체 언어 포함 시 500KB+)
• 테마 커스터마이징이 상대적으로 어렵습니다.
• 자동 감지가 때로 부정확할 수 있습니다.

사용 예시

import hljs from 'highlight.js/lib/core'
import javascript from 'highlight.js/lib/languages/javascript'
import 'highlight.js/styles/github-dark.css'

// 필요한 언어만 등록
hljs.registerLanguage('javascript', javascript)

// 자동 하이라이팅
document.querySelectorAll('pre code').forEach((block) => {
  hljs.highlightElement(block)
})

<!-- 또는 자동 감지 -->
<pre><code class="language-javascript">
const hello = "world"
</code></pre>

언어를 명시하지 않아도 자동으로 감지해줍니다. 이게 가장 큰 차별점이에요.

언제 쓰면 좋을까?

• 다양한 언어를 사용하는 문서 사이트
• 언어 자동 감지가 필요할 때
• 내장 테마로 충분할 때
• 커뮤니티 규모가 중요할 때

3. Shiki - VS Code 테마 그대로

GitHub Stars: 9k+ | 라이선스: MIT | 번들 크기: ~1.8MB (언어 + 테마 포함)

npm install shiki

특징

Shiki는 VS Code의 텍스트메이트 문법과 테마를 그대로 사용하는 하이라이터입니다. 비교적 최근에 나왔지만 빠르게 인기를 얻고 있습니다.

강점:

• VS Code 테마를 그대로 사용할 수 있습니다. (Dracula, Nord, Material 등)
• 언어 하이라이팅이 VS Code와 100% 동일합니다.
• SSG에 최적화되어 있습니다. (빌드 타임 하이라이팅)
• 정말 아름답습니다. 가독성이 최고입니다.
• TypeScript로 작성되어 타입 지원이 완벽합니다.

약점:

• 번들 크기가 큽니다. (1.8MB, 하지만 SSG라면 문제없음)
• 클라이언트 사이드 실행이 무겁습니다.
• 동적 코드 하이라이팅에는 부적합합니다.
• 설정이 상대적으로 복잡합니다.

사용 예시

import { getHighlighter } from 'shiki'

// 빌드 타임에 실행
const highlighter = await getHighlighter({
  theme: 'nord',
  langs: ['javascript', 'typescript', 'vue']
})

const html = highlighter.codeToHtml(code, {
  lang: 'javascript',
  theme: 'nord'
})

// VitePress/Nuxt Content 등에서 기본 제공
export default {
  markdown: {
    shikiConfig: {
      theme: 'dracula',
      langs: ['js', 'ts', 'vue']
    }
  }
}

Shiki는 빌드 타임에 HTML을 생성합니다. 그래서 브라우저에서는 CSS만 로드하면 되는 거죠.

언제 쓰면 좋을까?

• VS Code 테마를 그대로 쓰고 싶을 때
• SSG/SSR 환경 (Vite, Nuxt, VitePress, Astro 등)
• 가독성이 최우선일 때
• 빌드 타임 성능이 중요하지 않을 때

비교 정리

실무 경험에서 우러난 조언

저는 처음에 "가볍다"는 이유로 Prism.js를 선택했습니다.

번들 크기가 작고, 플러그인으로 라인 번호나 복사 버튼을 쉽게 추가할 수 있었거든요. CSS로 테마를 직접 만들어서 블로그 디자인과 완벽하게 통일시킬 수도 있었습니다.

하지만 한 가지 아쉬운 점이 계속 남았습니다. VS Code에서 보던 익숙한 색상을 그대로 쓸 수 없다는 거예요. Dracula나 Nord 같은 인기 테마를 바로 적용하고 싶었습니다.

그래서 최근 Shiki로 변경했습니다. SSG 블로그라서 빌드 타임에 모든 하이라이팅이 완료되니 런타임 성능 걱정도 없고, 무엇보다 VS Code 테마를 그대로 쓸 수 있다는 게 정말 만족스럽더라고요.

물론 "작동하는 코드는 건드리지 않는 게 상책"이라는 원칙도 있습니다. 하지만 이번 변경은 SSG 환경의 특성을 제대로 활용하는 선택이었다고 생각합니다.

마치며

코드 하이라이터 선택은 정답이 없습니다. 프로젝트 특성과 우선순위에 따라 달라지니까요.

다만 이 글이 여러분의 의사결정에 조금이나마 도움이 되었으면 합니다.

간단한 선택 가이드:

• 🎯 경량 블로그 → Prism.js
• 🌍 범용 문서 사이트 → Highlight.js
• 🎨 VS Code 테마 원하면 → Shiki
• ⚡ SSG 환경이면 → Shiki (강력 추천)

여러분은 어떤 하이라이터를 쓰고 계신가요? 선택 기준은 무엇이었나요?