【シンタックスハイライター】Bloggerにソースコードを記載しよう

ソースコードをブログに記載するときに、なるべくキレイに見せることができないか。
Google code-rettifyを使ってみます。


 ブログのヘッダーを編集してスクリプトやCSSを利用できるのでBloggerはかなりオススメです。
 というわけでヘッダーを編集します。
①左メニューの「テーマ」を選択し、「HTMLの編集」ボタンを押す。


②ブログのヘッダーに、以下を記述します。

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"><script>

③デフォルト設定では、5行おきにしか行番号を記述してくれないので、CSSを加えます。 ここはお好みですが、私は下記のCSSを記載しています。

pre.prettyprint {
 margin: 0;
 padding: 0 0 0 25px;
 background-color: #FFF;
 border: 1px dotted #888;
  white-space: pre;
  overflow: auto;
}
ol.linenums {
 margin-top: 0;
 margin-bottom: 0;
 background-color: #FFF;
}
li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9 {
 padding-left: 15px;
 line-height: 1.5;
 border-left: 2px solid #6CE26C;
list-style-type: decimal;
}
li.L1,li.L3,li.L5,li.L7,li.L9 {
 background: #F8F8F8;
}

④ブログを書く。 HTMLモードで記事を書きます。 

ソースコードは、<pre class="prettyprint"> </pre>で囲みます。

行番号を表示する場合は、<pre class="prettyprint linenums"> </pre>