【ワードプレス】プリズムを手動で導入して、ソースコードをハイライト表示させる

これまで WordPress（ワードプレス）の投稿の中で表示する、ソースコードのシンタックスハイライト表示は、highlight.js（ハイライトジェイエス）を使ってきました。

なぜなら WordPress に導入しているテーマ「Cocoon（コクーン）」に、組み込まれていたからです。
ただ highlight.js は、自動言語検出機能があって動作が軽いのですが、機能性が乏しい。

ということで、同じくハイライト表示する Prism.js（プリズムジェイエス）に変えてみました。
ちなみに Prism.js は、プラグインを使って導入せずに、手動で導入しています。

Prism.js を手動で導入するには、FTPクライアントソフト（FFFTP など）が必要です。

Prism.js は、自動言語検出機能がないので、言語名をクラスで指定する必要があります。

Gutenberg（ブロックエディター）の場合は、右側に表示される「高度な設定」の中に、クラスを追加します。

自分だけのPrism.jsのダウンロード
使用中のテーマにアップロード
テーマのための関数にコードを追加
1. テーマ「Cocoon」の注意点
Prism.jsの利用方法
あとがき

自分だけのPrism.jsのダウンロード

Prism.js は、必要な言語、必要な機能だけを選んで構成できるので、動作が軽くて済みます。
まずは Prismのホームページを表示します。

ダウンロードページへ移動

作業手順：

右上の「DOWNLOAD」ボタンをクリックして、ダウンロードページへ移動。

Prism.jsのカスタマイズ

必要な項目にチェックを入れて、自分だけの Prism.js を作ります。

圧縮レベル

作業手順：

圧縮レベルが「Minified version」になっていることを確認。

コアとテーマ

作業手順：

テーマの中から好みのデザインのラジオボタンをクリック（テーマによって多少サイズが異なる）。

Core は Prism.js の動作に必須なので、チェックははずせません。

言語

作業手順：

表示したい言語のチェックボックスをクリックして、チェックを付ける。

言語の間に依存関係があるので、勝手にチェックされることがあります。

プラグイン

作業手順：

使いたいプラグインのチェックボックスをクリックして、チェックを付ける。
ファイルサイズが大きくなりすぎていないか確認。

プラグインの間に依存関係があるので、勝手にチェックされることがあります。

次のプラグインを追加しました。

Line Highlight 　………………　指定した行をハイライトさせる（説明するときに便利）。
Line Number　…………………　preタグにクラスを追加したときに、行番号が表示される。
Show Language 　……………　言語名を表示する。
Copy to Clipboard Button　…　「クリップボードにコピー」ボタンを付ける。

ダウンロード

作業手順：

「DOWNLOAD JS」ボタンをクリックして、prism.js をダウンロード。
「DOWNLOAD CSS」ボタンをクリックして、prism.css をダウンロード。

prism.js も prism.css も選んだ「言語」や「プラグイン」に合わせて生成されます。
「言語」や「プラグイン」の組み合わせを変えたときは、どちらも入れ替える必要があります。

使用中のテーマにアップロード

（WordPressフォルダ）/wp-content/themes/（使用中のテーマ）/prism/

作業手順：

FTPクライアントソフトを起動して、WordPress を導入したサーバーに接続。
使用しているテーマのフォルダの中に、「prism」フォルダを作成。
作成した「prism」フォルダの中に、prism.js と prism.css をアップロード。

子テーマを使用している場合は、子テーマのフォルダが対象になります。

prism.js と prism.css を配置するのは、使用しているテーマのフォルダのどこでも構いません。
ただし、テーマのための関数（function.php）のパスを合わせる必要があります。

テーマのための関数にコードを追加

作業手順：

WordPress のサイドメニュー > 外観 > テーマエディターで、テーマのための関数（function.php）を開く。
次の記述を追加してファイルを更新。

WordPress4.7以降かつ PHP5.4以降の場合：

// Prism.js
function load_prism() {
  wp_enqueue_style( 'prism-style', get_theme_file_uri( '/prism/prism.css' ) );
  wp_enqueue_script( 'prism-script', get_theme_file_uri( '/prism/prism.js' ), [], false, true );
}
add_action( 'wp_enqueue_scripts', 'load_prism' );

WordPress または PHP のバージョンが古い場合：

// Prism.js 古いバージョンでの書き方
function load_prism() {
  wp_enqueue_style( 'prism-style', get_stylesheet_directory_uri() . '/prism/prism.css' );
  wp_enqueue_script( 'prism-script', get_stylesheet_directory_uri() . '/prism/prism.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'load_prism' );

テーマ「Cocoon」の注意点

WordPress のテーマ「Cocoon」の場合、あらかじめテーマの中に Highlight.js が組み込まれています。

もし「ソースコードをハイライト表示」にチェックがついている場合は、チェックをはずす必要があります。

Prism.jsの利用方法

Prism.js の主だった使い方を説明します。
なお詳しくは、Prism.js のホームページをご覧ください。

言語名の指定

<pre><code class="language-（言語名）">（言語の記述）</code></pre>

Prism.js は、自動言語検出機能がないので、言語名をクラスで指定する必要があります。
たとえば HTML や CSS の場合は、次のようになります。

<pre><code class="language-html">（HTMLの記述）</code></pre>

<pre><code class="language-css">（CSSの記述）</code></pre>

Gutenberg（ブロックエディター）の場合は、右側に表示される「高度な設定」の中に、クラスを追加します。

なお HTML をそのままコード表示すると、実際の HTMLコードと区別がつかないので、表示が崩れます。

HTMLエスケープツールなどを使って、あらかじめ「&」「”」「’」「<」「>」をエスケープ文字（参照文字）に変換する必要があります。

指定行ハイライト（要 Line Highlight）

preタグの中で data-line に行を指定することで、その行がハイライト表示されます。

<pre data-line="3,8-12"><code class="language-（言語名）">（言語の記述）</code></pre>

上の例では、3行目と8行目から12行目までが、ハイライト表示されます。

/* サンプルCSS */
.example1 {
  margin-bottom: 1em;
  padding: 1em 2em;
  border: solid 1px #ccc;
}

.example2 {
  background-color: #fff;
  color: #333;
  line-height: 1.2;
}

行番号表示（要 Line Numbers）

preタグの中に line-numbersクラスを追加することで、左端に行番号が表示されます。

<pre class="line-numbers"><code class="language-（言語名）">（言語の記述）</code></pre>

Gutenberg（ブロックエディター）の場合は、右側に表示される「高度な設定」の中に、クラスを追加します。

/* サンプルCSS */
.example1 {
  margin-bottom: 1em;
  padding: 1em 2em;
  border: solid 1px #ccc;
}

.example2 {
  background-color: #fff;
  color: #333;
  line-height: 1.2;
}