開発系のブログなどでは、ソースコードを記載する記事を書くことも多いと思います。
サイト上でソースコードや実行コマンドなどを表示するときに便利なのが、シンタックスを綺麗にハイライトしてくれるJavaScriptライブラリです。
この記事ではそんなライブラリのひとつhighlight.jsを、AFFINGERテーマを適用したWordPressへ導入してみます。
一般的な導入方法（どんなサイトでも共通）
公式サイトにあるように、CDN経由で導入するのが便利です。
以下のコードをhead内に入れます。（バージョンは記事時点のものです）
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
実際にコードを表示させたい部分では、以下のように<pre><code>で囲んであげます。
<pre><code>
def throw_or_something():
raise 'MAKE AMERICA GREAT AGAIN'
i=1
try:
i = throw_or_something()
except BaseException as i:
pass
print(i)
</code></pre>これをブラウザで見ると、こんな感じに。
def throw_or_something():
raise 'MAKE AMERICA GREAT AGAIN'
i=1
try:
i = throw_or_something()
except BaseException as i:
pass
print(i)
あとは見やすいようにスタイルシート（CSS）で調整します。
WordPressだとstyles.cssに追加すればOK。
例えば、こんな感じに等幅フォントを小さめで指定してあげると、よく見かけるような視認性の高いルックスに。
code {
font-family: Consolas, Monaco, monospace;
font-size: 0.8rem;
}
AFFINGERテーマ下での導入方法
下記コードをfunction.phpに追加します。
add_action( 'wp_head', 'meta_headcustomtags', 99);
function meta_headcustomtags() {
$headcustomtag = <<<EOM
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/hybrid.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
EOM;
echo $headcustomtag;
}
もしくは、Affinger5では管理画面で、head内に置くコードを導入することもできます。
AFFINGER5管理 → その他 → 上級者向け → コードの出力
まとめ
AFFINGER5の場合、プラグイン導入やwp_enqueue_script()による方法ではうまくいかないことが多く、highlight.jsではキレイに表示できたのでよかったです。
上記のように直接head内で読み込むだけで導入できるので、手軽なのもいいところですね。
