Crayon Syntax Highlighterの代替えプラグイン!互換モードでCrayonのコードがそのまま使える!

Crayonから他のプラグインに乗り換えようと考えている方におすすめの代替えプラグインをご紹介!
以前までは「Crayon Syntax Highlighter」が圧倒的支持率でしたが、更新が途絶えてしまっているため時間とともに使えなくなってきました。

また、新エディター「Gutenberg」が登場したことでもハイライト系プラグインを見直している方は多いのではないでしょうか?
そんな時に「Enlighter – Customizable Syntax Highlighter」がオススメです。

過去の記事に使用しているCrayonのコードを自動で解析し、このプラグインのスタイルを自動で当ててくれます!過去記事の修正が不要!

Crayonの代替えプラグインEnlighter_001

Crayonの相互モードでコードがそのまま使用できる。

「Crayon Syntax Highlighter」を削除しても使えます。

Crayonの代替えプラグインEnlighter

超人気だったCrayonは数年前に開発を辞める旨が発表され、更新が止まっています。

執筆時、最終更新から5年が経過しておりWordpressのバージョンアップ、PHPのバージョンアップによって現在のバージョンでは使えません。
(プラグインの新規追加にありますが、更新に失敗しましたと出ます。)

その後、海外の有志の方が開発を続けているようで、そちらを使用すれば使えないことはないです。

しかしながら今後のアップデートを考えるとソースコードのハイライト表示に使用するプラグインはCrayonから他のプラグインに変更しておく方が吉です。
(アップデート時にサイトエラーが発生してしまう可能性があります。)

Crayonから乗り換えるわけですが、今後も長く使っていけるプラグインということで新エディターGutenbergおよび、旧エディターの両方で使用できることが最低条件となります。

Enlighterがオススメの理由

・新、旧どちらのエディターでも使用可能。
・Crayon Syntax Highlighterの互換モード搭載。
・50以上のプログラム言語に対応。
・10数種類のテーマからハイライトの色合いを選択可。
・挿入個所ごとにテーマを選択でき、見やすさ調整抜群。
・設定項目が豊富でカスタム性も〇。
・更新頻度がこの手のプラグインにしては高め。

しばらく使っていますが不満な点はないです。
使い方はCrayonに似ていて、専用のコード入力画面がエディター内に追加されます。

プラグインのインストールと設定

プラグインのインストールと設定方法は別の記事にまとめましたので、
この記事で"導入してみよう"と思った方はそちらをご覧ください!

Crayon Syntax Highlighterから乗り換える方法

CrayonからEnlighterに乗り換えるのは簡単で相互モードをONにするだけです!

「Enlighter – Customizable Syntax Highlighter」をインストールして有効化し、
管理画面左メニュー > Enlighter > Compatibilityに進みます。
Crayonの代替えプラグインEnlighter_003Compatibility mode(相互モード)をオンにします。

下のFilter targetsで相互モードの適応範囲を指定することが出来ますが、Crayonを使っているのは記事本文だと思いますので初期設定でOKです。
(the_content:投稿・the_excerpt:抜粋)

Crayonの代替えプラグインEnlighter_004続いて画面上部タブを「Crayon」にし、CrayonのチェックボタンをONにします。

変更を保存すればCrayonで使用していた<pre>コードなどが自動判別され、Enlighterによってハイライト表示がされるようになります。

記事内にコードがあればEnlighterによって自動判別され、スタイルもこのプラグインのものが使用されるため、Crayonは削除してもOKです!

プラグインの設定方法やテーマの一覧は先ほどの関連記事をご覧ください。

まとめ

現在使用できるハイライト系プラグインの中でも利用者が増えてきている「Enlighter – Customizable Syntax Highlighter」のご紹介でした。
「Crayon Syntax Highlighter」の代替えプラグインとしてもCrayon専用の相互モードを備えているので簡単に乗り換えることが可能です。

WordPressのプラグインは導入が簡単ですが、使えなくなると少し困ります。

ソースコードのハイライト表示は比較的簡単なライブラリで実装できますので、直接JSファイルを読み込んで実装する方法もアリですね。

-Wordpress
-

© 2021 ソロ学