【highlight.js】 「ハイライト」を止める方法

こんにちは、さち です。

このブログでは、「HTML」「CSS」「JavaScript」などのサンプルコードを「ハイライト」するのに、「highlight.js」を使っています。

ただ、「ハイライト」したくないときもあるんですよね。

ハイライトを止める機能が「highlight.js」に用意されているんですが、たまの一回しか使わないので、方法をすぐ忘れてしまいます。

そこで今回は、「highlight.js」でハイライトを止める方法について書いていきます。備忘録です。

サンプルコード

HTML

<pre>
<code>
.class {
  width: 201px !important;
  height: calc(217em - 17%);
}
</code>
</pre>

結果

.class {
  width: 201px !important;
  height: calc(217em - 17%);
}

「highlight.js」の機能によって「ハイライト」されていますね。

この「ハイライト」を止めてみましょう。

ハイライトを止める

HTML

<pre>
<code class="nohighlight">
.class {
  width: 201px !important;
  height: calc(217em - 17%);
}
</code>
</pre>

「ハイライト」させたくない場合は、nohighlight または plaintext という「クラス」を追加します。

結果

.class {
  width: 201px !important;
  height: calc(217em - 17%);
}

ちゃんと「ハイライト」されていませんね。