JavaScript

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

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

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”」を記述すると行数が表示されます。

prism.js使ってWebページにプログラミングコード(pre、codeタグ)のシンタックスハイライトを表示するデモページ

以下のデモページを開くと、指定したコードブロックにシンタックスハイライトが適用されているのが確認できます。

prism.js使ってWebページにプログラミングコード(pre、codeタグ)のシンタックスハイライトを表示するデモページ

注意点

  • ファイルパス:
    ダウンロードしたprism.jsとprism.cssファイルの場所を正しく指定してください。
  • 言語サポート:
    特定の言語のハイライトを使用する場合、その言語がPrism.jsに含まれていることを確認してください。
  • HTMLエスケープ:
    HTML内にコードを直接記述する場合、特殊文字(例えば<や>)を適切にエスケープする必要があります。

最後に

これで、Prism.jsを使った基本的な使い方をマスターしました!これを参考にして、Webページに美しいシンタックスハイライトを追加してみてください。

 

※流用される場合は自己責任でお願いします。
 デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。