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

2017-03-01WordPressカスタマイズ, 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タグだけでハイライトできます。

<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のあらゆ様、ありがとうございます。

今度こそ本当にまとめ