WordPressでシンタックスハイライト- 【highlight.js】

WordPressでサンプルコードなどを載せたい時に、シンタックスハイライトする方法について、プラグインなしで【highlight.js】を試した時のメモです。

highlight.jsとは

highlight.js – Syntax highlighting for the Web
https://highlightjs.org/

highlight.jsの特徴

1. jQueryいらずで軽量
2. 言語の自動判別が可能
3. マイナー言語にも対応

highlight.jsの組み込み方

CDNを利用するか、ダウンロードして使います。
https://highlightjs.org/download/

A prebuilt version of highlight.js with 25 commonly used languages is hosted by following CDNs:

CDNでは共通の25プログラム言語対応なので、他に使いたい言語がある場合、カスタマイズしてダウンロードして使います。

CDNの場合 (versionは最新を確認ください)

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

CSSで好きなスタイルを選ぶことができます。

デモで確認できます。
highlight.js demo

CDN一覧
https://cdnjs.com/libraries/highlight.js/

僕は、tomorrow-night.min.cssを使っています。

highlight.jsの呼び出し

hljs.initHighlightingOnLoad()関数を呼ぶとコードハイライトのスタイルが適用されます。

<script>hljs.initHighlightingOnLoad();</script>

HTMLでコードブロックを記述する

<pre> <code>のコードブロック部分が、highlight.jsハイライトされます。
下記のような見え方になります。

<pre>
<code>
function $initHighlight(block, cls) {
  return (
    <div>
      <web-component>{block}</web-component>
    </div>
  )
}

export  $initHighlight;
</code>
</pre>

WordPressで、Markdown記法を使う場合

Markdownk記法のコードブロックの書き方、バッククウォート（`）3つ以上で囲みます。

```
function $initHighlight(block, cls) {
  return (
    <div>
      <web-component>{block}</web-component>
    </div>
  )
}

export  $initHighlight;
```

WordPressの記事ブロックに貼り付けると、<pre> <code>に変換され、 highlight.jsのコードハイライトのスタイルが適用されます。

まとめ

Markdown記法でコードを書いても、シンタックスハイライトされるようになりました。

JSやCSSを追加しないと、行番号やファイル名が出ないのがデメリットなので、次はprism.jsなどの別のライブラリも試してみたいと思います。

関連記事