WordPressでコードハイライトする現時点で一番よい方法

tl;dr

prism.jsをテーマに組み込むのが一番よい

初めに

WordPressでソースコードを読みやすく掲載する方法として、以前はCrayon Syntax Highlighterが好まれていたが、開発が止まっていることもあって、最近はprism.jsがよく紹介されている。

WordPressでprism.jsを使う方法は二つある。一つはテーマにprism.jsを組み込む方法、もう一つはprism.jsを導入するプラグインを追加する方法だ。明らかに後者の方が容易だが、問題がないわけではない。

prism.jsを導入するプラグインの問題点

prism.jsには機能を追加するためのプラグインがたくさんあるが、prism.jsを導入するプラグインは、そのすべてには対応しない。たとえば、比較的よく利用されているPrism Syntax Highlighterでサポートされているのは以下の11個である。

これで足りていれば問題はないが、HTMLやXMLを掲載するときに<&lt;のようにエスケープする必要がなくなるUnescaped markupを使いたいとなると困ってしまう。

ちなみに、prism.jsを導入するプラグインの一つであるPrismaticは、独自に<code>ブロックの中をエスケープするのでUnescaped markupを必要としない。しかし、この機能は期待通りに動かない。<code>-></code><code>-&gt;<code>がどちらもブラウザに-&gt;と表示されてしまい->を表示できない。

prism.jsをテーマに組み込む

というわけで、prism.jsをテーマに組み込んでしまうほうが変な制約がなくてよい。方法はそれほど難しくない。

最初に、子テーマをまだ作っていないなら、この記事を参考にして必ず作ること。これからfunctions.phpを編集するが、親テーマのfunctions.phpを直接いじると、サイトがめちゃくちゃになることがあるし、テーマのアップデートで変更が消える可能性が高い。

子テーマを作ったら、そのフォルダにprism.jsのダウンロードページで生成したprism.jsとprism.cssを配置して、functions.phpに以下のように書けばよい。

function add_prism() {  
  wp_enqueue_style('prism-css', get_stylesheet_directory_uri() . '/prism.css');  
  wp_enqueue_script('prism-js', get_stylesheet_directory_uri() . '/prism.js');  
}  
add_action('wp_enqueue_scripts', 'add_prism');  

「WordPress prism.js」でググる出てくる解説のほとんどは、wp_enqueue_scriptに余計な引数が付いているけど、それはいらないので。人のブログをコピペするときは内容を精査しような。