Prism.jsを導入してみた

Last updated at 2024-05-22Posted at 2024-05-21

はじめに

この記事は、highlight.jsからPrism.jsに移行した際の備忘録です。
Prism.jsの導入からテーマの変更、プラグインの適用等をやりました。

前半はPrism.js自体の導入方法を、後半はテーマの変え方やプラグインの入れ方を載せています。
もし後半目当てで来た方がいましたら、カスタマイズするまで飛ばしてください。

また、できるだけおかしな箇所が無いよう書いているつもりですが、初心者のため間違っている内容がある可能性があります。
そのためここの情報は鵜呑みにせず、Prism.jsの公式ページを確認したり自分で調べることを推奨します。
間違っている箇所がありましたら、編集リクエストやコメントで教えてくださると嬉しいです。

環境など

ブラウザ：Chrome
Prism.jsのバージョン：1.29.0
Prism.jsの導入方法：CDN
エディタ：VSCode
使用言語：HTML/CSS/JavaScript

参考

導入方法と基本的な使い方は以下を参考にしました。

プラグインはこちらの一覧を参考にしました。

Prism.jsを導入する

まずはPrism.jsをHTMLに導入し、プラグインを入れていきます。
...と言いたいところですが、先にPrism.jsについて軽く解説します。

Prism.jsとは

簡単に言うと、HTML内で書いたコードをハイライトしてくれるライブラリです。
ハイライトがあるだけでコードの読みやすさがぐっと上がります。

Prism.jsの特徴は私的にはこんな感じです。

カスタマイズ性が高い
プラグインがひたすらに便利
カラーテーマが少ない（ライト3種 + ダーク5種）

詳しくは公式ページ（英語）を見てください。

また、似たようなライブラリにはhighlight.jsがあります。
こちらはカラーテーマが豊富で、数えきれないほどある印象です。
ちなみに、主な使い方はPrism.jsもheighight.jsも同じです。

導入方法

ここではCDNを経由した方法でPrism.jsを導入します。
特に理由がない限りCDNで大丈夫だと思いますが、他にはこちらからファイルをダウンロードする方法もあります。

ということで、まずは導入したいHTMLファイルを用意します。

index.html

<head>
    <title>Prism.jsのテスト</title>
</head>
<body>
</body>

必要なタグを追加する

HTMLファイルを以下のように編集します。

index.html

<head>
    <title>Prism.jsのテスト</title>
+   <!-- Prism.js -->
+   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
+   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
+   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
</head>
<body>
</body>

ちなみに導入はこれで終わりです。とても簡単ですね。

この状態でもうコードのハイライトができるはずなので、実際の使い方を今すぐ知りたい方はコードをハイライトするまで飛ばしてください。

これだけだと未消化な感じがするという方に向けて、各ファイルについて軽く解説します。

...とその前に、公式ページにある導入方法のリンクを載せておきます。
もしかしたら何かの役に立つかもしれません。

まず、ここで読み込んでいるファイルは上から順にこんな感じです。

テーマファイル.css ... ハイライトのスタイル
コアファイル.js ... Prism.jsの中心部分
オートローダー.js ... 必要な言語ファイルを読み込むプラグイン

Prism.jsでコードをハイライトするには、コアファイルとテーマファイル、そして言語ファイルが必要になります。
このうちコアファイルは何も考えずに読み込めばいいですし、テーマファイルは特に面倒なことはありませんが、言語ファイルは訳が違います。

言語ファイルとは

言語ファイルとは、簡単に言うと特定の言語をハイライトするためのJavaScriptファイルです。
JavaScriptのコードをハイライトするためにはJavaScriptの言語ファイルが、PythonのコードをハイライトするためにはPythonの言語ファイルが必要になります。多分。

そのため、通常であれば以下のどちらかの手段を取ることになります。

