Crayon Syntax Highlighterからhighlight.jsに乗り換える

はじめに

このブログのシンタックスハイライトにCrayon Syntax Highlighterというプラグインをずっと使って来ましたが、highlight.jsというJSライブラリに変更する事にしました。

理由

• だいぶ前から更新がない
• 不具合がある
• 重い
• 空白行に空白文字が入る（コピペする時にゴミが入る）

もし使い続ける場合

Crayon Syntax Highlighterは公式には更新がないものの不具合ヶ所を修正されたものがGithubにあったり、Crayon Syntax Highlighterをベースに作られたUrvanov Syntax Highlighterというプラグインがあったりします。

Crayon Syntax Highlighter 修正版

Urvanov Syntax Highlighter

highlight.jsの導入

highlight.jsはプラグインではないため、少し手間がかかりますが、できるだけ簡単な方法で導入してみました。

導入方法

できるだけ簡単にということで、今回はCDNによる読み込みで導入してみます。方法としては、functions.phpにライブラリを読み込むための関数を追記するだけです。

function laod_highlightjs() {
    wp_enqueue_style( 'highlight-style', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/default.min.css' );
    wp_enqueue_script( 'highlight-script', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js', '', '', true);
}
add_action('wp_enqueue_scripts', 'laod_highlightjs');

function init_highlightjs(){
    echo "<script>document.addEventListener('DOMContentLoaded', (event) => {document.querySelectorAll('pre').forEach(el => {hljs.highlightElement(el);});});</script>";
}
add_action('wp_footer','init_highlightjs');

注意点

上の関数をそのままコピペでも多分導入できますが、注意点が２つあります。

スタイルシート（css）

上のコードでは、色付けのためのcssとして、default.min.cssというデフォルトのスタイルシートを使っています。

背景色など自分好みの色にしたい場合は、default.min.cssのところを例えばvs2015.min.cssなどと書き換えます。ちなみのvs2015はこのブログで使っているスタイルです。

スタイルはたくさん用意されているので、気に入ったものを選択してください。

（公式）スタイルDEMO

（公式）cssファイル一覧

対象要素

公式では、スタイルを適用する対象の要素として、<pre><code></code></pre>のようにpreとcodeで囲うことが推奨されていてデフォルトになっています。

上のコードでは、preタグを対象とするようにカスタマイズしてあります。

そうすることで過去記事を書き換えることなく導入できる利点がありますが、もしコード以外の要素でpreタグを使っているとスタイルが当たってしまうので注意です。

使い方

導入時点で既に過去記事に適用されているかと思いますが、新規に記事を書く時には、１つ注意点があります。

preタグは中身をそのまま出力するタグなので、エスケープしないとコードとして認識されてしまいWP上では不具合が出ます。「HTMLエスケープ・ツール」などと検索すると変換してくれるサイトがたくさん出てくるので挿入前に変換しましょう。

新しいブロックエディタを使っている場合は<>マークのコード挿入ボタンを使うと自動的にエスケープされ、<pre><code></code></pre>という構造になるようです。

まとめ

今回はCrayon Syntax Highlighterから乗り換える際の一番簡単な方法をご紹介しました。

公式が推奨するように対象の要素をpreとcodeで囲った要素を対象にする場合は、上記のコードの代わりに下記のコードを使ってください。

function laod_highlightjs() {
    wp_enqueue_style( 'highlight-style', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/default.min.css' );
    wp_enqueue_script( 'highlight-script', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js', '', '', true);
}
add_action('wp_enqueue_scripts', 'laod_highlightjs');

function init_highlightjs(){
    echo "<script>hljs.highlightAll();</script>"; // ←ここだけ違う
}
add_action('wp_footer','init_highlightjs');

過去記事が<pre><code></code></pre>のような構造になっていない場合はすべて書き換えが必要です。