サイト制作のしらべ

サイト制作の調べた事を書いています。

ソースコードを綺麗に見せるhighlight.js使ってみた。

   

ソースコードの表示にエディターの用に綺麗に色を付けてくれるJSプラグイン。

highlight.js

highlight.js

hightlight.jsの使い方

ダウンロード版とCDN版があります。今回はCDN版を紹介します。

以下のCDNをまずは設置します。</body>タグの直前がお勧めです。最後にCSS,JSを読み込むのでページ表示の妨げになりません。

<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>

ちなみに私がブログで使う場合は、記事の最後に設置しています。記事ページを開いた時だけCSSとJSが動いて省エネです。使うときに記事に入力する手間がありますが。

<pre><code>ソースコード</code></pre>

そして使うときは、preタグとcodeタグでソースコードを囲みます。
ここまでの内容は、How to use highlight.js(公式ページ)に使い方が英語で書いています。

デザインの変更

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/default.min.css">//defaultの部分を変更

背景デザインを変更するときは、CDNのCSS部分の[default]の部分を書き換えます。変更するカラーコードは、デモページStylesリストから取得します。

キャプチャ

highlight.js デモページ

デザインは約66種類あります。Stylesに書かれている、カラーコードを書き換える注意点としてローマ字は小文字に、半角スペースは-(ハイフン)にして下さい。

  • Arta→arta
  • Atelier Cave Light→atelier-cave-light

また同じデモページに書かれているLanguage categoriesという名目があります。これは以下のように使います

<pre><code class="html">...</code></pre>

クラス属性にハイライトさせたい言語(Language)の種類を入れます。基本的に自動的に判別してくれるので今の所使っていません。

まとめ

ソースコードをブログにメモろうと思って綺麗に表示するJSライブラリーを使ってみました。今回[androidstudio]というカラーコードに変更しました。軽量で使いやすいと色々なブログに書いてあったので導入するに至った次第です。

ちなみにソースコードを表示する時にタグ文字を特殊文字に置き換えないといけないので少し楽になるように一括置換えツールを作りました。


 - JavaScriptの調べ