WordPressで記事を作成するとき、コマンドやソースコードを色分けして表示（シンタックスハイライト）したいときがあります。
そのようなとき、シンタックスハイライトできるプラグインを導入するのがよくあるパターンですが、プラグインを導入する方法は、サイトの表示速度が遅くなってしまうことがあります。
そこでおススメしたいのが、軽量かつ多機能でWordPressへの導入も簡単なシンタックスハイライター「Prism.js」です。
ここでは、WordPress環境へシンタックスハイライター「Prism.js」を導入する方法や使い方を紹介します。
目次
Prism.jsとは
「Prism.js」は、軽快な動作と多機能さに特徴のある、シンタックスハイライトができるJavaScriptライブラリです。
主な機能としては、行番号表示・指定行のハイライト・ツールバーの表示などがあり、これ以外にも豊富な機能が用意されています。
Prism.jsを使った時の表示は、以下のようになります。
h1 {
border-bottom: solid 3px black;
/*線の種類（実線） 太さ 色*/
}Prism.jsの導入方法
導入方法は、WordPressのプラグインに比べると一手間かかりますが、以下の流れで導入できます。
公式ダウンロードサイトへアクセス
まず、上記の公式サイトへアクセスし、サイト上部の「Download」ボタンをクリックします。
すると、以下のようなカスタマイズ画面が表示されるので、各設定項目を順に設定します。
Compression level
高度なカスタマイズをする予定がない限り、Compression level（圧縮レベル）は「Minified version」のままでOKです。
Themes
ベースとなるデザインを、8種類用意されているのテーマから選びます。（各テーマのリンクをクリックすれば、デザインを確認できます。）
また、好みのテーマがなくても、CSSを編集すれば後からデザインのカスタマイズも可能です。
Languages
よく使う言語にチェックを入れます。
ちなみに、私は以下を選択しました。
- Markup
- CSS
- C-like
- JavaScript
- Bash
- Batch
- PHP
- PowerShell
- Vim
Plugins
追加したい機能を選択します。
ちなみに、私は以下を選択したました。
- Line Numbers
- Show Language
- Toolbar
- Command Line
プラグインはたくさん用意されており、各プラグインのリンクをクリックすると、機能について説明したページが表示されるので、どんな機能か想像がつくと思います。
ファイルのダウンロード
ここまでの設定を終えたら、ページ下部に表示されている「Download JS」と「Download CSS」をそれぞれクリックして、JSファイルとCSSファイルをダウンロードします。
WordPress環境にファイルをアップロード
ダウンロードした二つのファイルを、テーマディレクトリ（子テーマがある場合は、子テーマディレクトリ）直下にアップロードします。
アップロードができたら、ファイルを呼び出す記述を「functions.php」に追記してください。
function my_prism() {
wp_enqueue_style( 'prism-style', get_stylesheet_directory_uri() . '/prism.css' );
wp_enqueue_script( 'prism-script', get_stylesheet_directory_uri() . '/prism.js', array('jquery'), '1.9.0', true );
}
add_action('wp_enqueue_scripts', 'my_prism');これで、Prism.jsが利用できるようになりました。
Prism.jsの使用例
Prism.jsを使った表示例をいくつか紹介します。
CSS（行番号あり）
表示：
h1 {
border-bottom: solid 3px black;
/*線の種類（実線） 太さ 色*/
}コード：
<pre class="line-numbers"><code class="language-css">h1 {
border-bottom: solid 3px black;
/*線の種類（実線） 太さ 色*/
}</code></pre>
コマンドライン（出力表示なし）
表示：
cd /usr/local/etc
cp php.ini php.ini.bak
vi php.iniコード：
<pre class="command-line language-bash" data-user="root" data-host="mysv"><code class=" language-bash">/usr/local/etc
cp php.ini php.ini.bak
vi php.ini</code></pre>コマンドライン（出力表示あり）
表示：
pwd
/usr/home/hoge/bin
ls -la
total 2
drwxr-xr-x 2 chris chris 11 Jan 10 16:48 .
drwxr--r-x 45 chris chris 92 Feb 14 11:10 ..
-rwxr-xr-x 1 chris chris 444 Aug 25 2013 backup
-rwxr-xr-x 1 chris chris 642 Jan 17 14:42 deployコード：
<pre class="command-line language-bash" data-user="hoge" data-host="mysv" data-output="2, 4-8"><code class=" language-bash">pwd
/usr/home/hoge/bin
ls -la
total 2
drwxr-xr-x 2 hoge hoge 10 Jan 10 16:48 .
drwxr--r-x 45 hoge hoge 95 Feb 20 13:10 ..
-rwxr-xr-x 1 hoge hoge 444 Aug 25 2013 backup
-rwxr-xr-x 1 hoge hoge 642 Jun 17 14:42 deploy</code></pre>PowerShell（出力表示あり）
表示：
dir
Directory: C:Usershoge
Mode LastWriteTime Length Name
---- ------------- ------ ----
d-r-- 10/14/2015 5:06 PM Contacts
d-r-- 12/12/2015 1:47 PM Desktop
d-r-- 11/4/2015 7:59 PM Documents
d-r-- 10/14/2015 5:06 PM Downloads
d-r-- 10/14/2015 5:06 PM Favorites
d-r-- 10/14/2015 5:06 PM Links
d-r-- 10/14/2015 5:06 PM Music
d-r-- 10/14/2015 5:06 PM Pictures
d-r-- 10/14/2015 5:06 PM Saved Games
d-r-- 10/14/2015 5:06 PM Searches
d-r-- 10/14/2015 5:06 PM Videosコード：
<pre class="command-line language-powershell" data-prompt="PS C:Usershoge>" data-output="2-19"><code class=" language-powershell">dir
Directory: C:Usershoge
Mode LastWriteTime Length Name
---- ------------- ------ ----
d-r-- 10/14/2015 5:06 PM Contacts
d-r-- 12/12/2015 1:47 PM Desktop
d-r-- 11/4/2015 7:59 PM Documents
d-r-- 10/14/2015 5:06 PM Downloads
d-r-- 10/14/2015 5:06 PM Favorites
d-r-- 10/14/2015 5:06 PM Links
d-r-- 10/14/2015 5:06 PM Music
d-r-- 10/14/2015 5:06 PM Pictures
d-r-- 10/14/2015 5:06 PM Saved Games
d-r-- 10/14/2015 5:06 PM Searches
d-r-- 10/14/2015 5:06 PM Videos</code></pre>あとがき
WordPressでコマンドやコードを分かりやすく色分けして表示したいときの実現方法として「Prism.js」も選択肢として十分におススメできます。
お試しあれ。