ここのブログは WordPress で構成構成していて、エントリーで表示するコードは、 prism.js という で動く、シンタックスハイライター（syntax highlighter） を利用している。
prism.js
prism.js は JavaScript で動く、シンタックスハイライターで、ハイライトしたいコードを、preタグとcodeタグでコードを囲い、codeタグにハイライトしたい言語名を class で指定することで利用できる。
JavaScriptのコードを表示した例
<pre><code class="language-javascript">jQuery(function () {
$('#id').on('click', function () {
〜
});
});</code></pre>このブログでも毎回このコードを書いてハイライトさせてきたのだけど、毎回書くのも面倒だなーと思い始めたので、 WordPress のショートコードを使ってpreとcodeの部分を簡易に書けるようにしてみた。
ショートコードを使うための準備
ショートコードを使うために、 functions.php にショートコードの記述を加えた。ショートコードの使い方については、 Codex を参照。
ショートコード API - WordPress Codex 日本語版
今回はpreとcodeタグの中に入れたいので、コードを囲って使うことにした。
functions.php
add_shortcode('prism', 'prism_shortcode');
function prism_shortcode( $atts, $content = null ) {
extract( shortcode_atts( array(
'lang' => 'javascript'
), $atts ) );
return '<pre><code class="language-' . esc_attr($lang) . '">'. esc_html($content) .'</code></pre>';
}基本的には JavaScript を紹介することが多いかなと思ったので、デフォルトの langage を javascript にするため、そしてカスタムできるように lang 属性をつけてそのデフォルト値を javascript した。これで使う時は、
[prism lang="css"]
.test { margin: 0; }
[/prism]などと書けるようになる。
ところが・・・ここのブログではこれでもうまく動かなかった。謎にpタグが入り込んでしまうという現象がおこったためである。原因は Markdown on Save Improved というプラグインでマークダウン形式で書けるようにしていたのですが、これとショートコードを組み合わせると、pタグが勝手に入り込んでしまうバグがあるらしい。
Markdown on Save Improved と SyntaxHighlighter Evolved の共存 | hello-world.jp.net
上記の参照先にも書いてあるように、解決方法としてはdivで囲うことらしい。つまりMarkdownのプラグインと組み合わせると、結局divタグを入れなければならないということになる。。。これであればおとなしくpreとcodeタグで書くほうが楽だったかもしれないという結論に。。。
