Bloggerブログでプログラムコードをキレイに色分け表示する方法

■Bloggerブログでプログラムコードをキレイに色分け表示する

タイトル画像の結果となった。方法を述べる。

※注意※
HTML編集前に
Bloggerで「テーマ」⇒「バックアップ/復元」⇒「テーマをダウンロード」で
失敗した場合に復元できるようバックアップを保存するとよい。
バックアップ保存後⇒「HTMLの編集」選択。

HTMLの文中をクリックして「Ctrl + F」キーおす
⇒「Search:」に「</head>」入力⇒「Enter」キーおす。
⇒「</head>」直前に「<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert"></script>」貼りつける。
⇒「テーマを保存」選択。
文字のはみだしと行番号を5行ごと⇒1行ごと
変更のためCSS設定追加する。

Bloggerで「テーマ」⇒「カスタマイズ」選択。

「上級者向け」⇒「CSSを追加」

pre {
    max-height    : 500px;
    overflow: scroll;
    white-space: pre !important;
    padding-top: 3px; 
}
.prettyprint ol.linenums > li {
    list-style-type: decimal; 
}
li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9 {
 padding-left: 5px;
   margin-left: 20px;
 line-height: 1.5;
 border-left: 2px solid #6CE26C;
}

上記コードを貼りつける⇒「ブログに適用」選択⇒「Bloggerに戻る」選択。

プログラムコードが枠内に収まる。
行番号5行ごと⇒1行ごと変更。

■プログラムコードのブログへの記述方法

Bloggerの記事投稿⇒「HTML」ボタンおす
⇒「<pre  class="prettyprint lang-vb linenums:1">■</pre>」貼りつけ
⇒「作成」ボタンおす。
※「lang-vb」はVisual Basicコード貼るためつけているが
なくてもある程度自動で色分けする。
「■」部分にプログラムコードを貼りつける。

ブログでプログラムコードがキレイに色分け表示される。

■あとがき

ライブドアブログ⇒Blogger引越しで
プログラムコード表示がハチャメチャになっていたので修正。
ライブドアブログと同様に「Google Code Prettify」使用。

■ライブドアブログにプログラムコードを簡単キレイに表示する方法

プログラムコード表示スキン変更方法も記載あるので参考まで。
以上。