blog

코드를 보기 좋게 Ghost에서 PrismJS를 사용해보자

uiram

2025년 4월 13일 • 3 min read

Code injection으로 PrismJS 추가하기

Settings → Code injection → Site header에 다음과 같이 추가한다.

<!-- Prism.js CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism-twilight.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/plugins/toolbar/prism-toolbar.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/plugins/line-numbers/prism-line-numbers.min.css">

Settings → Code injection → Site footer에 다음과 같이 추가한다.

<!-- Prism.js Core -->
<script src="https://cdn.jsdelivr.net/npm/prismjs/prism.min.js" defer></script>

<!-- Prism.js Plugins -->
<script src="https://cdn.jsdelivr.net/npm/prismjs/plugins/autoloader/prism-autoloader.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs/plugins/toolbar/prism-toolbar.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs/plugins/line-numbers/prism-line-numbers.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs/plugins/show-language/prism-show-language.min.js" defer></script>

<!-- Adds line numbers to code blocks -->
<script>
  window.addEventListener('DOMContentLoaded', (event) => {
    document.querySelectorAll('pre[class*=language-]').forEach(function (node) {
      node.classList.add('line-numbers');
    });
    Prism.highlightAll();
  });
</script>