WP Code Highlight.jsに乗り替えて高速化、重いCrayonを捨てる

2017-03-012018-05-06WordPressカスタマイズ, WordPressプラグイン

本記事はWordPressプラグイン「WP Code Highlight.js」の紹介です。
現在「Crayon Syntax Highlighter」を使っている方は、乗り替えるだけでかなりの高速化が図れます。

激重のCrayon Syntax Highlighter

コード入力に欠かせないSyntaxHighlighterプラグイン。
その代表格と言いうるのが「Crayon Syntax Highlighter 」（通称クレヨン or Crayon）、多くの方が使っているのではないかと思われます。

しかし、このCrayonは重い！　とにかく重い！
例えば、私の使っているテーマLuxeritasの作者るな様。

私の検証記事はこちら。

Crayonに限らず、どれも重いんですけどね……。

高速なHighlight.js

そこで評判になったのが、

説明は割愛しますが間違いなく軽いです。

しかし導入にはスクリプトとCSSをヘッダーやフッターで読み込ませないといけない。
コードを触るのが嫌で、導入したくとも躊躇していた方もいらっしゃると思います。
Crayonが根強い人気を誇るのはそのせいもあるでしょう。

簡単にHighlight.jsを実装するWordPressプラグイン「WP Code Highlight.js」

しかし、そんな方に朗報。
なんとHighlight.jsがWordPressプラグインになっていました。

「WP Code Highlight.js」をインストールすることで、コードの変更なしにHighlight.jsの実装が可能となります。
装飾もいっぱい揃っている中から選べます。
これでCrayonにしかないデザインが使いたい方、行数表示が必要な方、ツールバーが必要な方以外にはCrayonが用無しとなります。

WP Code Highlight.js実装方法

インストール

公式でプラグインを検索してインストールします。

まだ1000件ちょいなんですねえ……。
対するCrayon。

50000人超と圧倒的です。

管理画面

数クリックで終わります。

１　CDNを選びます

２　CSSを選びます（省略可能）

いっぱい種類がありますので、ゆっくり後で選んでください。
私は「schoolnote」を使っています。

３　元々使っていたプラグインをチェックする（なければ省略）

主だったプラグインとは互換性があります。
使った場合はチェックをいれてください。

その下の項目はショートコードで入力する場合です。
（通常は<pre><code>～</code></pre>と入力します）

これで終わりです。

Highlight.jsをpreタグだけで使う方法

プラグインではなく、スクリプトで実装している方限定。
ソースへのスクリプト部分の記述を次のようにすれば、preタグだけでハイライトできます。

<script src="<?php echo get_stylesheet_directory_uri(); ?>/highlight.min.js"></script>
<script>
jQuery(document).ready(function($) {
 $('pre').each(function(i, block) {
 hljs.highlightBlock(block);
 });
});
</script>

使いやすくなりますよ～。
上記コードはこちらの記事で紹介されていました。

syncerのあらゆ様、ありがとうございます。

追記　スクリプトかつLuxeritas2.xをお使いの方へ

動かない場合は、管理画面LuxeritasタブのJS設定を次の通り変更してください。

3.0以降はハイライト機能実装予定だそうです。

今度こそ本当にまとめ