highlight.jsでソースコードのハイライト表示をする

highlight.jsを使ってソースコードを美しく掲載しましょう！　ここではポイントを3つに分けてご紹介します。

スタイルを選ぶ
highlight.js の使い方
フォントを変える

スタイルを選ぶ

highlight.jsのデモでハイライトのスタイルを選びます。89もあるので悩みまくりますね…

トップページのデモなら、”style”をポチポチ押していくだけで主なスタイルを見せてくれます。

よく使う言語での見え方を比較して、一番見やすくてサイトのテイストに合ったスタイルを見つけましょう。

highlight.js の使い方

<head>内でライブラリを読み込んで、スクリプトを実行します。

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

“…/default.min.css”のところは、実際に使用するスタイルの名前に直します。

あとは表示したいコードを<pre><code>で囲むだけ！

<pre><code>@font-face {
  font-family: Chunkfive; src: url('Chunkfive.otf');
}
body, .usertext {
  color: #F0F0F0; background: #600;
  font-family: Chunkfive, sans;
}</code></pre>

不要な改行が入らないよう、<code>の後に改行を入れずにコードの1行目を書きます。

言語は自動的に判別してくれるようなので、通常は指定しなくて大丈夫です。指定する場合には<code class=”css”>のようにclassを追加します。

詳しい使い方について、正確な情報はこちらからどうぞ。How to use highlight.js

ちなみに当ブログでは無料WordpressテーマSimplicity2を使用しており、highlight.jsが搭載されています。【管理画面＞外観＞カスタマイズ＞ソースコード】から設定することができます。

フォントを変える

せっかくハイライトするなら、フォントも変えて見栄えを良くしたいところですね。

まずはGoogle Fontsでいい感じのフォントを見つけます。 Categoriesのフィルターを使って、Monospaceのフォントに絞り込むと早いです。（ちなみに私のお気に入りはBracketsのデフォルトにもなっているSource Code Proです。）

使うフォントが決まったら、<code>に当てましょう。

以下のcssを追加します。

@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');
code{
  font-family: 'Source Code Pro', monospace;
}

これで見やすくてかっこいいソースコードの完成です。