WordPressテーマCocoonでコードハイライトの言語を指定【highlight.js】

Cocoonでコードハイライトの言語を指定

WordPressテーマのCocoonではデフォルトでコードハイライト機能が備わっています。

このコードハイライト機能には highlight.js が使われているようです。highlight.jsは基本的に自動で言語を判定してハイライトしてくれるのですが、たまに判定されなかったり別の言語として認識されてしまうことがあります。

この場合は手動でclassを指定することで、言語を指定することができます。

preタグにclassを記述して言語を指定

コードをハイライトしたい場合、preタグ内に書くことになりますが、このpreタグにclassを指定することで言語を指定できます。

例えば、javascriptを指定したい場合、下のように書きます。

<pre class="js">
console.log("this is a javascript code.")
</pre>

javascriptだけでなく、jsxなんかも指定できます。

classの一覧は下の公式リファレンスを参照してください。

CSS classes reference — highlight.js 9.12.0 documentation

 

コメント