Ghostのデフォルトのスタイルでも十分に洗練されており綺麗ですが、個人的にはシンタックスハイライトくらいは欲しいので、別途拡張していきます
環境
Ghost v 1.24.9
目的
GhostのデフォルトテーマであるCasperから派生した独自テーマにprism.jsを追加する
背景
もっと高機能なシンタックスハイライトが欲しい！
解決策
1. GhostのCasperテーマを複製して独自テーマ(casper-custom)を作成する
もし既に独自テーマを作成している人はこの作業をスキップできます
デフォルトのCasperテーマを使用している人は画面側からの操作では上書きができないのでこの作業が必要です
casperテーマから派生してcasper-customテーマを作成する方法はこちらの記事を参考にしてください
2. 適したPrism.jsを生成してダウンロード
prismjs.comからテーマや必要なプラグインを選択して最小限のprism.jsとprism.cssを生成します
ここで全部チェックすると1MB近くなるのでマイナーな言語などは除外したほうが良いです
3. 独自テーマ(casper-custom)にPrism.jsを設置する
下のように配置します
casper-custom/assets/css/prism.css
casper-custom/assets/js/prism.js
4. Prism.jsとcssを読み込むように修正する
casper-custom/default.hbsをエディタで開いて下記のように修正します
<!DOCTYPE html>
<html lang="{{lang}}">
<head>
......
{{!-- Styles'n'Scripts --}}
<link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
<link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />
<script type="text/javascript" src="{{asset "js/prism.js"}}"></script>
{{!-- This tag outputs SEO meta+structured data and other important settings --}}
{{ghost_head}}
</head>
5. zipしてアップロードする
zipにアーカイブして管理画面の[Design]->[Upload a theme]を押してOverrwriteして上書きします
確認
どのシンタックスハイライトを指定するかは${LANG}の部分で指定します
```${LANG}
```
ここで${LANG}=bashとした場合、下記のようにbashのシンタックスがハイライトされるのを確認します
```bash
echo test | grep t
```
echo test | grep t