Ghost 블로그에 prism으로 코드 하이라이팅 추가해보기

ghost 블로그 테마들에는 보통 코드 하이라이팅이 안되는것 같더라고요.

그래서 hightlight.js를 이용해서 코드 하이라이팅을 해보려고 했지만 뭔가 불--편 하더라고요. 그래서 ghost 공식 튜토리얼에 있는 prism으로 하이라이팅을 해봤어요.

일단 이런식으로 ghost 에디터로 코드블럭을 추가하고 프리뷰를 보면 하이라이팅이 안되어 있어요. ghost의 code injection이라는 기능을 통해 이걸 하이라이팅 시켜주는 코드를 추가해 볼거에요.

튜토리얼에 따르면 prism 스크립트만 추가해 주면 알아서 하이라이팅이 된다고 해요.

여기에 있는 code injection에 들어가 주세요.

Site Header 부분에 이 코드를 추가해 주세요.

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

이 코드는 prism의 tomorrow 테마를 적용해 준다고 해요.

이렇게 생겼다고 해요.

CSS만 추가해서는 하이라이팅이 안되겠죠? JS도 추가해 줄게요. Site Footer 부분에 아래 코드를 추가해 주세요.

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.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.28.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-fTl/qcO1VgvKtOMApX2PdZzkziyr2stM65GYPLGuYMnuMm1z2JLJG6XVU7C/mR+E7xBUqCivykuhlzfqxXBXbg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

prism-core.min.js 는 prism 기본 모듈? 이고요, prism-autoloader.min.js 는 페이지가 로딩될 때 하이라이팅을 해주는 파일이에요.

저장하고 코드블럭을 확인해보면 이렇게 하이라이팅이 된 모습을 보실수가 있겠네요!

prism에는 많은 테마들이 있으니 마음에 드는걸로 사용하시면 될 것 같아요!

(dracula theme 사용중)