Prism.jsを導入してみた

# はじめに

この記事は、[highlight.js](https://highlightjs.org/)から[Prism.js](https://prismjs.com/)に移行した際の備忘録です。
Prism.jsの導入からテーマの変更、プラグインの適用等をやりました。

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

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


## 環境など

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


## 参考

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

https://toach.biz/blog/prismjs-basics/

https://www.webdesignleaves.com/pr/plugins/prism-syntax-highlighter.html

https://qiita.com/taqumo/items/825c862517ba9d8567a1

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

https://ama-memo.com/posts/uses-prismjs-plugins/#toc120


# Prism.jsを導入する

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

## Prism.jsとは

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

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

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

詳しくは[公式ページ](https://prismjs.com/)（英語）を見てください。

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


## 導入方法

:::note info
ここではCDNを経由した方法でPrism.jsを導入します。
特に理由がない限りCDNで大丈夫だと思いますが、他には[こちら](https://prismjs.com/download.html#themes=prism)からファイルをダウンロードする方法もあります。
:::

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

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


### 必要なタグを追加する

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

```diff_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>
```

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

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

* * *

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

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

https://prismjs.com/index.html#basic-usage-cdn

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

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

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


#### 言語ファイルとは

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

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

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

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


#### オートローダーを使う

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

https://prismjs.com/plugins/autoloader/

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

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

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

詳しくは[公式ページ](https://prismjs.com/plugins/autoloader/)（英語）を見てみてください。


### コードをハイライトする

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

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

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

ちなみに、`class`の書き方はこんな感じです。
* `class`を指定するのは`pre`タグでも`code`タグでも大丈夫
* `lang-言語名`は`language-言語名`でも大丈夫
* 言語名は`javascript`などのフルネームと`js`や`ts`などのエイリアスが使える
    * 対応言語一覧は[こちら](https://prismjs.com/#supported-languages)
* この`class`を書かないとPrism.jsに認識されない

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

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

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

```diff_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>
```

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

![prism-preview.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588083/aa4ada48-5024-8128-ffde-d0de25932aff.png)

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


### バージョンを変更する

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

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

まず、CDNを利用した導入方法は[こちら](https://prismjs.com/index.html#basic-usage-cdn)から見ることができます。
ここに載っている方法には、以下のようなタグが書かれています。

```html:公式サイトから引用
<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](https://cdnjs.com/libraries/prism), [jsDelivr](https://www.jsdelivr.com/package/npm/prismjs), and [UNPKG](https://unpkg.com/browse/prismjs@1/).

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

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


#### バージョンについて

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

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


# カスタマイズする

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

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


## カラーテーマを変更する

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

各テーマがどんな感じかは、[公式ページ](https://prismjs.com/index.html)の右側にあるカラーテーマ変更ボタンを押して見てみてください。
もしくは、[Prism.js 使ってみた](https://qiita.com/taqumo/items/825c862517ba9d8567a1#テーマを選択)という記事に一覧が載っているので、こちらを参考にしてみてください。

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

* 既存の`link`タグの`href`のテーマ名部分を変更する方法
* [cdnjs](https://cdnjs.com/libraries/prism/1.29.0)からURLをコピーする方法


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

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

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

```diff_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`タグです。
見やすくなるように改行を入れています。

```html
<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](https://cdnjs.com/libraries/prism/1.29.0)です。

* 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に変えると、こんな感じになります。

```diff_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">
+   <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>
```

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

![prism-tomorrow.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588083/56a4dbd6-7852-d4e5-16de-981401635217.png)


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

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

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

https://cdnjs.com/libraries/prism/1.29.0

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

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

![画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588083/88cab723-3f24-ff43-f62e-971ea6109ad1.png)

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

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

```diff_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">
+   <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>
```

![prism-tomorrow.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588083/56a4dbd6-7852-d4e5-16de-981401635217.png)

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

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


## プラグインを導入する

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


### プラグインの探し方

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

プラグイン一覧は[公式ページ](https://prismjs.com/plugins/)に載っていますが、英語なので読むのが辛いという方は、以下のページを参考にするのがいいと思います。

https://ama-memo.com/posts/uses-prismjs-plugins/#toc120

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

```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から関係しそうなファイルを探してタグを追加してください。
[このページ](https://cdnjs.com/libraries/prism/1.29.0)からページ内検索を使っていけばそれっぽいものが見つかると思います。

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


### Normalize Whitespace

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

https://prismjs.com/plugins/normalize-whitespace/

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

```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>
```

![改行.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588083/61e0529d-7825-8aaf-15ce-2e510518883a.png)

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

```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>
```

```diff_html:今の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は読みやすくなりましたが、その代わりブラウザで見た時に変な改行とインデントが入ってしまっています。

前：
![prism-preview.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588083/aa4ada48-5024-8128-ffde-d0de25932aff.png)

今：
![改行.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588083/61e0529d-7825-8aaf-15ce-2e510518883a.png)

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

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

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

```diff_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>
+   <!-- プラグイン -->
+   <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を表示してみます。

![prism-preview.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588083/aa4ada48-5024-8128-ffde-d0de25932aff.png)

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


### Line Numbers

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

https://prismjs.com/plugins/line-numbers/

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

```diff_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>
    <!-- プラグイン -->
    <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`を追加することで行番号を表示させることができます。

```diff_html: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.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3588083/760b1205-97f3-1a03-db6e-8c6fe981b09c.png)

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

ちなみにインラインコードでは使えないみたいです。
[Line Numbersのページ](https://prismjs.com/plugins/line-numbers/)に以下のように書かれていました。

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

DeepLによる和訳：

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

* * *

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

https://ama-memo.com/posts/uses-prismjs-plugins/#toc120

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

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

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

https://prismjs.com/plugins/

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


# まとめ

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

```diff_haml: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-言語名`を追加する。
例えばこんな感じ。

```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>
```

対応言語一覧は[こちら](https://prismjs.com/#supported-languages)。

* * *

カラーテーマは[公式ページトップ](https://prismjs.com/index.html)の右側にあるボタンから見本が見れる。
ここから好きなカラーテーマを選ぶ感じになりそう。

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

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

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

* 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`

* * *

プラグインは[公式ページ](https://prismjs.com/plugins/)に一覧がある。
こちらが英語で読みづらい場合は、[このページ](https://ama-memo.com/posts/uses-prismjs-plugins/#toc120)から探すのがおすすめ。

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

```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>
```

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

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