reviews

Highlight.js:シンプルで導入も簡単なハイライター

sc 2014-10-08 12.54.38開設してからこっち、このブログではコードの表示にWP SyntaxHighlighterを使っていました。このプラグイン、見た目はシンプルで満足していたんですが、使わない機能が多くてボリュームがあるし、いろいろなコードも吐き出す。で、長いこと更新されていないな、というわけでこのたび変更することにしました。
いくつかのHighlighter系のプラグインをテストしてみるも、どれも私には高機能すぎ…。で、この機にプラグインをやめてhighlight.jsを導入することにしました。ウェブデザインに関してはまさに、過ぎたるは及ばざるが如し、ですからね。


このhighlight.jsの一番気に入ったところは、コードの種類を自動判定してくれるので特別なマークアップが不要ということ。つまり、<pre>と<code>で括ってあげればそれでよいから、データの持ち回しに優れている。導入方法は色々あると思いますが、私はテーマ内に上げて、wp_headに読み込ませています。

    wp_enqueue_script('highlight', get_bloginfo('template_directory').'/js/highlight.js');
    wp_enqueue_style('highlight', get_bloginfo('template_directory').'/js/好きなテーマ.css');
    wp_head();
    echo '<script>hljs.initHighlightingOnLoad();</script>'."n";

すでにwordpressのプラグインを使っている場合、preタグだけでマークアップされていることも多い。その場合は以下のようにjQueryなどでイニシャライズしてあげればよい。

$(document).ready(function() {
  $('pre').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});

……と、公式の説明通りに設定でいったん上手くいったと思ったのですが、jsが効いていない記事が!どうやら長文のコードだと自動判別が効かないことがあるらしい。その場合は、そのコードのマークアップを直書きすればよい(<pre><code class=”php”>みたいな感じ)のだけども、今度は、同ページ内の他のpreタグすべてにJSが効かなくなってしまい…。結局テーマのphp内でcodeタグの有無をチェックして挿入することにしました。ま、その方がデザインもしやすいということで、結果OKですかね。

//preタグにcodeタグを挿入する

function insert_precode( $comment_content ) {
    preg_match_all('/<pre.*?>([^`]*?)</pre>/is', $comment_content, $matches, PREG_SET_ORDER); 
    foreach ($matches as $def_pre) {
        $pre = $def_pre[0];
        if ( !preg_match('/<pre.*?>+s*<code.*?>([^`]*?)</code>+s*</pre>/is', $pre) ) { //CODEタグがなければ挿入
            $pre = preg_replace('/<pre(.*?)>([^`]*?)</pre>/is', '<pre$1><code>$2</code></pre>', $pre);
            $comment_content = str_replace( $def_pre[0], $pre, $comment_content );
        }
    }
    return $comment_content;
}
add_filter( 'comment_text', 'insert_precode', 9);
add_filter( 'the_content', 'insert_precode' );

 

Your Comment

コードの記述は<pre>または<code>タグで括って下さい。自動的にエスケープされます。

 

右の文字を入力して下さい captcha