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.15.9 documentation

 

未経験、異業種からIT業界に転身。フロントエンジニア。主にJavascript(React.js)をつかったWEBアプリ開発にたずさわる。
お仕事のご依頼はこちらから → genpsp10@gmail.com

psp7をフォロー
プログラミング
スポンサーリンク
psp7をフォロー
ハトらぼ

コメント