ghost

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

uiram

2025년 10월 4일 • 2 min read

PrimsJS를 사용하면 코드 블록에 구문 강조와 복사 등 다양한 기능을 추가할 수 있다.

Code injection 수정하기

PrismJS JS와 CSS를 불러와야 한다.

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">

Site header

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>

Site footer

autoloader는 코드 블록을 강조 표시하는 데 필요한 언어를 자동으로 불러온다.

copy-to-clipboard와 show-language를 쓰려면 toolbar가 필요하다.

참조

더 많은 테마와 플러그인은 아래에서 확인할 수 있다.

Customize your download ▲ Prism

prismjs.com

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

uiram

Code injection 수정하기

Site header 수정하기

Site footer 수정하기

참조

Sign up for more like this.