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

WordPressのプラグイン「Enlighter – Customizable Syntax Highlighter」の使い方を紹介します。Enlighterはプログラムのソースコードを、色付きで表示させることができます。数あるハイライター(highlighter)の中でシンプルに利用できるもの一つです。
Welcome to Enlighter
  • highlight.jsのような一行目の空行が発生しない。
  • Crayonとは異なり、アップデートされている。
  • 簡単。

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は、以下の言語に対応しています。

  • AVR Assembly
  • Generic Assembly
  • C
  • CSS
  • C#
  • C++
  • Cython
  • Diff
  • Generic
  • HTML
  • Ini
  • JSON
  • Java
  • Javascript
  • Kotlin
  • LUA
  • MarkDown
  • Matlab
  • NSIS
  • PHP
  • Python
  • RAW
  • Ruby
  • Rust
  • SQL
  • Squirrel
  • Shell
  • VHDL
  • XML

コツ

Linuxシェルで利用する場合

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

PHP、htmlの場合

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

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

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

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

まとめ

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