JavaScript

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

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

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を自由に使用できるため、広く使われています。ただし、使用する際はライセンスの全文を確認し、その条件に従う必要があります。

最後に

これでHighlight.jsの基本的な使い方をマスターできます。このツールを使って、Webページ上で美しいコードハイライトを実現しましょう。

 

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