Ghost 테마 수정 2편: Prism.js 코드블록에 Syntax Highlight 적용하기

지난 포스팅에서 고스트 테마중에 ruby를 선택하고 간단히 ruby 테마를 수정해 봤습니다. 블로그를 운영하다 보면 코드를 예쁘게 보여주고 싶은 마음이 생기죠. 특히 Ghost의 기본 코드블록은 밋밋해서 아쉬운 부분이 많았습니다. 그래서 이번에는 Prism.js를 활용해서 코드에 문법 강조(Syntax Highlighting)를 적용해보기로 했습니다.

왜 Prism.js를 선택했을까?

코드 문법 강조 라이브러리는 여러 가지가 있지만, Prism.js를 선택한 이유는 다음과 같습니다:

• 가벼운 용량: 필요한 언어만 선택해서 사용할 수 있어 용량 부담이 적음
• 풍부한 언어 지원: 티스토리나 다른 플랫폼에서 지원하지 않는 언어도 사용 가능
• 유연한 커스터마이징: CSS로 스타일을 자유롭게 수정할 수 있음
• 다양한 플러그인: 줄 번호, 복사 버튼 등 유용한 기능들을 추가할 수 있음

적용 방법 1: CDN 링크 사용하기 (간단한 방법)

가장 간단한 방법은 Ghost 관리자 페이지에서 CDN 링크를 추가하는 것입니다.

Ghost 관리자 > Settings > Code injection :

1. Site Header에 추가

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" integrity="sha512-vswe+cgvic/XBoF1OcM/TeJ2FW0OofqAVdCZiEYkd6dwGXthvkSFWOoGGJgS2CW70VK5dQM5Oh+7ne47s74VTg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

2. Site Footer에 추가에 추가

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js" integrity="sha512-9khQRAUBYEJDCDVP2yw3LRUQvjJ0Pjx0EShmaQjcHa6AXiOv6qHQu9lCAIR8O+/D8FtaCoJ2c0Tf9Xo7hYH01Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-SkmBfuA2hqjzEVpmnMt/LINrjop3GKWqsuLSSB3e7iBmYK7JuWw4ldmmxwD9mdm2IRTTi0OxSAfEGvgEi0i2Kw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

이렇게 하면 바로 적용됩니다! 하지만 저는 폰트나 스타일을 세밀하게 조정하고 싶어서 직접 파일을 다운로드해서 커스터마이징하기로 했습니다.

적용 방법 2: 파일 다운로드 후 커스터마이징

1단계: Prism.js 파일 다운로드

[Prism.js 다운로드 페이지]에서 필요한 언어와 플러그인을 선택합니다.

2단계: 개발 환경 준비

터미널에서 테마 폴더로 이동해서 개발 서버를 실행합니다:

cd ~/ghost-dev/content/themes/ruby

yarn dev

3단계: CSS 파일 적용

다운로드한 `prism.css` 파일을 `assets/css/misc/` 폴더에 넣어줍니다.
그리고 `assets/css/screen.css` 파일을 열어서 맨 마지막 줄에 추가:

@import "misc/prism.css";

저장하면 `yarn dev`가 자동으로 여러 CSS 파일들을 하나로 병합해줍니다.

4단계: JavaScript 파일 적용

`prism.js` 파일의 내용을 `assets/js/main.js`에 붙여넣기 합니다.

5단계: 폰트 커스터마이징

코드 블록에 **JetBrains Mono** 폰트를 적용해보겠습니다.

1) 폰트 임포트

`assets/css/general/fonts.css`에 추가:

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

2) 폰트 적용

`assets/css/misc/prism.css`에서 다음 부분을 수정:

font-family: "JetBrains Mono", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 0.9em;

6단계: 테마 빌드 및 적용

작업이 완료되면 개발 서버를 중지하고 테마를 압축합니다:

# 개발 서버 중지
Ctrl + C

# 테마 압축
yarn zip

`dist` 폴더에 생성된 zip 파일을 Ghost 관리자 페이지에서 업로드하면 완성!

결과물 확인

이제 코드 블록이 훨씬 보기 좋아졌습니다. 언어별로 다른 색상으로 구문이 강조되고, JetBrains Mono 폰트로 가독성도 향상되었네요.

Prism.js의 주요 장점 정리

1. 경량화: 필요한 언어만 선택해서 용량 최적화 가능
2. 클래스 기반: body 클래스로 기본 언어 설정 가능
3. 광범위한 언어 지원: 다른 플랫폼에서 지원하지 않는 언어도 사용 가능
4. 확장성: 정규표현식으로 새로운 언어 추가나 기존 언어 수정 가능
5. 풍부한 플러그인: 줄 번호, 복사 버튼, 하이라이트 등 다양한 기능 제공

마무리

Ghost 테마에 Syntax Highlighting을 적용하는 과정을 정리해봤습니다. CDN 방식은 간단하지만, 직접 파일을 다운로드해서 커스터마이징하면 더 세밀한 조정이 가능합니다.

다음 편에서는 Prism.js 플러그인을 활용해서 줄 번호나 복사 버튼 같은 기능들을 추가해보는 방법을 다뤄보겠습니다!