【JavaScript】 はてなブログのような Syntax Highlight を導入する

highlightjs.png

はてなブログのように、ソースコードを表示させるために、highlight.js を利用してみます。

CMSのプラグイン依存でなく、JavaScriptのプラグインを使用することで、どんな環境でも使用することができます。また、軽量な上に数多くの言語に対応しています。

CDN を利用する

highlight.js は CDN を利用することが可能なので、ヘッダーに以下の記述をすることで早速使うことができるようになります。

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


ダウンロードして使う

highlight.js はダウンロードして使うこともできます。その際に、どの言語を使うのか選べるので、さらに軽量化することができます。

トップページから「Get version」ボタンを押すと、言語を選ぶことができるので、必要なものだけをピックアップしてダウンロードします。

highlightjs2.png

ダウンロードしてきたら、上記の「CDN を利用する」と同じように、CSS と JS を読み込ませる記述をします。

 

ソースコードを HTML に表示させる

ソースコードを HTML に表示させるためには、<pre><code></code></pre> の間にソースコードを記述します。ソースコードは、実体参照変換をしてからでないと使えません。

例:

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

を表示させるには、

&lt;link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/default.min.css"&gt;
&lt;script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"&gt;&lt;/script&gt;
&lt;script&gt;hljs.initHighlightingOnLoad();&lt;/script&gt;

のように変換させます。

私は、ココの変換サービスを使ってます。


コードの色を変える

デフォルトだと若干色が地味なので、コードの色を変えるために、CSSを用意します。

highlight.js demo から、好きなCSSを選んできます。たとえば、このブログの場合は XCODE を利用しているので、highlight.js 用のCSSをデフォルトから、以下のように変えます。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/xcode.css">


参考文献

ソースコードをハイライトする軽量ライブラリ、Highlight.jsの使い方
Crayonを捨てた。Syntax Highlightするならhighlight.jsが良さそう

comments powered by Disqus