WordPressで、highlight.js(ソースコード・ハイライト)を使う

WordPressで、highlight.js(ソースコード・ハイライト)を使う
2020年1月29日

highlight.jsとは

highlight.js(公式サイト)は、ソースコードをハイライトするためのJavaScriptライブラリです。
当ブログにもインストールしてみて、とても気に入りましたので「WordPressでhighlight.jsを利用する方法」として共有したいと思います。

必要条件

JavaScriptファイルとCSSファイルを、自分のサーバにアップできること。(自前のサーバにアップしないCDNによる実装もあるようですが、今回は解説しません)

Gutenberg対応WordPress。(以前のバージョンでも使えると思いますが、私が検証できないので解説しません)

ちなみにJavaScriptライブラリといっても、JavaScriptの知識は全く必要ありません。

以下インストール手順です。

1. スタイルの選定

公式サイトのデモページから、気にいるハイライトのスタイルを探しましょう。

ちなみに当ブログのチョイスは、GitHub Gistです。

2. 公式サイトからダウンロード

公式サイトのダウンロードページで、ハイライトする必要のある言語にチェックをつけた上で、ダウンロードボタンを押し、ファイルをダウンロードします。

ダウンロードした中に「highlight.pack.js」というファイルがあるはずです。

それに加え「styles」というフォルダの中から、選定したスタイルに対応するCSSファイルを見つけてください。
CSSのファイル名が、スタイルの名前になっています。

スタイルによっては(Brown Paperなど)、背景画像ファイル(.png)が付随するものがあり、画像も「styles」というフォルダの中にあります。
ちなみに背景画像アリのスタイルはキワモノなので(笑)非オススメとなります。

3. 自分のサーバへアップロード

highlight.pack.jsと、選定したCSSファイル(もしあるならば、CSSと同名のPNGファイルも)を、自分のサーバにアップロードしてください。

アップするディレクトリに関しては、WordPressの更新によって消えてしまうことが想定されるような場所でなければ、どこでも良いです。
都合が悪くなれば場所はいつでも移せるので、深く考える必要はありません。

4. header.phpにHTMLコード追記

WordPressのテンプレートには、HTMLのheadタグ内に出力される内容を追加できる、header.phpやhead.pngという名称のphpがあると思います。
そちらに、以下のHTMLコードを追記します。(参考: 公式ページのUsage

<link rel="stylesheet" href="CSSファイルのアドレス">
<script src="JSファイルのアドレス"></script>
<script>hljs.initHighlightingOnLoad();</script>

上記HTMLコード内の「CSSファイルのアドレス」「JSファイルのアドレス」の部分を自分のサーバにアップしたファイルのアドレスに書き換えてください。
下記HTMLコードは、当ブログの例です。

<link rel="stylesheet" href="https://aoioto.com/github-gist.css">
<script src="https://aoioto.com/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

インストールは以上となります。

WordPress投稿での使い方

最初に書きましたが、Gutenberg前提で話を進めます。

ブロックを追加します。

ブロックのタイプにソースコードを選びます。

「ソースコード」ブロックとして書いた内容は、HTML化された際に<pre><code>タグで囲まれます。
highlight.js 公式ページのUsageにあるように、highlight.jsは<pre><code>タグ内のコードをハイライトしますので、基本この使い方でOKです。

もし言語が自動検出されないときは

highlight.jsはコードが何の言語が、自動的に検出してハイライトしますが、これが機能しないときの方法を紹介します。
上で紹介した「ソースコード」ブロックが書いてある前提で進めます。

投稿画面を一時的にコードエディタに切り替えます(Shoutcut Key: ⌘⌥⇧ + M)。

自動検出が機能しない箇所の<code>タグを「言語名でclass指定」します。
こうすることで、highlight.jsは指定した言語を認識します。

以上になります。
highlight.jsは機能がシンプルな分、コードが軽量(言語を絞ってダウンロードすれば更に軽量化できるのでしょう)なので、ソースコード・ハイライトに特別な機能を求めない方にはオススメできます。

また、今回のようなWordPressの機能追加に関してですが、プラグインを導入するよりも、JSファイル設置で済むのであれば、その方が内部的に起きることが明瞭なだけ、ユーザとして安心感があります。