はじめまして、de2p株式会社で開発と人事を担当しているT田と申します。
これから不定期に、弊社の開発部社員が技術関連の内容を中心に
このブログで情報発信をしていきますので、よろしくお願いいたします。

記念すべき第1回目は、WordPressでシンタックスハイライトを実現する方法について。

目次

  1. はじめに
  2. 実現方法案
  3. Prism.jsの導入
  4. おわりに

1.はじめに

このブログを始めるにあたり、ソースコードをブログ内で紹介することもあるだろう!
という話が社内で出ました。
ソースコードを素の(飾り付けの無い)テキストで載せるよりも、エディタのように色がついた状態、
つまりシンタックスハイライトで表示させよう!ということになりました。
そこで、

  • どのような実現方法があるのか
  • その中でどの方法が最適なのか

を調べてみることにしました。

2.実現方法案

まず、このホームページはWordPressで作成されています。
そこで、WordPressでシンタックスハイライトを実現する方法について調べたところ、
大きく以下の3つの方法がありそうだことが分かりました。

イ.SyntaxHighlighter Evolved
ロ.highlight.js
ハ.Prism.js

イ.SyntaxHighlighter Evolved

「WordPress シンタックスハイライト」で検索すると、この情報が上位に出てきました。
シンタックスハイライトの定番「SyntaxHighlighter」の、WordPressのプラグインのようです。
ただ、WordPressの動作が重くなるためプラグインはあまり入れたくありません。
また、この「SyntaxHighlighter」は機能が充実している半面、導入すると動作が重くなるという
情報もありました。
よって、この案は見送ります。

ロ.highlight.js

次に見つけたのがこのライブラリです。
「SyntaxHighlighter」を使っていたけど、そんなに機能はいらない!必要最低限の機能で十分だ!
という考えで作成されているようです。
ただ、このライブラリには行番号表示の機能がありません。
無くても良いですが、あった方が説明するときに便利です。
ということで、この案も見送ります。

ハ.Prism.js

次に見つけたのがこのライブラリです。(サイトはこちら
行番号表示の機能もあり、自分が必要な機能のみを選んでダウンロードできます。
対応言語も多く、動作も軽いようです。
ということで、この案を採用することにしました。

3.Prism.jsの導入

以下の順で作業していきます。

イ.Prism.jsのダウンロード
ロ.WordPressに導入
ハ.Prism.jsの再ダウンロード(おまけ)

イ.Prism.jsのダウンロード

こちらのサイトにアクセスします。
prismjs_top_head
右上に「THEME:」と書かれたエリアがあります。各テーマをクリックすると、少し下にスクロールした
ところの表示例(Examples)が変化するので、好みのテーマを決めておきます。
私は「OKAIDIA」にしました。

テーマを決めたら、「THEME:」の上にある「DOWNLOAD」ボタンを押下してダウンロードページに
遷移し、必要な機能を選択していきます。
prismjs_download_top

  • Compression level: → カスタマイズしない場合は「Minified version」を選択
  • Themes → 先ほど決めたテーマを選択

prismjs_download_langs

  • Languages → 必要な言語を選択 ※HTMLは「Markup」

prismjs_download_plugins

  • Plugins → 必要なプラグインを選択

ちなみに、私は以下のプラグインを選択しました。
Line Highlight : 指定行を強調表示
Line Numbers : 行番号を表示
File Highlight : ファイルを指定してハイライト表示
Show Language : 言語名を表示
Command Line : コマンドライン風に表示

prismjs_download_bottom
選択が完了したら、「DOWNLOAD JS」「DOWNLOAD CSS」の各ボタンを押下し、
JavaScriptファイルとスタイルシートをそれぞれダウンロードします。

ロ.WordPressに導入

Prism.jsのファイルがダウンロードできたら、WordPressに導入していきます。
最も簡単な方法は、以下の2行を投稿ページなどの入力欄に記述すればOKです。
(パスは環境に合わせて変更してください)

<link rel="stylesheet" href="prism.css" />
<script src="prism.js"></script>

 
ただ、投稿する度に毎回記述するのは面倒なので、自動で上記コードが<head>タグに挿入されるようにします。
functions.phpに以下のコードを追記します。

<?php
function addSyntaxHighlightScript()
{
	echo '<link rel="stylesheet" href="prism.css" />';
	echo '<script src="prism.js"></script>';
}
add_action( 'wp_head', 'addSyntaxHighlightScript' );
?>

まず、Prism.jsのタグを出力する関数 addSyntaxHighlightScript() を定義します。
そして、その関数を「wp_head」にフックするようにします。(7行目)
 
これで導入は完了です。
ただ、上記だとWordPressの全ページにPrism.jsのタグが出力されてしまいます。
全ページに必要な場合はOKですが、投稿ページ以外には必要ない!という場合は以下のようにします。

<?php
function addSyntaxHighlightScript()
{
	if ( !is_single() ) {
		return;
	}
	echo '<link rel="stylesheet" href="prism.css" />';
	echo '<script src="prism.js"></script>';
}
add_action( 'wp_head', 'addSyntaxHighlightScript' );
?>

4~6行目を追記しました。
is_single() 関数で投稿ページかどうかを判定し、投稿ページでない場合は処理を行わない
ようになりました。

ハ.Prism.jsの再ダウンロード(おまけ)

必要な言語を選んでPrism.jsをダウンロードしたけど、後になって新しく違う言語が必要になった!
ということがありそうです。
その際、また最初から言語やプラグインを選択し直すのは面倒だし、そもそも何を選択したのか
覚えていない…
でも大丈夫! ダウンロードしたスタイルシートの1行目を見てみると…
自分が選択した言語やプラグインが含まれているURLが書いてあります!
そしてこのURLにアクセスしてみると…
すでに言語やプラグインが選択された状態でダウンロードページが表示されました!
後になって言語などを追加する場合は、このURLを使えば良さそうです。

4.おわりに

今回は、WordPressでシンタックスハイライトを実現する方法を選定し、実際に導入するところまでを
行いました。
次回は、Prism.jsの具体的な使い方についてお伝えしますのでお楽しみに!


<スポンサーリンク>