Enlighterの使い方【WordPress・プラグイン】

WordPressのプラグイン「Enlighter – Customizable Syntax Highlighter」の使い方を紹介します。Enlighterはプログラムのソースコードを、色付きで表示させることができます。数あるハイライター（highlighter）の中でシンプルに利用できるもの一つです。

Enlighterの説明の前に

GitHubのGistを利用すると、Enlighterよりも多くの人に見てもらえるかもしれません。設置も簡単ですので、もしよろしければご検討ください。

Githubのコードをホームページに埋め込む方法【Gist・手順付】

Enlighterの事前準備

WordPressのプラグインメニューから、「Enlighter – Customizable Syntax Highlighter」を検索してインストールしてください。デザイン等の変更もできますが、特にこだわりがなければ、デフォルトのままで問題ありません。

Enlighterの使い方

ソースコードをpreタグで挟んで、パラメータ「data-enlighter-language」に言語指定をします。

基本型（Null）

特に言語を指定しないときは、Nullを設定します。

入力

<pre class="EnlighterJSRAW" data-enlighter-language="Null">
--- Codes ---
</pre>

出力

-- Codes ---

例（CSS）

上記のNullの部分を、CSSに変更するとCSSのデザインで出力されます。

入力

<pre class="EnlighterJSRAW" data-enlighter-language="CSS">
body { background-color : #FEFEFE;}
</pre>

出力

body { background-color : #FEFEFE;}

対応言語

Enlighterは、以下の言語に対応しています。

コツ

Linuxシェルで利用する場合

Linuxのシェルコマンドを利用するときは”SHELL”です。highlighterなどでは”BASH”となると思いますが、enlighterでは”SHELL”です。

PHP、htmlの場合

「　<　」などの特殊文字の表示がうまくいかない場合は、&で始まる文字コードを利用します。

• <　…　&lt;
• >　…　&gt;
• & …　&amp;

ほとんどの場合、特殊記号は意識する必要はありませんが、例えば、PHPの最初の「<?php」のような、閉じタグが同一行にない場合などに利用する必要があるようです。

プログラムのソースコードをホームページに載せる方法

まとめ

WordPressでソースコードを色付きに表示させるためには、他にもhighlight.jsやCrayonが有名です。ただ、highlight.jsは、ソースの書き方によっては一行目が空行になることがあり、CrayonはWordPress4.2で更新が止まっています。Enlighterが現時点では最もおすすめです。