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

2021-04-06

Enlighter–Customizable_Syntax_Highlighterの使い方6

WordPressでサイト運営をしていてHTML、CSSやJavaといったソースコードを記事の中に書き込むことが多いので、コードを見やすく表示してくれるプラグイン「Enlighter – Customizable Syntax Highlighter」を導入しました。

旧エディターのビジュアルエディター、新エディターの「Gutenberg」の両方に対応しているところがこのプラグインに決めた一番の理由です。

使い方も簡単で、エディター内で専用のショートカットを呼び出し、コードを記述してスタイルを決定するだけで記事にソースコードが綺麗に埋め込めます!

Highlighter系プラグインは更新頻度が少ないのがネックですが、このプラグインはまだ更新頻度が高い方かと思います。

Enlighterの使い方と設定方法

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

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

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

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

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

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

Enlighterプラグインの使い方

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

Enlighter–Customizable_Syntax_Highlighterの使い方2

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

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

Enlighter–Customizable_Syntax_Highlighterの使い方3

ソースコードの記述画面

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

Enlighter–Customizable_Syntax_Highlighterの使い方4

表示スタイルの変更

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

Enlighter–Customizable_Syntax_Highlighterの使い方5

表示スタイルの変更画面

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

各テーマのサンプル画像は下にまとめてますので是非ご参照ください!

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

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

プラグインの設定画面はサイドバーの「Enlighter」から行えます。
インストール済みプラグインから行っても同様です。
Enlighter–Customizable_Syntax_Highlighterの使い方7コードの表示部分に関する設定「Appearance」を変更しましょう。

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

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

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

Theme

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

Code indentation

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

Text overflow

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

Line-numbering

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

Line-hovereffect

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

RAW-Code on deubleclick

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

Appearance-Toolbar

Enlighter–Customizable_Syntax_Highlighterの使い方9続いて画面上部のタブを「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で使えるようにできる。

Crayonからこのプラグインに乗り換える場合はコチラから一発です!

Extensions

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

About

プラグインのウェルカムページを表示する。

非常に細かく設定できるようで、後から自分のサイトに合わせて自在にカスタムが可能です。
が、普通にソースコードの一部を記事内に埋め込む場合には「Appearance」と「Options-DRI」の設定だけで十分です。
JSファイルもフッター読み込みにデフォルトで設定されているので、極力サイトが重たくならない工夫もされていました。

Enlighter_テーマ一覧

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

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







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

対応言語

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

プラグインの不備?

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

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

Enlighter_ソースコードが見切れる_001
[解決]Enlighterプラグインで記事に挿入したソースコードがスマホなどで見切れてしまう。

続きを見る

まとめ

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

-Wordpress
-

© 2021 ソロ学