ghost cms 에 prism js 로 구문 강조(syntax hightlight) 하기
- 정광섭
기술 블로그라면 포스트에 포함하는 소스 코드를 구문 강조(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>
이제 고스트 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
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>
<body> </body> 사이에 prism js 를 호출하는 내용을 추가합니다.
<body>
<{!-- prism js 호출 추가 --}}
<script type="text/javascript" src="{{asset "js/prism.js"}}"></script>
</body>
코드 작성
post 를 작성할 때 github 의 markdown 처럼 ``` 를 3개 입력하면 생기는 코드 창에서 코드를 입력하면 됩니다.
입력이 끝나면 번거롭지만 우측 창에 구문 강조할 언어의 종류(Ex: bash, python, nginx 등) 를 직접 입력해 줘야 합니다.
구문 강조가 적용된 예시는 https://blog.lesstif.com/code-syntax-highlight/ 를 참고하세요.