/ ghost

Ghostでコードをシンタックスハイライトする - Prism.js

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
zienchan

zienchan

ハードウェアからソフトウェアまで広範囲で何か作ってます

Read More
Ghostでコードをシンタックスハイライトする - Prism.js
Share this