開設してからこっち、このブログではコードの表示に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' );
