Highlight.jsに乗り換えました

2016年6月11日Web-log・ココログ関連,WordPress

本ブログには、各種スクリプトや設定ファイルを表示させています。見やすい表示にするためにシンタックス・ハイライトを採用しています。最初はSyntax Highlighter、次はCrayon Syntax Highlighterを使いました。

Syntax HighlighterはJavaScript/CSS最適化ツールと相性が悪く、使用を中止しました。

ソースコード表示をCrayon Syntax Highlighterに乗り換えました

次に利用したのは、Crayon Syntax Highlighterです。最適化ツールとの組み合わせも問題なく、対応言語も多く気にいって使ってました。ただ、プラグインが重いのです。P3(Plugin Performance Profiler)で調べると一目瞭然です。プラグイン全体の2割を占めています。これは見過ごせません。(本当は、JetPackがめちゃくちゃに重いのですが、外せません。)

そんな時に見つけたのがhighlight.jsです。動作が軽いのです。対応言語も多いです。

highlight.js

WordPress対応プラグインもありました。プラグインの説明には、「Crayon Syntax Highlighter互換」とありましたが、うまく使いこなせませんでした。

WP Code Highlight.js — WordPress Plugins

highlight.js自体は、JavaScriptとCSSを読み込むだけで使える様になります。シンタックス・ハイライトするためには、ハイライトしたい部分を<pre><code>〜</code></pre>で囲む必要があります。ハイライトしたい部分は既にCrayon Syntax Highlighter用のショートコードのりタグで囲んであるのでなんとか利用したいところです。実際には、[php]〜[/php]と、言語指定して使っています。

最初は対応するショートコードを<pre><code>に置き換えるプラグインを作りました。うまく動きましたが、プラグインとしてめちゃくちゃ遅くなってしまいました。対応する言語の数だけ、本文を繰り返し検索・置き換えしているので当たり前です。多分、Crayon Syntax Highlighterも同じ理由で遅いのではないでしょうか?

複数のショートコードを使っているのが悪いと思い、[crayon lang="php"]〜[/crayon]と言う書き方に変えました。この書き換えは、Search Regexプラグインを使いましたが、半分手作業です。書き換えた後でも、Crayon Syntax Highlighterは重いままでした。

仕方ないので、ショートコードの再利用と高速化(軽量化)を両立させるために、自分で対応させる事にしました。最初、JavaScript/CSS最適化ツールのAutoptimizeと相性が悪かったのですが、いろいろ試して、これも解消しました。ショートコードを処理している部分を抜粋して掲載します。

/**
 * Shortcode for this plugin.
 *
 * This function converts [crayon] shortcode to <pre><code> tags.
 *
 * @since 0.1.0
 *
 * @param type $content shortcode content
 * @return type reformatted content
 */
function crayon_hljs_sc_crayon( $atts, $content = null ) {
    $a = shortcode_atts( array(
        'lang' => '',
        'url' => '',
        'title' => '',
        'mark' => '',
        'range' => '',
    ), $atts );
    if ( $a['lang'] ) {
        return '<pre class="hljs"><code class="' . $a['lang'] . '">' . crayon_hljs_reform( $content ) . '</code></pre>';
    } else {
        return '<pre class="hljs"><code>' . crayon_hljs_reform( $content ) . '</code></pre>';
    }
}

ショートコードを処理する時、WordPress内部の処理をバイパスする必要があります。その為に、次のウェブページを参考にさせていただきました。ありがとうございます。