読者です 読者をやめる 読者になる 読者になる

Things in the closet

ゴロ合わせは拝借&下ネタ満載ですのでご勘弁

 MENU

はてなブログにソースコードを貼り付ける

はてなブログでいろいろカスタマイズした部分を記事にしよう!と思った時に遭遇した壁。それが、CSSのソースコードの貼り付け方。ただ貼り付けるだけじゃなく見やすく色づけしたい(シンタックスハイライトと呼ぶらしい)。調べてみると色々な方法があるようですが、読み込みの速さや簡便さなどを考慮してhighlight.jsというものを使ってみることにしました。これ結構簡単なのでオススメです。

<pre>と<code>

まず前提として、ソースコードをそれっぽく表示するには、htmlで<pre><code>と</pre></code>の間に表示させたいソースコード(CSSとかhtml)を入れる必要があります。

ほんっとにはじめてのHTML5とCSS3:[31-1] code と pre でソースを表示しよう このリンクにも詳しく載ってます。)

このサイトの大見出しのコードを例にとれば、

 

f:id:okotono:20170104183338p:plain

こういうコードを表示させたいとき、

 

f:id:okotono:20170104183440p:plain

 こんな風に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 demo

この(↑)サイトにデモがたくさんあります。

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

となります。


HOME

人気記事

カテゴリ

Top