Prismで軽快なシンタックスハイライトを使ってみよう

以前「WordPressでコードをきれいに表示してみよう Google,code-prettify」の記事でシンタックスハイライトを使ってみたのですが、デザインに柔軟性が少ない点が気になってしまい、積極的にコードに関する記事を書こう!という気持ちになれませんでした。

今回見つけた「Prism」は、軽快なうえに行数表示や行ごとのハイライトを設定できたりと、こちらで欲しい機能が取捨選択できるところが気に入ったので、さっそく入れてみることにしました。

スポンサーリンク
AMP広告用336x280Adsense

Prism の導入

まずはこちらのサイト(nobbi LABOさん)で詳しく説明されていたので、これを参考にPrismを入れてみます。

Crayon Syntax Highlighterより高速で、highlight.jsより多機能な、行番号も表示できるシンタックスハイライターPrism.jsのご紹介とその導入方法を解説。記事の後半では、Prism.jsを簡単に利用する小ネタもご紹介していますので、ぜひお試しください!

テーマや言語、プラグインがいろいろ選べるのですが、私はこちらの組み合わせにしました。ダウンロードしたjsファイルの1行目に、自分がどんな組み合わせでダウンロードしたのかを確認できるURLが付いていて、すごく気が利いていてありがたい!

導入後のコード表示確認

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にコピペ。

Prism code highlighter in WordPress without a plugin

これで ”<code class=”language-” の記述がない記事のソースから、prism.js や prism.css の記述が消えました。すっきり!

0