はてなブログでいろいろカスタマイズした部分を記事にしよう！と思った時に遭遇した壁。それが、CSSのソースコードの貼り付け方。ただ貼り付けるだけじゃなく見やすく色づけしたい(シンタックスハイライトと呼ぶらしい)。調べてみると色々な方法があるようですが、読み込みの速さや簡便さなどを考慮してhighlight.jsというものを使ってみることにしました。これ結構簡単なのでオススメです。
<pre>と<code>
まず前提として、ソースコードをそれっぽく表示するには、htmlで<pre><code>と</pre></code>の間に表示させたいソースコード(CSSとかhtml)を入れる必要があります。
（ほんっとにはじめてのHTML5とCSS3：[31-1] code と pre でソースを表示しよう このリンクにも詳しく載ってます。）
このサイトの大見出しのコードを例にとれば、
こういうコードを表示させたいとき、
こんな風にhtml上で<pre><code>で挟むと、
.entry-content h3{
padding: 5px 10px;
border-left: 10px solid #fc0;
border-bottom: 2px solid #fc0;
}それっぽく表示されます。codeタグはコンピューター用のコードであることを示すもので、ブラウザ上では等幅で表示されます。また、preタグは整形済みフォントを示すもので、普通は詰められてしまうスペースや改行がそのまま表示されます。これはまぁこれでいいけれど、やはり色がついてないと寂しい気がします。
ちなみにはてなブログの見たままモードでコードを貼り付けた場合、html上では</br>が勝手に入るが、それも含めてhtml編集でpre, codeで囲めばOK。
その他の方法
highlight.jsを使う方法は後述しますが、他にも適用可能なものを先に紹介。
はてな記法とMarkdown記法で使える方法
はてな記法かMarkdown記法を使っている場合、スーパーpre記法なるものでシンタックスハイライトを使うことができます。
しかしこれは見たままモードでは使用できないので、「設定→編集モード」で記法を変えない限りは、他のやり方を選ぶ必要があります。
Gistからの貼り付け
GitHubのアカウントがないと使えないが、登録さえすればお手軽。行番号をつけられるのも利点。
Crayon Syntax Highlighter
これも有名なプラグイン。設定項目が多い・対応言語が多い、といった利点があるが、ダウンロードしなきゃいけないし、設定がめんどくさそう。そして多機能がゆえに重いという欠点も。はてなブログでの設定方法は下記リンクが詳しいです。
highlight.jsを使う
シンプルな機能で十分。しかも動作も軽くて、設定が楽なら最高。というわけでhighlight.jsを使ってみました。
ここを参考にさせていただきました。以下手順。
(1)「設定→詳細設定→headに要素を追加」に以下の3行を加える。
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
ただ2か所ある数字の9.9.0という部分はバージョンアップすると変わるので、
Getting highlight.jsのリンクのcdnjsと書いてある下の部分を参考にしてください。
(2) <pre><code>で表示させたいコードを囲んで終わり！
(3) 色付けのスタイルを変えるときは、3行の一番上の部分、default.min.cssの部分を変えます。このサイトだとdoccoを使っているのでdocco.min.cssとなっています。
この(↑)サイトにデモがたくさんあります。
highlight.js/src/styles at master · isagalaev/highlight.js · GitHub
例えばAtelier Seaside Darkにしたいなぁと思ったら、このサイト(↑)で同じ表記を見つけて、atelier-seaside-dark.min.cssという風に記述します。
最後に、一番最初のコードを<pre><code>で挟んでみると、
.entry-content h3{
padding: 5px 10px;
border-left: 10px solid #fc0;
border-bottom: 2px solid #fc0;
}
となります。