自分がハイライトしたい言語を把握し、適切な言語ファイルを読み込む
- メリット：適切なファイルを読み込めば重くはならない
- デメリット：面倒だし手間がかかる
全ての言語ファイルを読み込む
- メリット：何も考えなくていいため楽
- デメリット：重くなる可能性がある

ですが、見ての通りあまりいいものではありません。

オートローダーを使う

そこで登場するのが、オートローダーです。

こちらはPrism.jsのプラグインの一つです。
プラグインというとオプションなイメージがありますし、実際他のプラグインもそうなのですが、このオートローダーは少し違います。

このオートローダーは、なんとHTMLから必要な言語ファイルを検出し、自動で読み込んできてくれるという優れものです。
そのため必要な言語ファイルが増える / 減るといった事態にも対応してくれます。
あとscriptタグを追加するだけなのでセットアップも楽です。

という感じなので、必要な言語が絶対に変わらないという場合を除き、このオートローダーを使うことになると思います。

詳しくは公式ページ（英語）を見てみてください。

コードをハイライトする

ということで、実際にハイライトしてみます。

まず、基本的な書式はこんな感じです。

<pre><code class="lang-言語名">
実際のコード
</code></pre>

ちなみに、classの書き方はこんな感じです。

classを指定するのはpreタグでもcodeタグでも大丈夫
lang-言語名はlanguage-言語名でも大丈夫
言語名はjavascriptなどのフルネームとjsやtsなどのエイリアスが使える
- 対応言語一覧はこちら
このclassを書かないとPrism.jsに認識されない

また、インラインで書いたコードをハイライトすることもできます。
その場合は上の基本的な書式からpreタグを取っ払うだけです。

<code class="lang-言語名">実際のコード</code>

実際に使う時はこんな感じになると思います。

index.html

<head>
    <title>Prism.jsのテスト</title>
    <!-- Prism.js -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
</head>
<body>
    <p>ここからコード</p>
    <pre><code class="lang-js">const text = 'Hello World!';
console.log(text);</code></pre>
    <p><code class="lang-js">console.log('これ')</code>はインラインコード</p>
</body>

これをブラウザで見ると、こんな感じになると思います。

このような表示になっていたら、無事にハイライトができています。
結構簡単にできたのではないでしょうか。

バージョンを変更する

さて、ここで導入したPrism.jsのバージョンば1.29.0です。
今のところ多分バージョン1.29.0でも特に問題はないと思います。

ですが今後新しいバージョンが出て、そちらに移行したくなるかもしれません。
そんな時用に、バージョンのあげ方&2次ソースからのコピペ以外でのPrism.jsの導入方法を載せておきます。

まず、CDNを利用した導入方法はこちらから見ることができます。
ここに載っている方法には、以下のようなタグが書かれています。

公式サイトから引用

<link href="https://{{cdn}}/prismjs@v1.x/themes/prism.css" rel="stylesheet" />
<script src="https://{{cdn}}/prismjs@v1.x/components/prism-core.min.js"></script>
<script src="https://{{cdn}}/prismjs@v1.x/plugins/autoloader/prism-autoloader.min.js"></script>

ですが、これをそのままコピペしただけでは動かすことができません。
なぜかと言うと、{{cdn}}と書かれた箇所とv1.xと書かれた箇所を書き換えないといけないからです。

CDNについて

公式サイトには以下のように書いてあります。

CDNs which provide PrismJS are e.g. cdnjs, jsDelivr, and UNPKG.

ここに書かれている通り、Prism.jsはcdnjsとjsDelivrとUNPKGに対応しています。
そのため、cdnjs以外のCDNを利用することもできます。

ちなみに、この記事では基本的にcdnjsを利用します。

バージョンについて

なんとなくわかるかもしれませんが、v1.xの箇所がバージョンです。
そのため基本的には、ここを書き換えればバージョンを変えることができます。

ただ、この方法だとなんか不安になるという方もいると思います。
そういう場合はCDNのページからバージョンのセレクトボックスを変更し、そこからタグやURLをコピペする方法もありかもしれません。

