※当サイト一部記事にはP Rが含まれます

Crayon Syntax Highlighter⇒Enlighterに乗り換え!WordPressブログでソースコード記述!

TIPS
この記事は約5分で読めます。

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の方が便利な面もあるのですけど・・・。

20151110_CrayonSyntaxHighlighter

 

なお、WordPressのテーマがCocoonの場合や、テーマ自体やサーバ自体にキャッシュ機能がある場合は、上手く表示されないことがあります。

その場合は、キャッシュ機能を無効化するか、あるいは以下あたりを除外設定してやると上手く動くようになるはずです(ググってみたところ、同じ悩みでつまずいてた方が多いようでノウハウがたくさんありました。参考にさせていただきました。)。

・/plugins/enlighterフォルダ

・EnlighterJS.min.js

・mootools-core-yc.js

 

なお、Cocoonの場合は、ソースコードを表示するだけなら、Cocoonに付いてるhighlight.jsをONにした方が良いかもです。

まあ、これだとソースコードを選択・ハイライトしたりできないようなので、だいぶ機能が制限されるのですけど・・・。

<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は便利なプラグインを好きに組み合わせて、自分好みのブログを作れるのが魅力ですよね。

WordPressと無料ブログサービスで悩む?特徴を簡単に整理。もう答えは決まってるのでは?
費用とメリットデメリットを整理。後悔しない選択をするために初心者が理解しておくべきポイントを整理。 ブログに興味を持っている人も増えてきていると思います(アフィリエイトやアドセンスで稼ぐ人も増えていることが影響しているのかも)。 本記事では...
コスパ最強と噂のシン・レンタルサーバーでWordPressブログを始める!
※本記事は、エックスサーバー株式会社の提供を受けています。 性能と安さを兼ね備えたエックスサーバー姉妹サービス「シン・レンタルサーバー」とは? 「シン・レンタルサーバー」は月額料金が手頃で利用できるレンタルサーバーサービスです。 国内シェア...
稼ぐ!個人ブログ向けレンタルサーバー5社比較!WordPressコスパ最強で選ぶなら?
ブログで稼ぎたい個人におすすめのレンタルサーバーは?大手5社を徹底比較してみた 「ブログサービスに頼らず、自分だけのドメインで個人ブログを立ち上げたい」 そう思いついたらまず必要になるのが、ブログ記事を保管する家の役割を担う『サーバー』です...