JavaScript製軽量シンタックス・ハイライタの一つに、prism.jsというものがあります。
カラーテーマを6つ備え、きちんと機能する上に軽量なのですが、ハイライトしたい言語が増えると、jsファイルをダウンロードしてセットしなおしたり、prism.jsに追加機能を導入したい場合はそのときもまたダウンロードしたり、という手間がかかります。
そのあたりを一括で管理・解決してくれるのが、プラグイン「Prism Syntax Highlighter」です。
広告
目次
prism.jsとは？
prism.jsとは、JavaScriptとCSSで実装されたシンタックスハイライタ（コードを色分けして表示してくれるもの）です。
JavaScriptとCSSのスクリプトをダウンロード（どの言語をハイライトするか、どのテーマを用いるか、どの機能を拡張しておくかはダウンロード時に選べます）して、webサイトでscriptタグでjsを、linkタグでcssを読み込み、あとは指定されたタグ、すなわち<pre><code class=language-言語名>と</code></pre>で挟むだけ（拡張機能によってタグにクラスを追加することもあります）で、その部分をシンタックスハイライトできるという優れものです。
サイズが軽く、しかしきちんと綺麗に動作するということで、私の観測範囲ではありますが、それなりに人気はあるように思います。
WordPressでも、jsタグとlinkタグを挿入してprism.jsを読み込むようにすることで、prism.jsをプラグイン無しで導入することがかのうです。
ただ、ダウンロード時に色々パッキングしてくれるとはいえ、扱う言語を増やしたり、拡張を試してみたいときにいちいちDLしてセットしなおすのも面倒です。WordPressで設定して使うのであればなおさら、そうでした。
prism.jsとプラグイン、導入した経緯
と、上で書いたようなことを考えつつ、しかし私がprism.jsを導入した当時は、WordPressのプラグインディレクトリ良い感じのプラグインも見当たりませんでしたので、私は別ディレクトリにJSとCSSを格納して、そこからヘッダとフッタにタグを挿入し、これを導入していました。それであまり不足もありませんでしたし。
しかし、最近Kotlinなどにも興味が出てきて、そろそろ言語を増やさねば、と思いつつ、なにか便利なプラグインはないかと「prism」でWordPressの公式プラグインディレクトリを探ってみると、ありました。
それがPrism Syntax Highlighterです。現時点（2017/10/05）で4週間前更新、結構新しくて更新頻度も良いとみて、インストールしました。
するとなんとも便利なものでしたので、紹介を書くことにした次第です。
インストール方法
Prism Syntax Highlighterは、WordPress公式プラグインディレクトリにありますので、ダッシュボードから追加できます。
ダッシュボードから「プラグイン」→「新規追加」のち「Prism Syntax Highligter」で検索するとその名前で出てきますので、そこからインストールが可能です。
もしくは、以下のリンクから飛べる公式プラグインディレクトリよりDLしてインストールすることも可能です。
使い方
インストールすると、何故かPrism Syntax HighlighterではなくPrism for WPという名前で設定等を見ることができるようになります。
なぜ名前が変わるのかは不明。プラグイン一覧から詳細を見ると確かにPrism Syntax Highlighterの詳細が出るし、中の設定として分かりやすく変えているのかもしれません。
設定
ダッシュボードの「設定」→「Prism For WP」より、設定を行うことができます。
とはいえ簡潔な設定ページで、どれぐらい簡潔かというと1ページだけしかありません。しかも一寸スクロールするだけで簡単に下まで行きます。
- Select a themeでどれか一つテーマを選ぶ
- Select languagesで使う言語にチェックボタン
- Select pluginsで使うプラグインにチェックボタン
以上3点をすませたら下の「設定を保存」を選ぶだけです。ちょうかんたん。
また、上に書いた3つの設定以外に、
- Load Prism files(CSS+JS) only to post/single pages (投稿やシングルページにだけプリズムを読み込ませる)
- Don’t show Assistant Button in editor (エディタでアシスタントボタンを見せない)
の二つがあります。これらの機能は作動させる場合はチェックする形になるようです。
設定を変更したい場合は、設定画面でこの二つを含む3種類の項目のチェックを変更して「設定を保存」を押すだけ。簡単です。
使い方
記事内でシンタックスハイライトさせたい部分を指定のHTMLタグで囲むだけです。プラグイン無しの場合は、以下のように書けばOKです。
<pre><code class=”language-言語名”>ハイライトさせたい部分</code></pre>自作ショートコードでシンタックスハイライトさせたい部分を包んでいる人は、そのショートコードの設定を変更することで、そのショートコード部分をHTMLタグで置換できるようにすればOK。
私はプラグインでCopy to Clipboard・Line Numbers・Show Languageを入れているので、
<pre class=”line-numbers language-言語名”><code class=”language-言語名”>ハイライトさせたい部分</code></pre>というふうになるように設定しています。なおこのハイライトも勿論prism.jsを使っています。
プラグインを追加した場合のコードは、各々のプラグインのデモに飛べば説明されています。
そのあたり面倒くさい人は、ビジュアルエディタに挿入補助ボタンが追加されています（設定からボタンの表示はオンオフ可能）ので、それを使えば簡単です。
なお、HTMLコードをタグで囲んでハイライトさせたい場合は、prism.jsを普通に使った場合も同じなのですが、HTMLとして出力されないようにエンティティの記述は適宜しておくといいでしょう。
あとJetPackのMarkdownで記事が書ける機能を使っている場合、ショートコードを使ってマークダウンコードをハイライトさせる場合もエスケープ処理がいります。
中にはここいらの処理までショートコードに任せてしまう方もいるかもしれませんが、私は自分用ですので、そのあたりあんまり考えずに設定しています。
管理人の選んだ設定
私はテーマはOkaidia、言語はMarkup/CSS/CSS Extras/C-Like/Java-Script/PHP/PHP Extras/Bash（増える可能性あり）、プラグインはCopy to Clipboard、Line Numbers、Show Languageを使っています。
選んだ3つのプラグインは、コピー機能・行番号表示機能・言語名表示機能を持っています。
管理人の使用感
特段重くなったわけでもなく、便利に使わせてもらっています。
元々prism.jsを手動で導入していたのもあり、タグを特に置き換える必要もありませんでした。
しいて言えば、ビジュアルエディタだけでなくテキストエディタのほうにも入力補助ボタンが欲しいところですが、元々ショートコードとAddQuickButtonを組み合わせて使っていたこともあり、これによる障壁はほぼないため、問題は特にないといえるでしょう。
その他コメントなど
Prism Syntax Highlighterは、prism.jsを導入するに当たってとても便利なプラグインです。特に重いこともなく作動し、様々な言語のハイライトに対応しています。
設定もシンプル、導入もシンプル、でもハイライト可能なのは嬉しい限り。
WordPressで使えるシンタックスハイライタをお探しの方には、お勧めのプラグインです。