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

本稿は「Highlight.js」によるカスタマイズの紹介です。
現在「Crayon Syntax Highlighter」を使っている方は、乗り替えるだけでかなりの高速化が図れます。

【2020/2/1追記】

元々はWordPressプラグイン「WP Code Highlight.js」の紹介記事でした。
残念ながら「WP Code Highlight.js」はセキュリティ上の理由により公開停止となりました。
従って本家の「Highlight.js」の紹介に書き換えました。

js・cssのレンダリングブロックを排除する　～PageSpeed InsightsとGTmetrixのスコアを改善してみる（第２回）　

2016.12.292023.01.25

著者情報（この記事を書いた人）をプラグインなしで設置する（2020年増補改訂）

2016.12.232021.04.25

カテゴリページを小説コーナーの目次がわりにする　～記事並び順の昇降を入れ替える【WordPress】

2015.04.172021.04.25

WordPressプラグインJetpackのCSSを読み込ませない方法（新版）

2020.01.292021.04.25

激重のCrayon Syntax Highlighter

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

しかし、

例えば、私の使っているテーマLuxeritasの作者るな様。

有名だけど個人的に使いたくないWordPressプラグインTOP3 | Thought is free

個人的に使いたくないのは、 重くて遅い 動作が怪しい デバッグするとエラーは出ないが、警告がでまくる（妥協することもある） 推奨されてないクラスや関数を使ってる（妥協することも多...

thk.kanzae.net

私の検証記事はこちら。

「SyntaxHighlighter」WordPressプラグインの役割、負荷の比較

本記事の内容は色んなSyntaxHighlighterプラグイン（Crayonなど）のレビュー・負荷比較、結論として推薦するWP Code Highlight.jsの説明です

kimoota.net

2016.12.21

実はCrayonに限らず、この手のプラグインはどれも重いんですよね。

高速なHighlight.js

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

highlight.js

A syntax highlighter written in JavaScript supporting 192 languages for Node.js and the web.

highlightjs.org

説明は割愛しますが間違いなく軽いです。
Crayonなんて比較にもなりません。

Highlight.jsの実装方法

CDNとローカルのどちらでも読み込めます。
私はローカルで読み込んでいます。
自分の環境に合わせて書き換えてください。

デザインを決める

公式サイトへ行きます。

①をクリックすると、CSSデモが切り替わります。
②をクリックすると、さらにたくさんのCSSのデモが見られます。

たくさんある中から使うCSSを選んでください。
気に入ったCSSの名前は控えておいてください。

私が使っているのは「school-book」です。
（日本語翻訳されている場合は「教科書」。

ダウンロード

上記画像の③をクリックします。
開いたページの一番下まで下がります。

ダウンロードをクリックすればファイル入手できます。

CSS

まずは公式のやり方。
次のコードをヘッダーに追加してください（CDN）。
「default」の部分は、使いたいCSSの名前に書き換えます。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/default.min.css">

私のとっている方法はこちら（ローカル）。

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/school-book.css" media="print" onload="this.media='all'">

非同期で読み込ませています。

スクリプト

まずは公式のやり方（CDN）。
次のコードをフッターに追加してください。

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>

私のはこちら（ローカル）。

<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>

本来は<pre><code>で囲みますが<pre>だけでハイライトされるようになります。
こちらの記事で紹介されていました。

ソースコードをハイライトする軽量ライブラリ、Highlight.jsの使い方

ソースコードをハイライトして見やすく表示するには、Highlight.jsが、軽量でバグもなく、お勧めです。

syncer.jp

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

まとめ

WP Code Highlight.jsが公開停止になったのは心から残念……
でも本家の設置もやってみると簡単だから、ぜひ！