コードをハイライトで見やすくするJSライブラリHighlight.jsの紹介
Highlight.jsの使い方、カスタマイズ方法を紹介したいと思います。
なぜHighlight.jsを使うのか
私の様なブロガーですと、Wordpressで運営されている方が多いと思います。
WordPressのプラグインの中には、有名なCrayon Syntax Highlighterの他にも様々なコードをハイライトするプラグインが存在します。
じゃあなぜHighlight.jsを使うのか。
それには3つ理由があります。
- 非常に動作が軽くサイトに負担が掛からない
- プラグインを増やさないで済む
- 見やすい
特に2つ目のプラグインを増やさないで済むのが、私にとって1番の理由になります。プラグインは増えすぎると何か問題があった時に何が問題か分かりづらくなったりするので。
Highlight.jsの見え方
色々なスタイルが用意されているので、highlight.js demoから好きなスタイルを探すと良さそうです。
<!DOCTYPE html>
<title>Title</title>
<style>body {width: 500px;}</style>
<script type="application/javascript">
function $init() {return true;}
</script>
<body>
<p checked class="title" id='title'>Title</p>
<!-- here goes the rest of the page -->
</body>私が使っているのは上記のスタイル。
Highlight.jsの設置方法
CDNで使う方法と、ダウンロードしてサーバーに上げて使う方法がありますが、簡単なのでCDNを使った方法のみを紹介します。
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>上記をheaderとかbodyの最後とかに入れれば設置完了です。
Highlight.jsの使い方
<pre><code>………</code></pre>これの中にコードを書けばオッケーです。
プラグインのAddQuicktagとかで登録しておけば使いやすいと思います。
文字参照について
Highlight.jsを使う上で注意する点として、<や>を使うときには、文字参照で書きましょう。そうしないと、うまく出力されない場合があります。
いちいち文字参照に直すのめんどくさい！という人はHTML実体参照変換サービスを使って変換しちゃいましょう。
良く使う文字参照
| < | > | & | " |
|---|---|---|---|
| < | > | & | " |
Highlight.jsのスタイルの変更方法
highlight.js demoから好きなスタイルを見つけたら、Chromeのコンソールで何のcssが使われているかを確認します。
上記画像で言うと、atelier-dune-darkになりますね。
atelier-dune-darkを先ほど設置時に入れたcssの部分のdefaultの上から上書きすれば完了です。
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/atelier-dune-dark.min.css">以上、Highlight.jsの紹介でした。
スポンサーリンク
コメント欄
コメントを書く