カスタマイズする

Prism.jsでは、ハイライトのカラーテーマを変更したり、プラグインを入れて表示をカスタマイズしたりできます。
カラーテーマは計8種類、プラグインは26種類が公式で用意されているので、ここから好きなものを組み合わせていきます。

また、これらは自作することもできるので、拡張性は結構高いはずです。

カラーテーマを変更する

カラーテーマは前述した通り、ライト3種類+ダーク5種類の計8種類が用意されています。

各テーマがどんな感じかは、公式ページの右側にあるカラーテーマ変更ボタンを押して見てみてください。
もしくは、Prism.js 使ってみたという記事に一覧が載っているので、こちらを参考にしてみてください。

カラーテーマの変更方法ですが、CDNを使った正しい（？）方法はよくわかりませんでした。
考えられる方法はこんな感じだと思います。

既存のlinkタグのhrefのテーマ名部分を変更する方法
cdnjsからURLをコピーする方法

既存のタグにあるテーマ名を変更する

この方法が多分一番楽だと思います。

例えば、HTMLファイルが以下のようになっているとします。
（さっきのやつです）

index.html

<head>
    <title>Prism.jsのテスト</title>
    <!-- Prism.js -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
</head>
<body>
    <p>ここからコード</p>
    <pre><code class="lang-js">const text = 'Hello World!';
console.log(text);</code></pre>
    <p><code class="lang-js">console.log('これ')</code>はインラインコード</p>
</body>

このうち、カラーテーマを指定しているのは以下のlinkタグです。
見やすくなるように改行を入れています。

<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css"
>

このhref属性のうち、最後のthemes/prism.min.cssにあるprismを変えればカラーテーマを変更することができます。
ここの部分にはカラーテーマ名を入れればいいのですが、ここで使えるカラーテーマ名がどこに載っているのかよくわかりませんでした。

ということで、以下にリストを載せておきます。
公式ページの右にあるテーマ選択ボタンの文字：URLで使えるカラーテーマ名です。
ちなみに元ソースはcdnjsです。

DEFAULT: prism
DARK: prism-dark
FUNCY：prism-funky
OKAIDIA：prism-okaidia
TWILIGHT：prism-twilight
COY：prism-coy
SOLARIZED LIGHT：prism-solarizedlight
TOMORROW NIGHT：prism-tomorrow

先ほどのHTMLファイルのカラーテーマをTOMORROW NIGHTに変えると、こんな感じになります。

index.html

<head>
    <title>Prism.jsのテスト</title>
    <!-- Prism.js -->
-   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
+   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
</head>
<body>
    <p>ここからコード</p>
    <pre><code class="lang-js">const text = 'Hello World!';
console.log(text);</code></pre>
    <p><code class="lang-js">console.log('これ')</code>はインラインコード</p>
</body>

ブラウザで見るとこんな感じになると思います。

cdnjsからリンクをコピーする

多分こっちの方が正当な方法ではあると思います。
この方法も簡単ではあるので、どちらを使うかは完全に好みです。

まずはCDNのPrism.jsのページにアクセスします。
ちなみにこのリンクはバージョン1.29.0のものです。

次に、Asset Typeというセレクトボックスから「Styling」を選びます。
こうすることでCSSファイルのみが表示されるようになります。

すると、上の方にカラーテーマのCSSファイルが表示されるので、そこからリンクやタグをコピーして使う感じです。

下の方はプラグインのファイルなので注意してください。

コピーしたら、HTMLファイルのほうを編集します。
以下の例ではTOMORROW NIGHTテーマを使うように編集しています。

index.html

<head>
    <title>Prism.jsのテスト</title>
    <!-- Prism.js -->
-   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
+   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-coy.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
</head>
<body>
    <p>ここからコード</p>
    <pre><code class="lang-js">const text = 'Hello World!';
