ワイヤード・パンチ

元・大阪人が、岡山の山奥でも生きていけることを証明するためのブログ。

highlight.jsとSource Code Proを使って、ブログ上のソースコードを見やすくしよう。

image

WEBサイトをお持ちのエンジニアの方なら、サイト上にソースコードを載せたいと思うことがあるはず。しかし、特に対策もせずにそのままソースコードを載せてしまうと、きっと上記写真のように味気ないものになるはず。そこでぼくは、以下の方法を使ってソースコードを見やすく載せることにしています。

広告

そもそもソースコードの載せ方は?

<pre>
<code>
	<div>
		<p>test</p>
	</div>
</code>
</pre>

上記のように、preタグとcodeタグで載せたいソースコードを囲うだけです。ただし注意点としては、code開始タグの直後に改行を置くとそれも反映されてしまうため、改行せずに本文を書き始める必要があります。
また、htmlコードを載せる場合は「」は「>」に置き換え、つまり記号はエスケープする必要があります。そうしないとブラウザではタグだと認識されてしまいます。

コードの色付けはjsに任せる。

白と黒だけのソースコードだと、どこが何やら一目では判断しづらいです。かといって、値の部分だけ何色…といちいちタグで囲ってcssを適用させていっては、途方も無い時間がかかってしまいます。編集中のソースコードもめちゃくちゃ見にくいものになってしまいます。そこでおすすめはhighlight.jsというjavascriptのライブラリを使用することです。(現時点での最新バージョンは9.0.0です。)

上記サイトからjsをダウンロードして、自分のサイトにアップロードして、jsを読み込むだけで、preとcodeに囲まれた部分が自動で色付けされるようになります。jsなのでコードが表示されるまで若干のラグは発生するものの、自分で色付けしなくて済むので、はるかに手間が省けます。言語も自動で判断してくれます。自分で指定もできますが。

しかし、人によっては自分で作ったファイル以外は手元に置きたくない、ダウンロードすらめんどくさいと思うはず。そこで役立つのがcdnjs。有名どころのjsライブラリなら、このサイトに多数収録されています。トップページから使いたいjsの名前を入力し、そこに表示されたコードをheadタグ内にコピーペーストするだけです。手元にファイルをダウンロードする必要がありません。

すぐにコピーペーストできるように、以下にも一例を記しておきます。最低限必要となるcssとjsが1種ずつ、スタイルを決めるcssが1種必要になります。js実行用のコードも必要です。下記の場合だと、本サイトが使用しているように、黒ベースのものとなります。

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

フォントもコードに適したものに。

highlight.jsによってコードを色付けしても、preタグ内に書かれているコードのフォントはそのままです。たいていはMSゴシックとかメイリオとか、ブラウザが定めたフォントになってしまうのではないでしょうか。決して悪いフォントではないのですが、等幅フォントでないと文字ごとに横幅がバラバラなので、コードとしての可読性に欠けます。

そこでおすすめのフォントがSource code Pro。等幅はもちろんのこと、アルファベットのアイとエルなど、区別の付きにくい文字がちゃんと見分けがつくようになっています。こちらもわざわざ手元にダウンロードせずとも、googleからWEBフォントが用意されています。すぐにコピーペーストして使えるように、headタグ内に書くコードを下記に用意しておきました。

/* css */
pre, code {
font-family: "Source Code Pro", sans-serif;
}

なお、Source Code Proは残念ながら日本語には対応していません。それを克服したSource Hans Code JPというものもありますが、こちらはWEBフォントが配信されていません。自分のサーバをお持ちであれば、自分でWEBフォント化してからアップロードして使えば良いでしょう。本サイトでも日本語対応のこちらのフォントにしたかったのですが、本サイトはTumblrを利用しており、どういうわけかTumblrのアップローダーにWEBフォントを置いても使用できなかったのです。とりあえずコードを載せるなら、なるべく日本語を含まないようにするしかなさそうです。

タブを適切な大きさに調整しよう。

preタグ内は、インデントさせるために用いるであろうタブもそのまま反映されます。しかし、特に設定せずにタブを表示させると、やたらと大きなタブになってしまいます。何文字分だろうか。そこで、preに対してのスタイルにはtab-sizeというものを入れています。

pre, code {
	tab-size: 4;
}

tab-sizeの値によって、タブを半角何文字分で表示させるか自由に設定することができます。現行のたいていのテキストエディタだと半角4文字分になっていると思われるので、ぼくもそれに合わせています。

ところで余談ですが、インデントといえばたびたびタブか半角スペースどちらでやるかと論争になりますが、ぼくはタブ派を支持します。スペース派だとさらに2文字か4文字で分かれると思いますが、2文字だとインデントされてるかわかりづらいし、4文字だとインデントを縮めるのに何度もバックスペースのめんどくさくないですか?消し損じでコードもガタツキやすいし。やっぱタブでしょう。

半端なところで折り返さないように。

preタグ内に長い英文字を書き続けると、中途半端なところで折り返しが発生してしまうことがあります。意図しない改行をされたうえに、普段使っているテキストエディタだとそんなことはなりませんよね。よって、cssに下記を書き足して、幅いっぱいに文字が続いたときだけ折り返しされるようにしましょう。

pre, code {
	word-break; break-all;
}

まとめ。

下記コードですぐに、preタグのコードを見やすくしよう。

まずはhtml。

<link href="http://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/styles/default.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/styles/railscasts.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

そしてcss。

pre, code {
	font-family: "Source Code Pro", sans-serif;
	tab-size: 4;
	word-break; break-all;
}