Make

Ghost post에 프로그램 코드 넣기

pih

Jul 26, 2023 • 2 min read

Tech 블로그를 운영한다면 프로그램 코드 syntax 블럭을 표현하고 싶게 된다. 여기서는 고스트 공식문서를 참고로 Prizm 라이브러리를 code injection에 넣는 방법을 포스트하겠다. (커스텀 하는 방법도 있지만 여기서는 가장 간단한 방법을 소개하겠다.)

우선, 관라자 페이지의 설정 > code injection에서 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" />

그리고 나서 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>

save 하고 posting 할 때 ``` <code 언어>를 치면 해당 언어를 표현할 수 있다.

text 입력란에서 ```python하고 enter 치면 아래 화면으로 변환 될 것이다.

그러고나서 코드를 입력하면 자동으로 하이라이팅 처리된다.

그리고 publish하면 멋찌게 하이라이트 된다.

아래 링크는 GitHub Gist로 코드를 표현하는 방법이다.