sk51.log

The Averageman's web log.

シンタックスハイライトの決定版「highlight.js」


2015年11月20日 Web制作

ブログを書いていると、どうしても軽量のシンタックスハイライトが欲しくなります。
wordpressではプラグインで用意されていて、当ブログでもプラグインを使用していました。
しかし、高機能すぎて重いのが難点でした。

そこで軽量のシンタックスハイライトがないかと探したところ、ありました。
早速使うことにしましたが、そのシンタックスハイライトが「highlight.js」です。
設置も簡単で、軽く、137言語対応、65個のテーマがありと、シンタックスハイライトの決定版と言っても過言ではありません。
今回は、この「highlight.js」があまりにも優秀でしたのでご紹介します。

highlight.js

1. highlight.jsの設置

highlight.jsは、CDNでホスティングされているのでダウンロードせずにすぐに使えます。

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

あとは、コードを書くだけです。

<pre><code class="html">ここにコードを書きます。
</code></pre>

class名を変更するだけで、言語の切り替えができます。
注意点は、一行目に改行を入れてしまうと反映されてしまいますので、<code>の直後に書き始めます。

2. テーマの変更

ハイライトのテーマは、65種類用意されています。
GitHubからダウンロードして使用しますが、あまりにも数が多いため、デモサイトで先に好きなテーマを探します。
highlight.js demo
highlight.js/src/styles at master · isagalaev/highlight.js · GitHub

あとは、default.min.cssの読み込みを削除し、好きなテーマを読み込ませるだけで終了です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

*

CAPTCHA