軽量で多言語に対応、簡単に使えるシンタックスハイライト『Prism』

パソコンでプログラミングをしていると、当たり前のようにコードを要素ごとに色分けしてくれますよね。それと同じように、ブログでプログラムコードを紹介する時にも色分けして表示できたら、分かりやすいですい綺麗ですよね。

WordPressであればプラグインで簡単に実現できるのですが、静的サイトや当ブログのようにオリジナルのサーバープログラムで動作しているサイトでは、コードの色分けをしてくれる機能を用意しなくてはいけません。

コードの色分けを『シンタックスハイライト』と呼びますが、今回は、その機能を実現してくれる中でも軽量で、導入等が簡単な当ブログでも使用している『Prism(公式サイト)』というものをご紹介したいと思います。

コンテンツの転載は固くお断りいたします。

どれぐらい軽量なの?

私の場合、たくさんの言語とプラグインをセットにしたので容量は大きくなっています。CSSファイルは約12kb(GZIP圧縮後3kb)、JSは約132kb(GZIP圧縮後47kb)となります。使用する言語を絞れば更に軽量化できます。

WordPressには『Crayon Syntax Highlighter』というプラグインがありますが、こちらは重量です。更に動作速度などを比較してもPrismはかなり軽量です。

豊富な言語に対応し、プラグインも多い

対応している言語数はざっと数えただけでも120種類は超えています。テーマも7種類あり、行番号を表示させるなどのプラグインも30種類ほどあります。

動作も軽量でありながら、これだけの種類に対応しているのは素晴らしいの一言です。

導入はとても簡単

Prismは導入もとても簡単です。

まずは『Prismのダウンロードページ』に行き、必要な言語とプラグインにチェックを入れて、下にあるダウンロードボタンからJSとCSSファイルをダウンロードします。

次に、それらをサーバーも適切な場所にアップロードして配信できるようにしておきます。

HTMLに加えるのは2行だけ


加えるのは上記の2行だけで、CSSファイルをheadタグの中に、JSファイルをbodyタグの最後の方に指定しておきます。

記事に書くHTMLも簡単

そして、例えばGo言語のソースコードを表示させるなら次のように記述します。


表示したいコードを『pre』と『code』タグで囲み、クラス属性でpreタグに『line-numbers』を追加すると行番号(プラグイン)を表示します。『language-go』で表示する言語の種類を指定しています。

『data-language』もプラグインなのですが、これを指定するとコードにカーソルを合わせた時に、それが何の言語であるのか、その名称を正確に指定することが出来ます。

HTML等のマークアップ言語の表示も簡単

シンタックスハイライトでよくあるのですが、HTMLなどのマークアップ言語をハイライトする時、『<』と『>』を別の文字列に置き換えないと正常に動作しないんですよね。

Prismであれば、いちいち置き換えなくてもプラグインを導入するだけで表示することが出来ます。やり方はとても簡単で、表示したいコードを『』で囲い、コメントアウトすると表示できます。

コマンドライン風の表示も出来る

これはプラグインでの機能ですが、以下のようにコマンドライン風な表示も可能です。


go run Test.go

これはGo言語で書かれたプログラムを実行させる時のコマンドですが、ユーザー名、ホスト名が表示され、rootユーザー以外であれば『$』、rootユーザーであれば『#』という風な変化もあります。

終わりに

他にも、簡単にコードのコピーを行えるようにするボタンを追加したり、キーワードでハイライトしたり、CSSなどで指定した色をプレビューしてみたり、様々なプラグインがあり、動作も軽量でありながら高機能な『Prism(公式サイト)』。

ソースコードを表示する機会がありましたら是非、あなたも使ってみてくださいね!