GhostCMSでシンタックスハイライトする時に読み込むCSSとJS

Photo by Mika Baumeister / Unsplash

GhostCMSでシンタックスハイライトする時に読み込むCSSとJSが分からなくなるので、いくつかまとめて書き記しておく。

GhostCMSではPrism.jsが推奨されている為、Prism.jsを利用する。

Prism.js

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in millions of websites, including some of those you visit daily.
Prism

GhostCMSにPrism.jsを追加するには、Code Injectionにコードを貼り付ける。

CSSはヘッダー、JSはフッター

prism.min.css

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/themes/prism.min.css" integrity="sha512-tN7Ec6zAFaVSG3TpNAKtk4DOHNpSwKHxxrsiw4GHKESGPs5njn/0sMCUMl2svV4wo4BK/rCP7juYz+zx+l6oeQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Themeが存在しており、必要に応じてデザインを変更可能。変更する場合は、prism.min.cssに変わってTheme cssを読み込む必要がある。

okaidiaの場合は、以下のコード

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/themes/prism-okaidia.min.css" integrity="sha512-mIs9kKbaw6JZFfSuo+MovjU+Ntggfoj8RwAmJbVXQ5mkAX5LlgETQEweFPI18humSPHymTb5iikEOKWF7I8ncQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

prism.min.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/prism.min.js" integrity="sha512-/Swpp6aCQ0smuZ+zpklJqMClcUlvxhpLf9aAcM7JjJrj2waCU4dikm3biOtMVAflOOeniW9qzaNXNrbOAOWFCw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

シンタックスハイライトしたい言語に応じて、pluginも読み込む必要がある。

Pythonの場合は、以下のコード

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/components/prism-python.min.js" integrity="sha512-AKaNmg8COK0zEbjTdMHJAPJ0z6VeNqvRvH4/d5M4sHJbQQUToMBtodq4HaV4fa+WV2UTfoperElm66c9/8cKmQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

かなりの数のPluginが存在するため、適時cdnjs.comを参照することを推奨

prism - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
Lightweight, robust, elegant syntax highlighting. A spin-off project from Dabblet. - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make…