あるSEのつぶやき・改

ITやシステム開発などの技術に関する話題を、取り上げたりしています。

Crayon Syntax Highlighterの移行先代替プラグインはEnlighterに決まりでしょ

はじめに

今まで WordPress でプログラムのソースコードをキレイに表示するプラグインといえば Crayon Syntax Highlighter でした。

Crayon Syntax Highlighter は、サポートする言語が非常に多く、表現も美しく、これぞ定番という感じでした。

Crayon Syntax Highlighter

ただ、このプラグインの最終更新日は4年前なんですよね。。。

最終更新日

さすがに4年前の更新だと、WordPressとの互換性も心配だし、さらにセキュリティ的に大丈夫か不安になります。実際、PHP 7に上げた時、エラーを吐き出して対応が必要でしたしね。

で、 Crayon Syntax Highlighter の移行先として代替となるプラグインを探してみたのですが、Enlighter がとってもよさ気でした。

ja.wordpress.org

表現力は、さすがに Crayon Syntax Highlighter よりは劣るのですが、Enlighter は Crayon Syntax Highlighter の互換機能を持っていて、移行作業が必要ありません。大量の記事を持っている身としては、とても魅力的な機能です。

また、表現力も設定をいじればなかなかのものです。

こんな感じです。

Enlighter

また、更新頻度も高く、今日時点(2020/08/07)では、最終更新日が3日前でした。

評価も高いですね。

最終更新日

この記事では、Enlighter で Crayon Syntax Highlighter で作成したコードを互換機能を使用して表示するための設定をご紹介します。

Crayon Syntax Highlighter 互換モードの有効化

まず、Enlighter をインストールする必要がありますが、単純にプラグインの新規追加で「Enlighter」と検索し、最初に出てきたものをインストールし有効化するだけです。

この時に、Crayon Syntax Highlighter のプラグインを無効化するのを忘れないでください。そうしないと表示上問題が起きる可能性があります。

それから、互換モードを有効にします。

Enlighter のメニューの Compatibility をクリックします。

メニュー

Compatibility Mode タブの Compatibility mode を Enable にして、「変更を保存」します。

互換設定

Crayon タブの Compatibility mode で、Crayon を Enable にして、「変更を保存」します。

Crayon互換機能設定

これで、Crayon Syntax Highlighter の互換モードが有効になりました。

表示のカスタマイズ

デフォルトだと、ほぼ真っ白な表示になってしまうので表示をカスタマイズします。

Enlighter のメニューの Appearance をクリックします。

メニュー

Appearace タブの設定項目をすべて変更します。

表示設定

Theme は Classic にします。テーマですね。

Code indentation は 2 Spaces にします。コードのインデントですね。

Text overflow は Add scrollbar にします。コードが画面サイズを超えた時にスクロールバーを表示します。

Line-numbering は 無効にします。ナンバリングを表示すると、余白が大きくなりすぎるためです。

Line-hoverefect は 有効にします。マウスがコードに上に来るとハイライト表示するようになります。

RAW-Code on doubleclick は有効にします。ダブルクリックすると修飾なしの表示になります。

「変更を保存」します。

Toolbar タブでは、ツールバーの表示設定ができますが、こちらはお好みで。自分は非表示にしましたが。

これで、コードを表示すると、こんな感じになりました。

Enlighterの表示設定結果

なかなかいい感じですね。

移行作業なしでこれなら大満足です。

おわりに

Crayon Syntax Highlighter の移行先の代替プラグインとして Enlighter をご紹介し、互換モードの設定方法についてもご紹介しました。

今では、Crayon Syntax Highlighter は互換性やセキュリティ的に不安が大きいので、できるなら Enlighter への移行をオススメします。