シンタックス ハイライティング (Syntax Highlighting) ライブラリの紹介です。
Webページでソースコードを掲載する際に、キーワードなどを別の色で表示したいことがあります。HTMLでキーワードのカラーを変更すれば対応できますが、ソースコードに対してカラーの設定を個別にするのは大変です。Syntax Highlighting のライブラリを用いると、掲載したソースコードを解析して自動でキーワードにカラーを設定することができるようになります。
この記事では、シンタックス ハイライティング (Syntax Highlighting) の処理をするライブラリについて紹介します。
キーワード部分がカラーリングされます。
Webサイト : https://prismjs.com
後発の*シンタックス ハイライティグライブラリです。pre
タグ内に code
タグを記述する方式です。
導入の手順はこちらの記事を参照してください。
Webサイト : https://highlightjs.org/
こちらも古くからあるライブラリですが、新しい言語への対応など、頻繁にバージョンアップしています。
pre
タグ内に code
タグを記述する方式です。
導入の手順はこちらの記事を参照してください。
Webサイト : https://github.com/google/code-prettify
Google のオープンソースのシンタックス ハイライティグのライブラリです。
pre
タグ内に code
タグを記述する方式です。
導入の手順はこちらの記事を参照してください。
Webサイト : https://alexgorbatchev.com/SyntaxHighlighter/
古くからあるシンタックス ハイライティグのライブラリです。pre
タグのみの記述で指定領域内をハイライティングします。
導入の手順はこちらの記事を参照してください。