console.log(text);</code></pre>
    <p><code class="lang-js">console.log('これ')</code>はインラインコード</p>
</body>

カラーテーマを変えるだけでもだいぶ印象が変わりますね。
好きなカラーテーマを見つけて使ってみてください。

ちなみに私が好きなテーマは、背景が白の時はDEFAULT、背景が黒の時はTOMORROW NIGHTです。
特にDEFAULTは実家のような安心感があります（？）

プラグインを導入する

Prism.jsの最大の特徴（だと勝手に思っている）として、魅力的なプラグインが挙げられます。
プラグインを使うと、Prism.jsでのハイライトがよりいい感じになります。
ということで、導入方法を軽く解説します。

プラグインの探し方

まずはいい感じのプラグインを探します。

プラグイン一覧は公式ページに載っていますが、英語なので読むのが辛いという方は、以下のページを参考にするのがいいと思います。

CDNを使ったプラグインの導入方法については公式にそれっぽいのがなかったので、公式のプラグイン一覧のURLからプラグイン名を抜き出して、以下のような形式のscriptタグをHTMLに追加する感じになると思います。

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/プラグイン名/prism-プラグイン名.min.js"></script>

<!-- ものによってはCSSが必要 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/プラグイン名/prism-プラグイン名.min.css"></link>

もしくはCDNから関係しそうなファイルを探してタグを追加してください。
このページからページ内検索を使っていけばそれっぽいものが見つかると思います。

ここでは、行番号を表示させるプラグインと空白を削除してくれるプラグインを導入してみます。

Normalize Whitespace

Normalize Whitespaceは、余分な空白を削除してくれるプラグインです。

ここで言う余分な余白とは、こういうやつです。

<body>
    <p>ここからコード</p>
    <pre><code class="lang-js">
        const text = 'Hello World!';
        console.log(text);
    </code></pre>
    <p><code class="lang-js">console.log('これ')</code>はインラインコード</p>
</body>

こちらですが、前のHTMLファイルにあったコードの一部に改行とインデントを加えたものです。

前のHTML

<body>
    <p>ここからコード</p>
    <pre><code class="lang-js">const text = 'Hello World!';
console.log(text);</code></pre>
    <p><code class="lang-js">console.log('これ')</code>はインラインコード</p>
</body>

今のHTML

<body>
  <p>ここからコード</p>
- <pre><code class="lang-js">const text = 'Hello World!';
+ <pre><code class="lang-js">
+   const text = 'Hello World!';
-   console.log(text);</code></pre>
+   console.log(text);
+ </code></pre>
  <p><code class="lang-js">console.log('これ')</code>はインラインコード</p>
</body>

HTMLは読みやすくなりましたが、その代わりブラウザで見た時に変な改行とインデントが入ってしまっています。

前：

今：

こんな余白とインデントができてしまうのであれば、HTMLを読みやすく修正することはできません。
codeタグの前後には改行を入れず、インデントもできないため左寄せの読みづらいコードで書くしかありません...

ですが、Normalize Whitespaceがあれば違います。
このプラグインは上のような余白を綺麗に削除してくれるのです。

導入方法は簡単で、以下のようにscriptタグを追加するだけです。

index.html

<head>
    <title>Prism.jsのテスト</title>
    <!-- Prism.js -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
+   <!-- プラグイン -->
+   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/normalize-whitespace/prism-normalize-whitespace.min.js"></script>
</head>
<body>
    <p>ここからコード</p>
    <pre><code class="lang-js">
        const text = 'Hello World!';
        console.log(text);
    </code></pre>
    <p><code class="lang-js">console.log('これ')</code>はインラインコード</p>
</body>

これでNormalize Whitespaceが導入できました。
では早速ブラウザでHTMLを表示してみます。

※画像は使い回しですが、こんな感じの表示になると思います。

Line Numbers

Line Numbersは行番号を表示させるプラグインです。

導入は簡単で、以下のscriptタグとlinkタグを追加するだけです。

