Webページでのコードハイライト ライブラリの紹介

シンタックス ハイライティング (Syntax Highlighting) ライブラリの紹介です。

概要

Webページでソースコードを掲載する際に、キーワードなどを別の色で表示したいことがあります。HTMLでキーワードのカラーを変更すれば対応できますが、ソースコードに対してカラーの設定を個別にするのは大変です。Syntax Highlighting のライブラリを用いると、掲載したソースコードを解析して自動でキーワードにカラーを設定することができるようになります。
この記事では、シンタックス ハイライティング (Syntax Highlighting) の処理をするライブラリについて紹介します。

動作イメージ

シンタックス ハイライティングが無い表示例

Webページでのコードハイライト ライブラリの紹介:画像1

シンタックス ハイライティグのある表示例

キーワード部分がカラーリングされます。

Webページでのコードハイライト ライブラリの紹介:画像2

ライブラリ : Prism

Webサイト : https://prismjs.com

後発の*シンタックス ハイライティグライブラリです。pre タグ内に code タグを記述する方式です。

導入の手順はこちらの記事を参照してください。

ライブラリ : highlight.js

Webサイト : https://highlightjs.org/

こちらも古くからあるライブラリですが、新しい言語への対応など、頻繁にバージョンアップしています。
pre タグ内に code タグを記述する方式です。

導入の手順はこちらの記事を参照してください。

ライブラリ : Google Code Prettify

Webサイト : https://github.com/google/code-prettify

Google のオープンソースのシンタックス ハイライティグのライブラリです。
pre タグ内に code タグを記述する方式です。

導入の手順はこちらの記事を参照してください。

ライブラリ : SyntaxHighlighter

Webサイト : https://alexgorbatchev.com/SyntaxHighlighter/

古くからあるシンタックス ハイライティグのライブラリです。pre タグのみの記述で指定領域内をハイライティングします。

導入の手順はこちらの記事を参照してください。


このページのキーワード
  • シンタックス ハイライティング
  • Syntax Highlignting
AuthorPortraitAlt
著者
iPentecのプログラマー、最近はAIの積極的な活用にも取り組み中。
とっても恥ずかしがり。
作成日: 2019-12-02
改訂日: 2023-12-26
Copyright © 1995–2025 iPentec all rights reserverd.