WordPress のショートコード(Shortcode)と prism.js を組み合わせてみた

h2ham

6年前

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タグで書くほうが楽だったかもしれないという結論に。。。

参照：