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

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

WordPressカスタマイズ, 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実装方法

インストール

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

WP Code Highlight.jsの紹介とインストール件数

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

Crayon Syntax Highlighterの紹介とインストール件数

50000人超と圧倒的です。

管理画面

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

1 CDNを選びます

2 CSSを選びます(省略可能)

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

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

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

その下の項目はショートコードで入力する場合です。
(通常は<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のあらゆ様、ありがとうございます。

今度こそ本当にまとめ

解答者の写真
SyntaxHighlighterプラグインにもついに、WP Code Highlight.jsというファイナルアンサー出たわね
本当に使い勝手いいから、よかったら乗りかえてみて!