ソースコードのシンタックスハイライト表示
「Prism.js」によるソースコードのシンタックスハイライト表示
ソースコードをシンタックスハイライト表示するにはJSライブラリの「Prism.js」を使用します。
いくつか似たようなライブラリはありますが、その中でも動作が断トツに軽量で、導入方法も簡単です。
「Prism.js」ライブラリを使用すると下記のようにソースコード表示が綺麗に色分け、強調表示できます。対応言語は、HTML、CSS、PHP、Javascript、Python等様々な言語に対応しています。
<!DOCTYPE html>
<html>
<head>
...
<link href="themes/prism.css" rel="stylesheet" />
</head>
<body>
...
<script src="prism.js"></script>
</body>
</html>詳しい導入方法については下記サイトがわかりやすかったのでご覧下さい。
ソースコードをシンタックスハイライト表示する方法 – Prism.js