[highlight.js] WordPressサイトでコードを埋め込むために実装しておきたいJS

Highlight.js とは

highlight.js は HTML にソースコードを表示するとき、キーワードなどを強調表示するためのJavaScriptライブラリです。対応言語がとても多くパレットが豊富で、そして設置が簡単です。

　

準備編

まずサイトで動かすのに必要な、jsやcssを読み込む設定をします。
2021/3/31時点での最新はversion 10.7.1でした。

CDNでの設置の方向け

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

公式サイトからダウンロードして設定したい方向け

Syntax highlighting for the Web 公式サイト

<link rel="stylesheet" href="ダウンロードしたフォルダ名/default.min.css">
<script src="ダウンロードしたフォルダ名/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

　

使い方編

<pre>
 <code>
  表示したいコードをここに書く
 </code>
</pre>

WordPressで使いたい場合は、下記のように投稿画面の「コード」を選択してその中に表示したいコードを書けば表示されます。

　

パレット（コードや背景色）の変更

パレットの変更は、準備編にあるlink タグの href 属性を変更します。
default.css の「default」の部分を変更します。

各パレットのデモはhighlight.js demoで確認できます。

私の場合は普段の実装がSublime Textを利用しているので、パレットもわかりやすいように「Monokai Sublime」を選びました。

変更前

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/default.min.css">

変更後

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/monokai-sublime.min.css">

　

まとめ

コードのハイライト系プラグインは色々ありますが、ページ速度がかなり落ちるので今回を機にJSでの実装を行いました。

テーマのカスタマイズが苦手な方は、プラグインでの設置をおすすめしますができればこっちに変えた方がいいのではないかなとは思います。

プラグインで設定する人におすすめなのは下記の3つかな。
個人的にはEnlighterが更新頻度が多いのでいいかなと思いますが、対応言語についてはその他2つの方が多めです。

• Enlighter – Customizable Syntax Highlighter
• Crayon Syntax Highlighter
• mivhak