技術資料

highlight.js 入門 ― CDN を活用したシンタックスハイライトの基本ガイド

作成日:2025.06.05

highlight.js を使ったシンタックスハイライトの導入方法を具体的なコード例とともに紹介します。CDN 経由でライブラリを読み込み、HTML コード内の <pre> と <code> タグを利用して、正確な言語指定とスタイル適用を実現する手法を分かりやすく解説。初心者でもすぐに実装できる内容となっています。

highlight.js とは

highlight.js は、コードのシンタックスハイライトを行うための JavaScript ライブラリです。HTML 内にコードを記述するときに、言語ごとに適切なスタイルを適用してくれます。

基本的な使い方

highlight.js を使うためには、まずライブラリを読み込む必要があります。以下のように、CDN からスクリプトとスタイルシートを読み込みます。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>

<script>hljs.highlightAll();</script>

hljs.highlightAll(); を実行することで、ページ内のすべてのコードブロックに対してハイライトが適用されます。

コードブロックの記述方法

コードブロックは、以下のように HTML の <pre><code> タグを使用して記述します。言語を指定するためには、class 属性に language-言語名 を付けます。

<pre><code class="language-php"><?php
echo "Hello, World!";
?></code></pre>

クラスで言語を指定しなくても、highlight.js は自動的にコードの言語を検出しますが、明示的に指定することでより正確なハイライトが適用されます。

クラスに指定できる言語

highlight.js で指定できる言語は、Supported Languages — highlight.js 11.9.0 documentation に一覧で掲載されています。

一覧の「Aliases」の欄の文字列を、 class="language-xxx"xxx の部分に指定します。

例えば、Perl の場合は、 Aliases に perl, pl, pm とあるので、class="language-perl" の他に class="language-pl"class="language-pm" が使えます。

テーマの変更

highlight.js には、いくつかのテーマが用意されています。CDN から読み込む際に、スタイルシートの URL を変更することでテーマを変更できます。

Demo - highlight.js では、さまざまなテーマを試すことができます。

各テーマのCSSファイルは highlight.js/src/styles at main · highlightjs/highlight.js · GitHub にあります。

まとめ

highlight.js を使うことで、コードのシンタックスハイライトを簡単に適用できます。HTML 内にコードを記述する際に、言語を指定するだけで自動的にハイライトが行われるため、視覚的にわかりやすいコード表示が可能になります。

特に、プログラミングのチュートリアルやドキュメントを作成する際に非常に便利です。

詳しい使い方やカスタマイズ方法については、Highlight.js Documentation — highlight.js 11.9.0 documentation を参照してください。

この記事を書いた人

※上が私です。

奈良市を拠点に、26年以上の経験を持つフリーランスWebエンジニア、阿部辰也です。

これまで、ECサイトのバックエンド開発や業務効率化システム、公共施設の予約システムなど、多彩なプロジェクトを手がけ、企業様や制作会社様のパートナーとして信頼を築いてまいりました。

【制作会社・企業様向けサポート】
  • 専任エンジニアのいない企業様に対するシステム面の不安を解消
  • 柔軟な契約形態や短納期での対応により、急なニーズにも迅速にサポート
  • システムの企画段階から運用まで、ワンストップでのサービスを提供

Webシステムの開発やサイト改善でお困りの際は、どうぞお気軽にご相談ください。小さな疑問から大規模プロジェクトまで、最適なご提案を心を込めてさせていただきます。

ぜひ、プロフィールWeb制作会社様向け業務案内一般企業様向け業務案内もご覧くださいね。

contenteditableで作るインライン編集システムとデータ送信の仕組み

2024.12.03

contenteditable属性を利用すれば、HTML内のテキストを直接編集できるインターフェースを構築できます。 本記事では、contenteditableを活用したインライン編集機能の実装手法について解説します。 UIの向上を目指す際の参考として。

CSS HTML JavaScript jQuery

datalistとJavaScriptで作るタグ入力フォームの実装ガイド

2024.11.17

ブログやアプリケーションで便利な「タグ入力フォーム」。この記事では、datalist要素を利用して、既存タグの選択と新規タグの追加を同時に実現するUIの作成方法をご紹介します。さらに、JavaScriptとCSSを活用して、複数選択対応やタグ削除機能、Enterキーでのタグ追加機能も実装。タグ入力フォームを効率的かつユーザーフレンドリーにカスタマイズする方法を詳しく解説します。

CSS HTML JavaScript jQuery

ダッシュボードのパフォーマンス改善:Ajaxとiframeの実践例

2024.12.11

サーバーサイドですべてを処理してから画面を出力するのではなく、データを分割して効率的に表示する手法をご紹介。Ajaxとiframe、それぞれの特徴や実装例をわかりやすく解説します。

HTML JavaScript jQuery

Google FontsのMaterial Symbols 基本設定メモ

2024.12.10

Google FontsのMaterial Symbols and Iconsの基本的な使い方をまとめた記事です。導入手順や、アイコンとテキストを綺麗に揃えるためのCSS設定例について解説しています。

CSS HTML

阿部辰也へのお仕事の依頼・お問い合わせ

軽いご相談もお気軽にどうぞ!

個人情報の取り扱いについて *必須 プライバシーポリシーをご確認いただき、同意いただける場合は「同意する」にチェックをしてください。

keyboard_double_arrow_up
TOP