WordPressでPrism.jsを使いコードのシンタックスハイライトを行う方法

1 はじめに
2 導入手順の概要
3 導入手順の詳細
4 利用方法
5 おまけ

はじめに

シンタックスハイライト行う軽量で多機能なPrism.jsと呼ばれるJavaScriptライブラリがあります。Prism.jsは対応言語と機能が選択可能で、不要な言語と機能を選択しなければ非常に小さくできます。しかし、WordPress専用ではなく、自分のサイトに組み込むには一手間必要となるので、その手順をまとめます。

導入手順の概要

Prism.jsのダウンロード
ダウンロードしたライブラリをWordPressに配置
配置したライブラリをページにリンクするコードを追加

導入手順の詳細

Prism.jsのダウンロード

Prismは選択した対応言語と機能によりJavaScriptコードが生成されるので、公式サイトのダウンロードページで、シンタックスハイライトさせたい言語と使いたい機能の選択から始めます。

http://prismjs.com/download.html

選択項目は大きく分けて３つ。例として、それぞれ以下の項目を選択します。

テーマ（見た目）：Coy
シンタックスハイライトしたい言語：Markup、CSS、C-like、JavaScript、PHP
機能（プラグイン）：未選択

選択後にサイトの最後にあるDOWNLOAD JSボタンとDOWNLOAD CSSボタンでprism.jsとprism.cssをダウンロードします。

ダウンロードしたライブラリをWordPressに配置

ダウンロードしたprism.jsとprism.cssを、有効化しているテーマのjs、cssディレクトリへ配置します。テーマのuriから見えれば場所は自由です。

ドキュメントルートが/var/www/html、有効化しているテーマがtwentysixteenならば配置する場所は以下の場所です。

prism.jsは、/var/www/html/wp-content/themes/twentysixteen/js/prism.js
prism.cssは、/var/www/html/wp-content/themes/twentysixteen/css/prism.css

配置したライブラリをページにリンクするコードを追加

ページのテンプレートを直接編集せず、この用途のためにWordPressが提供している方法で行います。

コードの追加は有効化しているテーマのfunctions.phpとなり、前手順と同じ条件なら/var/www/html/wp-content/themes/twentysixteen/functions.phpです。

function my_enqueue_scripts() {
  $theme_uri = get_template_directory_uri();
  wp_enqueue_script( 'prism-js', $theme_uri . '/js/prism.js', array('jquery'), false, true );
  wp_enqueue_style( 'prism-css', $theme_uri . '/css/prism.css');
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

wp_enqueue_scriptsアクションフックで、wp_enqueue_script関数とwp_enqueue_style関数を呼び出しスクリプトのリンクを追加します。この方法の詳細は「WordPressが生成するページにスクリプトやスタイルシートのリンクを追加する方法」です。

利用方法

投稿内でシンタックスハイライトしたいコードを、pre、codeタグで括り、codeタグのクラスに言語を指定します。書式は、language-{言語名}です。

phpの場合の投稿：

PHP言語のシンタックスハイライトのサンプル
<pre><code class="language-php">
<?php
  $arr = [ "A", "B", "C" ];
  foreach( $arr as $key=>$value ) {
	echo $key . ":" . $value . PHP_EOL;
  }
</code></pre>

結果：

<?php
  $arr = [ "A", "B", "C" ];
  foreach( $arr as $key=>$value ) {
	echo $key . ":" . $value . PHP_EOL;
  }

おまけ

ドキュメント作成にマークダウンエディタのtyporaを使用しているなら、codeタグによる言語の指定方法がtyporeが生成するHTMLコードと同じなので、コピペ後の修正が不要で相性が良いです。

typoraは、macOS、Linux、Windowsに対応したマークダウンエディタです。
https://typora.io/