highlight.js を使ってソースを見やすくする

ブログ記事内にソースを記載している箇所をハイライトさせて、見やすくしたいと思い、簡単にできる方法を調べました。

検証環境

• WordPress 5.5.1
• highlight.js 10.2.0

設定方法

header.php の</head>タグの直上に以下を追記

<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.2.0/build/styles/vs.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.2.0/build/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

highlight.js の公式ページはこちら。

• highlight.js
  https://highlightjs.org/

highlight.jsは、189個の言語に対応しており、95個の表示テーマが用意されている。以下から、見た目や言語ごとの表示イメージが確認できる。

• highlight.js demo
  https://highlightjs.org/static/demo/