初心者のためのPrism.jsガイド：コードを美しくハイライトする簡単ステップ｜DAD UNION

このサイト内でも使用してますが、Prism.jsを使用する方法を初心者向けに説明します。
Prism.jsは、Webページにプログラミングコードのシンタックスハイライトを提供する軽量で簡単に使用できるJavaScriptライブラリです。以下は、Prism.jsを使う基本的なステップです。

Contents

Prism.jsをダウンロード
HTMLファイルにPrism.jsを組み込む
コードブロックのマークアップ
prism.js使ってWebページにプログラミングコード（pre、codeタグ）のシンタックスハイライトを表示するデモページ
注意点
最後に

Prism.jsをダウンロード

Prism.jsの公式サイト（Prism.js）にアクセスします。
必要な言語、テーマ、プラグインを選択します。
今回は行数を表示するため「Line Numbers」にチェックを入れました。
「Download」ボタンをクリックして、カスタマイズされたPrism.jsとCSSファイルをダウンロードします。

HTMLファイルにPrism.jsを組み込む

ダウンロードしたprism.jsとprism.cssファイルをHTMLファイルに組み込みます。これは通常、headタグ内にCSSファイルを、bodyタグの終わり近くにJavaScriptファイルを設定します。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>prism.js使ってWebページにプログラミングコード（pre、codeタグ）のシンタックスハイライトを表示するデモページ</title>

<!-- Prism.jsのCSSファイルを組み込む -->
<link href="prism.css" rel="stylesheet" />
</head>
<body>

<h1>prism.js使ってWebページにプログラミングコード（pre、codeタグ）のシンタックスハイライトを表示</h1>

<pre class="line-numbers"><code class="language-javascript">// ここにJavaScriptのコードを書きます
console.log("Hello, world!");
</code></pre>

<!-- Prism.jsのJavaScriptファイルを組み込む -->
<script src="prism.js"></script>
</body>
</html>

コードブロックのマークアップ

Prism.jsを使用してハイライトしたいコードブロックを、pre、codeタグで囲み、適切な言語クラスを指定します。例えば、JavaScriptのコードをハイライトする場合は以下のようにします。

<pre class="line-numbers"><code class="language-javascript">// ここにJavaScriptのコードを書きます
console.log("Hello, world!");
</code></pre>

　
codeタグの「class=”language-javascript”」部分が、Prism.jsがどの言語のシンタックスハイライトを適用すべきかを指定します。
行数を表示するため「Line Numbers」にチェックを入れてダウンロードしたのでpreタグに「class=”line-numbers”」を記述すると行数が表示されます。