Highlight.jsに乗り替えて高速化、重いCrayonを捨てる
本記事はWordPressプラグイン「WP Code Highlight.js」の紹介です。
本記事は「Highlight.js」の紹介です。
現在「Crayon Syntax Highlighter」を使っている方は、乗り替えるだけでかなりの高速化が図れます。
【2020/2/1追記】
残念ながら「WP Code Highlight.js」はセキュリティ上の理由により公開停止となりました。
従って本家の「Highlight.js」の紹介に書き換えました。
激重のCrayon Syntax Highlighter
コード入力に欠かせないSyntaxHighlighterプラグイン。
その代表格と言いうるのが「Crayon Syntax Highlighter」（通称クレヨン or Crayon）、多くの方が使っているのではないかと思われます。
しかし、
例えば、私の使っているテーマLuxeritasの作者るな様。
http://thk.kanzae.net/net/wordpress/t3159/私の検証記事はこちら。
https://kimoota.net/syntaxhighlighter/実はCrayonに限らず、この手のプラグインはどれも重いんですよね。
高速なHighlight.js
そこで評判になったのが、
https://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>だけでハイライトされるようになります。
こちらの記事で紹介されていました。
https://syncer.jp/how-to-use-highlightjssyncerのあらゆ様、ありがとうございます。
さらに私の場合、後者のスクリプトもjsファイルにして、Luxeritas（テーマ）の機能でHighlight.jsと結合させて非同期で読み込んでいます。
そうしないとjQueryを非同期で読み込ませた場合、エラーになるので。
（つまり、実際にはフッターに書いていません）
簡単にHighlight.jsを実装するWordPressプラグイン「WP Code Highlight.js」
しかし、そんな方に朗報。なんとHighlight.jsがWordPressプラグインになっていました。
https://ja.wordpress.org/plugins/wp-code-highlightjs/「WP Code Highlight.js」をインストールすることで、コードの変更なしにHighlight.jsの実装が可能となります。装飾もいっぱい揃っている中から選べます。これでCrayonにしかないデザインが使いたい方、行数表示が必要な方、ツールバーが必要な方以外にはCrayonが用無しとなります。
WP Code Highlight.js実装方法
インストール
公式でプラグインを検索してインストールします。
まだ1000件ちょいなんですねえ……。対するCrayon。
50000人超と圧倒的です。
管理画面
数クリックで終わります。
１ CDNを選びます
２ CSSを選びます（省略可能）
いっぱい種類がありますので、ゆっくり後で選んでください。私は「schoolnote」を使っています。
３ 元々使っていたプラグインをチェックする（なければ省略）
主だったプラグインとは互換性があります。使った場合はチェックをいれてください。
その下の項目はショートコードで入力する場合です。（通常は<pre><code>～</code></pre>と入力します）
これで終わりです。
今度こそ本当にまとめ
でも本家の設置もやってみると簡単だから、ぜひ！
広島市内のパチンコホール勤務。
３号機時代からのパチンカス。
ADHD、精神障害者手帳３級所持。
慶應義塾大学商学部→国家一種経済職→公安調査庁。
在職時は国際テロ、北朝鮮を担当。
「小説家になろう」の底辺作者。
朝鮮総聯へのスパイ工作を描いた小説「キノコ煮込みに秘密のスパイスを」はアマチュア小説ながら週刊誌報道され、話題となった。