Prism.jsでシンタックスハイライトを付ける方法!使い方を解説

Prism.jsを使う事でpreタグ・codeタグでのソースコードの埋め込みの表示に対してシンタックスハイライトで色付けすることが出来ます。導入方法と使い方を解説していきます!

コンテンツ [表示]

  1. 1ソースコードの表示でシンタックスハイライトを付けたい
  2. 2Prism.jsとは?
  3. 2.1導入方法
  4. 3Prism.jsの使い方
  5. 4【応用編】Prism.jsの使い方
  6. 4.1行番号
  7. 4.2Inline Color
  8. 5まとめ

ソースコードの表示でシンタックスハイライトを付けたい

HTMLでソースコードの記述をWEBページに埋め込むにはpreタグとcodeタグを使えば行えます。

あわせて読みたい
preタグを使ってソースコードを埋め込む方法を解説!のイメージ
preタグを使ってソースコードを埋め込む方法を解説!
HTMLタグの1つであるpreタグを使ってソースコードを埋め込む方法を解説します。ブログなどでソースコードを用いて解説をしたいときなどに役立ちます。preタグ以外にHTML内にソースコードを書く際に使うcodeタグについても解説します。

しかし、そのコードを解釈して色付けを行うシンタックスハイライトについてはpreタグとcodeタグだけでは行なえません。

そこで今回の記事ではソースコードのシンタックスハイライトを行う「Prism.js」の導入方法と使い方を解説していきます。

ぜひソースコードにシンタックスハイライトを付けて、ソースコードの表示をよりリッチにしましょう。

Prism.jsとは?

Prism.jsはシンタックスハイライトを行うライブラリで、HTML/CSSやJavaScriptやもちろん、Python・PHPやRなど様々な言語に対応しており、最大の特徴としてはとても導入がシンプルかつ、動作と同じようなライブラリの競合と比較しても速いという点です。

下記のリンクはPrism.jsの公式サイトです。ぜひ一度サイトを訪れて見た目を確認しておきましょう。

Prism公式サイト
Prism.jsの公式サイトでテーマを選択
公式サイトの右側にテーマがあり、テーマを選択してみます。
Prism.jsの公式サイトにあるソースコード
するとその下部にあるソースコードの表示部分のデザインがかわります。

またシンタックスハイライトが効いており、プログラミング言語の文法が解釈され適切に色づけされているのも確認できます。

導入方法

それではPrism.jsの導入方法を見ていきましょう。

Prism.jsはCDNでも導入できますが、公式サイトから対応言語やプラグインを選択した自分好みににカスタマイズされたファイルをダウンロードしても利用できます。

両パターン了解しておきます。

CDN

Prism.jsをCDNからすぐに利用したいという方は下記のリンクからCDN用のリンクを取得して利用するようにしましょう。

prism - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
Lightweight, robust, elegant syntax highlighting. A spin-off project from Dabblet. - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 10% of websites, powered by Cloudflare. We make it faster and easier to load library files on your websites.

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のダウンロードページを訪れましょう。

Download ▲ Prism
Prism.jsのダウンロードページ
上記ページを訪れたら、テーマや言語、プラグインの選択になります。あまり多くの言語やテーマを盛り込んだファイルにすると重くなるため、必要最低限のものを選択しましょう。

最後に最下部のダウンロードボタンから「CSS」「JS」ダウンロードします。

Prism.jsの使い方

CDNの場合、ダウンロードした場合でも同じですが、HTMLでPrism.jsのJSとCSSの呼び出しを行います。

今回はダウンロードしたprism.jsprism.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を入れる事で見やすさを格段に向上させることが出来ます。

ぜひお試しください!

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次