コードをハイライト表示するためのWordPressプラグインを探していたのですが、過去に人気だった「Crayon syntax highlighter」は4年間更新されておらず、「Enlighter – Customizable Syntax Highlighter」と「SyntaxHighlighter Evolved」は、ブロックエディタにも対応しているものの、専用のclass指定が必要なため、気軽に乗り換えることができません。(SyntaxHighlighter Evolvedは設定からclass名を追加することもできますが、乗り換えのたびに追加が必要になる)
というわけで、JSで実装することにしました。
使うのは「highlight.js」。
設置方法
CDNでの設置なら下記を書くだけで実装できます。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/vs.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
そのままだと余白がなかったりしたので、下記のCSSを追加して使っています。
.hljs {
padding: 15px 20px;
border-radius: 5px;
}