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

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

概要

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

動作イメージ

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

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

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

ライブラリ : 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 タグのみの記述で指定領域内をハイライティングします。
導入の手順はこちらの記事を参照してください。