プログラムコードをgoogle-code-prettifyでBloggerに表示する方法

google-code-prettify、Syntaxhighlighter、highlighter.jsなどやり方があるようです。

簡単で重くない方法として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は行番号を表示するクラス属性です。

この記事は、ご紹介した方法でソースコードを埋め込んでいます。