기술 블로그라면 포스트에 포함하는 소스 코드를 구문 강조(source code syntax highlight)하는 것은 필수일 겁니다.

여러 가지 구문 강조 library 가 있지만 개인적으로 prism js 를 제일 좋아하기 때문에 고스트로 블로그를 만들면서 prism js 를 적용해 봤는데 그 과정을 정리해 봅니다.

CDN 사용

cdnjs jsdelivr 같은 무료 CDN 에서는 다양한 Java script library 를 서비스하고 있고 Prism js 도 포함되어 있습니다.

개인적으로는 cdnjs 가 익숙해서 많이 사용하므로 이 기준으로 설명해 보겠습니다.


https://cdnjs.com/libraries/prism 에 접속한 후에 사용할 버전을 선택하고 아래에서 prism.min.js 의 script tag url 을 복사하고 사용하는 에디터에 붙여넣습니다.

그리고 구문 강조를 적용할 언어들을 찾아서 script tag URL 을 다 복사해 둡니다.

예로 java 와 python 을 구문 강조하려면 다음 URL 도 복사해 둡니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js" integrity="sha512-hpZ5pDCF2bRCweL5WoA0/N1elet1KYL5mx3LP555Eg/0ZguaHawxNvEjF6O3rufAChs16HVNhEc6blF/rZoowQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-java.min.js" integrity="sha512-prE8sqsXm1XwxSKT5BXnOvNd3/RDR3TwfiH/uEDD/yWmNa3uDRdeVTQDnCSvMKgr17+0P5PkM95xSP18bQ9rIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-python.min.js" integrity="sha512-yIpe1UXrH/ZWwu3n7MdHNfMbPXftP0jlg9+lRhzlpbolElt33h3PGx9ICzqf/k+yca3QNzqcO3sdtKJuYRTi4g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
XML


이제 고스트 CMS 에 관리자로 로그인 한 후에 대시보드에서 Settings → "Code injection" 에 들어간후에 위에서 복사해 둔 JS 코드를 Site Footer 부분에 추가해 줍니다.


이번에는 prism js 에서 사용할 테마를 지정해야 합니다. 다시 cdnjs 로 돌아와서 Asset Type  을 Styling 로 변경하고 목록에서 사용할 테마의 Link tag URL 을 복사해 둡니다.

저는 tomorrow 테마를 좋아해서 이걸로 정했고 테마별 예제는 prism js 사이트에서 볼 수 있습니다.


위에서 복사한 link tag 테마 URL 을 고스트의 Site Header 에 추가해 줍니다.


theme 에 지정

primjs 에서 지원할 언어와 테마, 플러그인 선택후 다운로드합니다. 

예로 아래 URL 은 제가 사용하는 언어와 플러그인을 선택한 예시입니다.

https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+apacheconf+bash+c+csharp+cpp+go+graphql+handlebars+java+json+js-templates+kotlin+markup-templating+nginx+php+powershell+python+rust+sql+systemd+toml+vim+yaml&plugins=line-numbers+show-language+toolbar+copy-to-clipboard
CODE


down받은 js 와 css 를 content/theme/THEME_NAME/assets/에 복사합니다.

즉 테마가 casper 일 경우 각 파일들을 아래 경로에 복사해 주면 됩니다.

  • prism.css → content/theme/casper/assets/css
  • prism.js → content/theme/casper/assets/js


theme 폴더 하단의 default.hbs 를 오픈해서 <head> </head> 사이에 다음 내용을 추가합니다.

<head>
	{{!-- Basic meta - advanced meta is output with {ghost_head} below --}}
    <title>{{meta_title}}</title>

 	<{!-- prism css 호출 추가 --}} 
   <link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />
</head>
XML


<body> </body> 사이에 prism js 를 호출하는 내용을 추가합니다.

<body>
   	<{!-- prism js 호출 추가 --}}  
	<script type="text/javascript" src="{{asset "js/prism.js"}}"></script>  
</body>
XML


코드 작성

post 를 작성할 때 github 의 markdown 처럼 ``` 를 3개 입력하면 생기는 코드 창에서 코드를 입력하면 됩니다.

입력이 끝나면 번거롭지만 우측 창에 구문 강조할 언어의 종류(Ex: bash, python, nginx 등) 를 직접 입력해 줘야 합니다.


구문 강조가 적용된 예시는 https://blog.lesstif.com/code-syntax-highlight/ 를 참고하세요.

Ref