簡単で重くない方法としてgoogle-code-prettifyを選びました。
使い方は3ステップです。
１．headerに以下の1行を追加
<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert'/>
CDN（Content Delivery Network）方式で読み込む方法で、CSSも1行で読み込みます。
skin=desertの部分でテーマを指定しています。次のギャラリーから選び変更可能です。
Gallery of themes for code prettify
Bloggerのheaderの設定は「テーマ」の「HTML修正」でheadタグ内に追加します。
２．CSSを追加
以下のCSSは全行に行番号を表示し、行番号の横にセパレータを表示します。また、1行が長い場合に横スクロールを表示します。テーマはdesertに対してCSSで変更しています。
pre.prettyprint
{
border: 1px solid #cccccc !important;
line-height: 1.5em;
overflow: auto;
padding: 2em !important;
}
pre.prettyprint > ol.linenums
{
padding-left: 2em;
}
pre.prettyprint > ol.linenums > li
{
border-left: 1px solid #cccccc;
margin-bottom: 0;
}
pre.prettyprint > ol.linenums > li.L0,
pre.prettyprint > ol.linenums > li.L1,
pre.prettyprint > ol.linenums > li.L2,
pre.prettyprint > ol.linenums > li.L3,
pre.prettyprint > ol.linenums > li.L4,
pre.prettyprint > ol.linenums > li.L5,
pre.prettyprint > ol.linenums > li.L6,
pre.prettyprint > ol.linenums > li.L7,
pre.prettyprint > ol.linenums > li.L8,
pre.prettyprint > ol.linenums > li.L9
{
list-style-type: decimal;
}
pre.prettyprint > ol.linenums > li span:first-child
{
padding-left: 1em;
}
pre.prettyprint > ol.linenums > li span:last-child
{
padding-right: 1em;
}
bloggerでは、「テーマ」の「カスタマイズ」からデータデザイナーを開き、
「上級者向け」の「CSSを追加」から「カスタムCSSを追加」の領域に上記のCSSの内容を貼り付け追加します。
３．記事を作成する際にHTMLモードで、Preタグにクラス名「prettyprint linenums」を指定して書きます。
<pre class="prettyprint linenums”> ここにコードを書く </pre>
linenumsは行番号を表示するクラス属性です。
この記事は、ご紹介した方法でソースコードを埋め込んでいます。
