Prism.jsでシンタックスハイライトを付ける方法！使い方を解説
Prism.jsを使う事でpreタグ・codeタグでのソースコードの埋め込みの表示に対してシンタックスハイライトで色付けすることが出来ます。導入方法と使い方を解説していきます！
ソースコードの表示でシンタックスハイライトを付けたい
HTMLでソースコードの記述をWEBページに埋め込むにはpreタグとcodeタグを使えば行えます。
しかし、そのコードを解釈して色付けを行うシンタックスハイライトについてはpreタグとcodeタグだけでは行なえません。
そこで今回の記事ではソースコードのシンタックスハイライトを行う「Prism.js」の導入方法と使い方を解説していきます。
ぜひソースコードにシンタックスハイライトを付けて、ソースコードの表示をよりリッチにしましょう。
Prism.jsとは？
Prism.jsはシンタックスハイライトを行うライブラリで、HTML/CSSやJavaScriptやもちろん、Python・PHPやRなど様々な言語に対応しており、最大の特徴としてはとても導入がシンプルかつ、動作と同じようなライブラリの競合と比較しても速いという点です。
下記のリンクはPrism.jsの公式サイトです。ぜひ一度サイトを訪れて見た目を確認しておきましょう。
またシンタックスハイライトが効いており、プログラミング言語の文法が解釈され適切に色づけされているのも確認できます。
導入方法
それではPrism.jsの導入方法を見ていきましょう。
Prism.jsはCDNでも導入できますが、公式サイトから対応言語やプラグインを選択した自分好みににカスタマイズされたファイルをダウンロードしても利用できます。
両パターン了解しておきます。
CDN
Prism.jsをCDNからすぐに利用したいという方は下記のリンクからCDN用のリンクを取得して利用するようにしましょう。
Prism.jsはテーマやプラグインがかなりの数あるため、迷うかと思いますが、手軽に試したい場合は下記のファイルを試すのがおすすめです。
Prism.jsのCDNのファイル
[JavaScript]
https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/components/prism-core.min.js
https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/plugins/autoloader/prism-autoloader.min.js
[CSS]
https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/components/prism-css.min.js
https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/themes/prism-okaidia.min.cssカスタマイズ版
次に公式サイトから自分好みにカスタマイズしたファイルをダウンロードする方法です。まずは下記のPrism.jsのダウンロードページを訪れましょう。
最後に最下部のダウンロードボタンから「CSS」「JS」ダウンロードします。
Prism.jsの使い方
CDNの場合、ダウンロードした場合でも同じですが、HTMLでPrism.jsのJSとCSSの呼び出しを行います。
今回はダウンロードしたprism.jsとprism.cssを使って簡単なJavaScriptのコードをシンタックスハイライトさせてみます。
いかがでしょうか？preタグ・codeタグよりもかなり見た目がリッチになりましたよね。
今回Prism.jsのJSとCSSをheadタグの中のscriptタグとlinkタグで呼び出しています。
ここで重要なのがcodeタグにつけているclass属性です。
codeタグに言語を指定するclass名を付ける
Prism.jsを適用させるにはcodeタグにシンタックスハイライトさせたい言語に対応したclass名をつける必要があります。以下に例を示します。
Prism.jsの使い方
<!-- 任意のコードがHTMLの場合 -->
<code class="language-markup">任意のコード</code>
<!-- 任意のコードがCSSの場合 -->
<code class="language-css">任意のコード</code>
<!-- 任意のコードがJavaScriptの場合 -->
<code class="language-javascript">任意のコード</code>
<!-- 任意のコードがPHPの場合 -->
<code class="language-php">任意のコード</code>以上がPrism.jsの基本的な使い方となります。
【応用編】Prism.jsの使い方
Prism.jsにはプラグインがいくつか用意されています。プラグインを導入することで見た目を更にカスタマイズすることが出来ます。
いくつか例を紹介します。
行番号
Line Numbersのプラグインをつけることで、行番号を表示することが出来ます。
使い方はpreタグにline-numbersのクラス名を付けるだけです。
（もちろんプラグインファイルは読み込む必要がある）
Inline Color
redやblueなどのカラーの表示をヴィジュアルで表示してくれます。
まとめ
いかがでしたでしょうか。Prism.jsは導入が簡単ですぐに導入でき使い方も簡単なライブラリです。
ソースコードの埋め込み自体はpreタグ・codeタグで出来ますが、Prism.jsを入れる事で見やすさを格段に向上させることが出来ます。
ぜひお試しください！
