初心者向け！Webページにカラフルなコードハイライトを追加するHighlight.js入門｜DAD UNION

Highlight.jsは、Webページ上でソースコードにシンタックスハイライト（色分け表示）を行うためのJavaScriptライブラリです。初心者向けに、その使用方法を簡単に説明します。

Contents

Highlight.jsをダウンロード
HTMLファイルにHighlight.jsを組み込む
コードブロックのマークアップ
highlight.js使ってWebページにカラフルなコードハイライトを表示するデモページ
注意点
最後に

Highlight.jsをダウンロード

Highlight.jsの公式サイト（Highlight.js）にアクセスします。
「Download」セクションで、必要なプログラミング言語を選択します。選択しなくてもダウンロードできます。
「Download」ボタンをクリックすると、選択した言語のHighlight.jsファイルがダウンロードできます。

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

ダウンロードしたファイル一式内にあるhighlight.jsとdefault.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>highlight.js使ってWebページにカラフルなコードハイライトを表示するデモページ</title>

<!-- Highlight.jsのCSSファイルを組み込む -->
<link rel="stylesheet" href="path/to/styles/default.css">
</head>
<body>

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


<pre>
<code class="language-javascript">// ここにJavaScriptのコードを書きます
console.log("Hello, world!");
</code>
<code>
body {
  font-size: 16px;
  text-align: left;
}
h1{
  text-align: center;
  font-size: 20px;
  padding: 20px 0;
  line-height: 1.8em;
}
</code>
<code>
echo "こんにちは、世界！";
</code>
</pre>


<!-- Highlight.jsのJavaScriptファイルを組み込む -->
<script src="path/to/highlight.pack.js"></script>
<script>hljs.highlightAll();</script>
</body>
</html>

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

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

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

　
Highlight.jsは多くの言語を自動的に検出しますが、特定の言語を明示的に指定（例：codeタグにclass=”language-javascript”を記述）することもできます。

highlight.js使ってWebページにカラフルなコードハイライトを表示するデモページ

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

highlight.js使ってWebページにカラフルなコードハイライトを表示するデモページ

注意点

ファイルパス：
ダウンロードしたhighlight.jsとcssファイルの場所を正しく指定してください。
HTMLエスケープ：
HTML内にコードを直接記述する場合、特殊文字を適切にエスケープする必要があります。
ライセンス：
Highlight.jsはBSDライセンスの下でリリースされています。このライセンスは非常に寛容なもので、商用や非商用プロジェクトにおいても制限なく使用することができます。
商用プロジェクトやオープンソースプロジェクトにおいてもHighlight.jsを自由に使用できるため、広く使われています。ただし、使用する際はライセンスの全文を確認し、その条件に従う必要があります。