Ghost 블로그에는 코드 블럭 기능이 이미 내재되어있는데, IDLE처럼 조금 더 다양한 색깔로 바꾸고 싶을 땐 highlightJS라는 라이브러리를 이용하면 된다. 이 라이브러리는 HTML5의 pre 태그 안의 스타일링을 바꿔주는 자바스크립트 라이브러리다.

#highlightJS 불러오기

우선 고스트의 관리자 화면에 가서 "Code injection" 메뉴를 클릭한다.

"Blog Header" 섹션에 일단 다음 3줄을 추가하자.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/agate.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

위 코드의 첫번째 줄은 어떤 스타일을 적용해줄지 css 파일을 불러오는 코드다. 스타일은 아주 다양하게 있는데, 데모페이지의 Styles 섹션에 보면 여러 스타일들을 확인해볼 수 있다.

난 agate 스타일을 사용하고 있는데, 첫 줄 코드의 마지막을 보면 agate.min.css라고 되어있다. 여기서 agate 부분을 자기가 적용하고 싶은 스타일의 이름(소문자)로 적으면 된다.

두번째 줄은 highlightJS의 라이브러리를 불러오는 코드.

세번째 줄은 highlightJS를 실행하여 적용시키는 코드이다.

다 적었으면 그 다음엔 css 코드를 적용해준다.

<style>
  pre {
    word-wrap: normal;
    -moz-hyphens: none;
    -ms-hyphens: none;
    -webkit-hyphens: none;
    hyphens: none;
    font-size: 0.7em;
    line-height: 1.3em;
  }
  pre code, pre tt {
    white-space: pre;
  }
</style>

자세한 설명은 따로 필요 없을 듯 하다. 폰트 크기랑 줄 간격을 조정해줄 수 있다.

모든 코드를 입력했으면 오른쪽 위에 "Save" 버튼을 누르면 완료.