WordPressソースコード記述プラグイン「Crayon Syntax Highlighter」はエラー吐きまくりでもうダメ・・・
WordPressブログでソースコード表示するのに便利なプラグイン「Crayon Syntax Highlighter」ですが、もう長いこと更新されていないため、上手く表示されなかったり機能が動かなくなることが増えました。
PHP7の段階で既にちょっとおかしかったので、ちょっと手を入れて動かしていたのですが、PHP8でまた動かなくなったので、もうこのプラグインは諦めることに。。
まあ、なんかもうWordPressのブログ自体がエラーで表示されなくなっちゃいましたので・・笑。これはもうダメだなと笑。
WordPressブログは便利なのですが、更新されていないプラグインを長く使い続けると、使えなくなったりセキュリティの問題が出てきたりするのが面倒ですよね・・・。
そこで今回、「Enlighter – Customizable Syntax Highlighter」というプラグインに乗り換えることにしました。
「Enlighter – Customizable Syntax Highlighter」プラグインの使い方！ソースコードを記述するブロガーに最適
今回プラグインとして入れたのは「Enlighter – Customizable Syntax Highlighter」。
いつもどおり、WordPressの管理画面の「プラグイン」から新規インストールすればOKです。インストールしたら有効化しましょう。
そして、使い方は簡単、ブログ記事を書くときにソースコードボタンを押しましょう。
すると、以下のようなダイアログが表示されるので、対象のプログラム言語を選択して、ソースコードを書き込めばOK。
ちなみにCrayon Syntax Highlighterは以下みたいな画面でした。
Enlighterの方が簡潔で簡単に設定できるので、なかなか良いかも。機能的にはCrayon Syntax Highlighterの方が便利な面もあるのですけど・・・。
なお、WordPressのテーマがCocoonの場合や、テーマ自体やサーバ自体にキャッシュ機能がある場合は、上手く表示されないことがあります。
その場合は、キャッシュ機能を無効化するか、あるいは以下あたりを除外設定してやると上手く動くようになるはずです（ググってみたところ、同じ悩みでつまずいてた方が多いようでノウハウがたくさんありました。参考にさせていただきました。）。
・/plugins/enlighterフォルダ
・EnlighterJS.min.js
・mootools-core-yc.js
なお、Cocoonの場合は、ソースコードを表示するだけなら、Cocoonに付いてるhighlight.jsをＯＮにした方が良いかもです。
まあ、これだとソースコードを選択・ハイライトしたりできないようなので、だいぶ機能が制限されるのですけど・・・。
<html>
<DIV>
<!-- aaaaaaa -->
<SPAN>aaaaa</SPAN>
</DIV>
</html>
単純にソースコードを表示するだけなら複雑な機能はいらないので、上手く使い分けしたいところです。
WordPressでソースコード記述するなら美しく！CodePen等のサービスを使うのも手
highlight.jsにしろ、Crayon Syntax Highlighterにしろ、Enlighterにしろ、
やっぱ、こういうのを使うと、キレイに表示できますね(∩´∀｀)∩
変に自分で手動でhtmlを組んでソースコードをキレイに表示させようとするよりも、はるかに簡単で手軽です。
ちなみに、CodePenに記述してブログに埋め込んだり、Github/Gistを使って埋め込んだり、他にもブログにソースコードを表示する方法もあります。
これにもメリット・デメリットあるのですが、やはり表示がちょっと遅いのが気になるんですよね・・・。コレです↓。機能も充実で超便利なんですけどね。
See the Pen
Tower of climbing cubes – Live coding session by Amit Sheen (@amit_sheen)
on CodePen.
まあ、記事内に1個くらいあるくらいなら、そんなに負荷にはならないと思うんですけど、PageSpeed Insightsとかで調べると、やっぱあんまりSEO的には良く無さそうだなと・・・。
これも、上手に使い分けしたいところなんですけど。
Enlighterは、ブログでソースコードなどを書く機会のある方には、めっちゃおすすめです！
WordPressは便利なプラグインを好きに組み合わせて、自分好みのブログを作れるのが魅力ですよね。
