最近よく読んでいただいてるページはこちら

軽くてお手軽 WP Code Highlight.js|Crayon Syntax Highlighter からの移行

2017.7.11

Crayon Syntax Highlighter やめました。
デザインがかわいいから入れていたプラグインですが、重いと評判。知ってて使ってたんだけど。

WordPressテーマの変更にともない、せっかく表示の速い Luxeritas にしたんだもの、と、乗り換えしました。
WP Code Highlight.js なら、互換性がある! 移行はかんたんにできました。

はじめに

STINGER8 のときに入れまくって遊んでたプラグインの整理をしています。

当ブログではほとんどないのですが、コードを表示させるのに、Crayon Syntax Highlighter を使っていました。
かわいさで選んだものですが、とても重いらしい。
Luxeritas 作者、るなさんもこうおっしゃってます。有名だけど個人的に使いたくないWordPressプラグインTOP3

検証してくださってる方もいらっしゃるので、詳しくは SyntaxHighlighterプラグインの役割、負荷の比較 をのぞいてみてください。

上記検証をしてくださってる 天満川さんが、軽いと紹介してくださってるのが、WP Code Highlight.js でした。
WP Code Highlight.jsに乗り替えて高速化、重いCrayonを捨てる

そっちにするですにゃの

プラグインの設定

インストールして、有効化後、管理メニューWP Code Highlight.js から設定していきます。

以下、画像はクリックで全体が表示されます。

CDN

最初でつまずきました。

しーでーえぬってなんですにゃの?

こちらに説明がありました。プラグインWP Code Highlight.jsでWordPressにソースコードを素早く表示する方法
葉さんも、Crayon だったみたいですね。

Public CDN:cdnjs(highlightjs.org recommend)』を選択します。

 

Package

赤丸の部分は、私の環境では選択できるようになっていませんでした。そのままで。

その下、『Support List: 』は、そのままにしてあります。

 

Color Scheme

デザインを選びます。
highlight.js demo でサンプルを見ることができます。いっぱいある。
私は『Vs』を選びました。

 
『Highlight.js Option – Tab replace』と『You can add some additional CSS rules for better display』は、そのままにゃので省略するですにゃの

乗り換えのばあい

これ! 移行してくれるの!
使用中のプラグインが、Syntax Highlighter Compatiable か、Prettify Compatible か、Crayon Syntax Highlighter Compatiable のばあいは、該当するものにチェックを入れます。

 
素晴らしいですにゃの

ショートコードを使いたいばあい

ショートコードを使いたいばあいは、チェックをしておきます。
というか、ショートコードを使って書いた方が、表示が崩れなくていいみたいです。

 

2017.8.15 追記

私には原因がわからないのですが、ショートコードでは、コードが表示されませんでした。
< pre >< code >〜< /code >< /pre > で囲ったら、表示されました。が、記述するコードの< >を &lt、&gt に変換してあげなければならず、
こちらのサイト→ HTML表示文字変換 も、使うことになりました。

これで終わりですにゃ。『Save』押してくださいにゃの。

反映の確認

Save した後、反映されてるかどうか、コードを記載してあるページで確認しました。


変わってないにゃん…

Creyon が、そのままなので変わりません。停止します。


変わったにゃ!

無事に移行できたので、Creyon を削除しました。

さいごに

かわいいんだけど重い Crayon から、WP Code Highlight.js への乗り換えは、チェック一発!で、かんたんでした。

サイコーですにゃ

WP Code Highlight.js のデメリットとしては、

  • ここだけは変えたいと思っても、デザインわけができなくなった。
  • コードの全部が表示されてしまう。
  • コピーボタンなどがついていない。

Creyon と比べると、ですけれど。
当ブログではなが〜いコードを記載することは、ほぼありませんし、まぁこんなもんでじゅうぶんかなと思います。

重いのを、かんたんに軽いのにできただけでいいですにゃの

使っていたプラグインを削除した後は、お掃除をお勧めします。
バックアップをとってから、どうぞ。
WPのお掃除してますか?ゴミはお任せ WP-Optimize と Plugins Garbage Collector