ブログ記事内にソースを記載している箇所をハイライトさせて、見やすくしたいと思い、簡単にできる方法を調べました。
検証環境
- 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/
