ワードプレスでソースコードを記事内に記述したいときに、コードを読みやすくするハイライト機能を追加する方法はいくつかあります。
高機能のプラグインも存在しますが、機能が多い半面、表示が重くなりやすい、というデメリットもあります。
今回紹介する「highlight.js」は、プラグインのインストール不要で、数行をテンプレートに記述するだけで設定でき、余計な機能もないため表示も軽いライブラリです。
highlight.js 公式サイト
highlight.js
highlight.jsをワードプレスに設定
header.phpの適当な箇所（headタグ部分）に以下を追記します。
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>ダウンロードしたcssやjsファイルをサーバにアップし、各ファイルを読み込む方法もありますが、上記の方法であれば、3行の追記のみで使用可能となり、一番簡単な方法としておすすめです。
（CDNという外部サービスのファイルを読みこませる仕組みのため、インターネットに接続されていない環境では反映されません）
記事内でハイライトさせる書き方
次のように、preタグとcodeタグにコードを囲むようにして投稿すると自動で強調表示されます。
<pre><code>...{コードを書く}...</code></pre>HTMLタグを表示させたい場合は、次のようなツールでエスケープさせましょう。
パレット（ハイライトの色）を変えたい場合
上記でheader.phpに追記したcss部分を変更することで、ハイライトの色を変更することができます。
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/styles/default.min.css">
default.min.cssの場合
solarized-dark.min.cssの場合
以下ページから、cssの種類を選べます。記述するときは、”.css”の前に”.min”をつける必要があります。
https://github.com/isagalaev/highlight.js/tree/master/src/styles
おわりに
以上、WordPressの記事内でコードをハイライトさせるライブラリhighlight.jsのご紹介でした。WordPress以外でも、普通のhtmlサイトでも利用は可能です。
ぜひ参考にしてください。
