[WP]記事内のソースコードを見やすくハイライト表示するプラグイン「Enlighter」の設定、使い方とテーマ一覧！

Enlighterの使い方と設定方法

同系列のプラグインとして超有名なのが「Crayon Syntax Highlighter」ですが、古いようで更新が行われておらず、新エディターでも不具合が出るようですので却下。

「SyntaxHighlighter Evolved」というプラグインも良かったのですが、プログラムの一部（&&）が変にエスケープ処理されてしまう為、こちらも断念しました。

最終的にこちらのプラグインに決定したのですが、万が一旧エディターが使用できなくなっても「Gutenberg」に対応しているのでこれからのハイライトプラグインとしては非常にオススメです。

プラグインのインストール

執筆時R3.4.6時点ではプラグインが公開されていますので、
ダッシュボードのプラグイン ＞ 新規追加からインストールします。

管理画面左メニュー＞プラグイン＞新規追加

プラグインの新規追加で、検索窓に「Enlighter」と入力すれば出ます。
（Wordpress5.7では問題なく使用できています。）
インストールが完了したら早速有効化しましょう！

Enlighterプラグインの使い方

有効化するだけで使えますので、実際に使ってみます。

ソースコードを挿入するアイコン

記事を書くページにソースコードを挿入するショートカットが追加されます。
（旧エディターでも新エディターでもこのアイコンです。）

ソースコードの記述画面

先ほどのアイコンをクリックすると、ソースコードを記述する画面が表示されます。
コードを記述したら画像のように言語を選び、OKをクリックして記事内にソースを挿入するだけ！かんたん！

表示スタイルの変更

OKをクリックするとこんな感じに記事内にコードが挿入されます。
スタイルを個別に変更したい場合はビジュアルエディターでソースコードを挿入している部分の右上にあるペンマークをクリック。

表示スタイルの変更画面

するとこんな感じに言語やテーマを変更できます。
簡単にソースコードのハイライト表示の色合いを切り替えれるので非常に便利！

Enlighterによるコードのハイライト表示例

プレビューで確認するとこんな感じです。
このままでも全然使えますが、マウスオンでのハイライトやメニューが邪魔になるので少し設定を変更しましょう。

Enlighterプラグインのおすすめ設定

プラグインの設定画面はサイドバーの「Enlighter」から行えます。
インストール済みプラグインから行っても同様です。

Enlighter＞Appearance

コードの表示部分に関する設定「Appearance」を変更しましょう。

デフォルトテーマを決める、マウスオン時のハイライトを無効化する

この設定画面では挿入時に選択されているテーマを設定したり、見た目を変更することが可能です。

オススメの変更箇所は画像の赤枠。

自分が良く使うテーマを設定しておくとコードの挿入時にいちいち選択しなおさなくて良いので便利です。
また、マウスオン時のハイライト表示が邪魔なのでチェックを外します。

Theme

コードの挿入時に選択されているテーマを変更する。
自分のサイトに合って見やすいテーマに設定しておきましょう。

Code indentation

コードのインデントの設定。
初期値は4Spacesとなっていますが、長いコードを書く場合などは2Spacesなどに設定するとコンパクトに収まります。

Text overflow

横長のコードを折り返すか、スクロール表示にするかの設定。
多分Break lineにしておいた方が見やすい。

Line-numbering

ソースコードに行数を振るかどうか。

Line-hovereffect

ソースコードにマウスオンした時に行をハイライト表示するか。
逆に見にくくなるので、筆者はオフにしました。

RAW-Code on deubleclick

ダブルクリックで強調されていないコードを表示するかどうか。
オフで問題ないでしょう。

Appearance-Toolbar

ツールバーの設定

続いて画面上部のタブを「Toolbar」に切り替えます。
この画面ではマウスオン時のメニューの表示・非表示を設定できます。

画像の赤枠で囲っているところのチェックは外しましょう。
（メニュー内のEnlighterJSのウェブサイトへのリンクを非表示にします。）

Visibility

ツールバーの表示・非表示の設定。
デフォルトではマウスオンでツールバーの表示。

Raw code button

強調されていないテキスト状態のコードを表示するボタンを表示。

New window button

新しいタブでコードを表示。

Copy-to-clipboard button

クリップボードにコピーするボタンを表示。

EnlighterJS website button

EnlighterJSのWebページリンクを表示。

Options-DRI設定

僕がインストールした時はデフォルトでオフになっていました。
DRI（Dynamic Resource Invocation）の設定はオン推奨です。

この機能はソースコードが無いページではハイライト用のプラグイン専用CSSファイルを読み込まなくする機能で、オンにしておくとソースコードが無いページで不要なCSSが読み込まれなくなり軽量になります。

詳しくは別の記事に書きました。

その他の設定

その他にも設定がありますが、基本的にデフォルトでOKです！
とても長くなってしまうので、ここでは簡単にご紹介します。

Theme Customizer

ハイライトの線やボタン、プレーンコードなどなど各パーツのフォントや行の高さを個別に細かく設定できます。

Editing

新、旧エディターで使用できるように設定したり、ショートコードの使用を決めたりできる。

Compatibility

互換モードの設定。他のハイライトプラグインの表示コードをEnlighterで使えるようにできる。

Extensions

「更にロード」ボタンや無限スクロールに関する設定。

About

プラグインのウェルカムページを表示する。
非常に細かく設定できるようで、後から自分のサイトに合わせて自在にカスタムが可能です。

Enlighter_テーマ一覧

「Enlighter – Customizable Syntax Highlighter」で使用できるテーマの一覧です。

それぞれ試していただいて記事に一番合ったものをその都度使用していただければと思いますが、早見表も作ってみました。
（phpでの表示例。言語によって変わりますので参考までに。）
※クリックで拡大できます。

最後のカスタマイザーはカスタム用ですのでプレーンテキストっぽくなってます。
これだけあれば十分ですね！

対応言語

最後に対応言語ですが、執筆時50以上のプログラム言語に対応しています。
C言語、CSS、HTML、Java、PHP、Python、Rubyなどなど、主流のプログラミング言語は網羅しているといっても過言ではないでしょう。
詳しくは公式ページをご確認ください。

プラグインの不備？

2021.6.8追記です。
先日スマートフォンでEnlighterで挿入したJavascriptのソースコードを確認したところ、ソースコードの端が見切れてしまっていました。
パソコン表示でもブラウザの画面サイズを絞ると同様に見切れます。

このプラグインを長く使う予定であれば確認しておいた方が良いです。
対処法は下の記事にまとめましたので是非ご参照ください。

まとめ

Wordpressで記事内のソースコードを見やすくしてくれるプラグイン「Enlighter – Customizable Syntax Highlighter」の紹介でした！
当サイトではハイライトテーマは「Monokai」がしっくりきそうなのでコチラに設定しておきました。
ソースコード挿入時に見た目をその都度変更でき、後からでも変更できるので非常に便利です。