AFFINGERを適用したWordPressにhighlight.jsを導入する

サイト上でソースコードや実行コマンドなどを綺麗に表示するのに便利なのが、シンタックスをハイライトしてくれるJavaScriptライブラリです。

この記事ではそんなライブラリのひとつである、highlight.jsをAFFINGERテーマを適用したWordPressへ導入してみます。

一般的な導入方法（どんなサイトでも共通）

公式サイトにあるように、CDN経由で導入するのが便利です。

以下のコードをhead内に入れます。

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/highlight.min.js"></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)

mattn - Twitter

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.3.2/styles/hybrid.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
EOM;
	echo $headcustomtag;
}

プラグイン導入や、wp_enqueue_script()による方法ではうまくいきませんでした。

上記のように直接head内で読み込む方法で導入できたので、めでたし。