以前「WordPressでコードをきれいに表示してみよう Google,code-prettify」の記事でシンタックスハイライトを使ってみたのですが、デザインに柔軟性が少ない点が気になってしまい、積極的にコードに関する記事を書こう！という気持ちになれませんでした。
今回見つけた「Prism」は、軽快なうえに行数表示や行ごとのハイライトを設定できたりと、こちらで欲しい機能が取捨選択できるところが気に入ったので、さっそく入れてみることにしました。
http://prismjs.com/
Prism の導入
まずはこちらのサイト（nobbi LABOさん）で詳しく説明されていたので、これを参考にPrismを入れてみます。
テーマや言語、プラグインがいろいろ選べるのですが、私はこちらの組み合わせにしました。ダウンロードしたjsファイルの1行目に、自分がどんな組み合わせでダウンロードしたのかを確認できるURLが付いていて、すごく気が利いていてありがたい！
http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+powershell&plugins=line-highlight+line-numbers+show-invisibles+file-highlight+toolbar+remove-initial-line-feed+command-line+copy-to-clipboard
導入後のコード表示確認
show-invisiblesプラグインのExampleのコードをコピペして表示確認をしてみます。
(function(){
if (
typeof self !== 'undefined' && !self.Prism ||
typeof global !== 'undefined' && !global.Prism
) {
return;
}
おお～！簡単にきれいに表示できました。
Prism.js 用のクイックボタンを追加する
さらに投稿用のテキストエディタに Prism.js 用のクイックボタンを追加する方法も、先ほどのnobbiさんの記事の後半に記載されていたので、こちらも試してみました。
functions.phpにこんな簡単なコードを追加するだけでボタンを追加できるもんなんですね。勉強になりました。
さらにカスタマイズ！コードを記載した記事だけPrismのjsとcssを読み込みたい
いくらPrism.jsが軽いと言っても、コードが書かれていない記事でもjsファイルが読み込まれているのは少し気になってしまうので、”<code class=”language-” という文字列が記事に含まれている時だけ js と css を読み込むような処理を探してみました。
英語のサイトですが、ページの中ほどに functions.php に add_prism() を追加するサンプルがありますので、それをfunctions.phpにコピペ。
https://odd-one-out.serek.eu/prism-wordpress-without-plugin/
これで ”<code class=”language-” の記述がない記事のソースから、prism.js や prism.css の記述が消えました。すっきり！