index.html

<head>
    <title>Prism.jsのテスト</title>
    <!-- Prism.js -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
    <!-- プラグイン -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/normalize-whitespace/prism-normalize-whitespace.min.js"></script>
+   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
+   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css">
</head>
<body>
    <p>ここからコード</p>
    <pre><code class="lang-js">
        const text = 'Hello World!';
        console.log(text);
    </code></pre>
    <p><code class="lang-js">console.log('これ')</code>はインラインコード</p>
</body>

Line Numbersでは、preタグかcodeタグのクラスにline-numbersを追加することで行番号を表示させることができます。

index.html

<body>
    <p>ここからコード</p>
-   <pre><code class="lang-js">
+   <pre><code class="lang-js line-numbers">
        const text = 'Hello World!';
        console.log(text);
    </code></pre>
    <p><code class="lang-js">console.log('これ')</code>はインラインコード</p>
</body>

どうでしょうか。結構わかりやすくなりませんか？

ちなみにインラインコードでは使えないみたいです。
Line Numbersのページに以下のように書かれていました。

Obviously, this is supposed to work only for code blocks (<pre><code>) and not for inline code.

DeepLによる和訳：

明らかに、これはコード・ブロック（<pre><code>）に対してのみ機能し、インライン・コードに対しては機能しないことになっている。

ここまで読んで他のプラグインに興味を持った方がいれば、ぜひ以下のサイトを見てみてください。

~~これでリンク載せるの3回目とか言わないで~~

プラグイン26種の見本画像とか載ってますし、何より日本語なので、結構参考にしやすいと思います。

また、二次ソースは不安だという方は、以下のリンクから公式の一覧（英語）も見てみてください。

~~これでリンク載せるの何回目だよとか言わないで~~

まとめ

Prism.jsをCDN経由で導入する場合は、以下のようにタグを追加する。

index.html

<head>
    <title>Prism.jsのテスト</title>
+   <!-- Prism.js -->
+   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
+   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
+   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
</head>
<body>
</body>

実際にハイライトしたい時は、preタグかcodeタグのクラスにlang-言語名を追加する。
例えばこんな感じ。

<body>
    <p>ここからコード</p>
    <pre><code class="lang-js">const text = 'Hello World!';
console.log(text);</code></pre>
    <p><code class="lang-js">console.log('これ')</code>はインラインコード</p>
</body>

対応言語一覧はこちら。

カラーテーマは公式ページトップの右側にあるボタンから見本が見れる。
ここから好きなカラーテーマを選ぶ感じになりそう。

カラーテーマのlinkタグは以下の形式になっている。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-テーマ名.min.css">

ボタンに書かれているカラーテーマ名と、上のlinkタグのprism-テーマ名.min.cssで使えるテーマ名の相関は以下。cdnjsなどから自分で調べることもできる。

DEFAULT: prism
DARK: prism-dark
FUNCY：prism-funky
OKAIDIA：prism-okaidia
TWILIGHT：prism-twilight
COY：prism-coy
SOLARIZED LIGHT：prism-solarizedlight
TOMORROW NIGHT：prism-tomorrow

プラグインは公式ページに一覧がある。
こちらが英語で読みづらい場合は、このページから探すのがおすすめ。

プラグインのタグは以下のようになっている。

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/プラグイン名/prism-プラグイン名.min.js"></script>

<!-- ものによってはCSSが必要 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/プラグイン名/prism-プラグイン名.min.css"></link>

プラグイン名は公式の一覧から入れたいプラグインを選択し、URLのprismjs.com/plugins/ここ/を抜き出せばいいと思う。多分（未検証）。

個人的にはNormalize WhitespaceとLine Numbersがおすすめ。
Normalize Whitespaceは導入するだけで余分な余白を消してくれる。
Line Numbersは導入したらpreタグかcodeタグのクラスにline-numbersを追加すると行番号が表示される。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up