（★追記：テーマにAwesome Inc.を使っていたときの記事です。）
Google-code-prettifyを使う方法があるようです。
Syntaxhighlighter
highlight.js
Bloggerにソースコードを埋め込む方法
Google-code-prettifyを使ってみましょう。
HTMLを編集
Bloggerで使うには、テーマ → （右上の）「︙」 → 「HTMLを編集」</head>の前に（僕の場合は1010行くらいのところ）
<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian' type='text/javascript'/>を追加して下さい。
「</head>」を探すには、「Ctrl + F」を押します。ブラウザの検索窓が出るときは、ソースコードのどこかをクリックしてから、もういちど「Ctrl + F」を押します。左上の方に、「search: 」と出ますので、そこに「</head>」を入れてから「Enter」です。
なお、scriptの最後の方にある「?skin=sons-of-obsidian」の部分は、
Gallery of themes for code prettify
で、お気に入りのものに変えることができます。
これで準備は終わりです。
使い方
まず、「HTML」モードにします。そこにコードを書きます。そして、コードを<pre class="prettyprint"></pre>ではさんでやります。<pre class="prettyprint">というふうに。
var a = 1;
var b = 2;
console.log(a + b);
</pre>
すると、こんなふうに表示されます。
おお！ すばらしいではないですか！
言語を特に指定するときは、
言語を特に指定するときは、
<pre class="prettyprint lang-javascript">とし、行番号を表示するときは、
<pre class="prettyprint lang-javascript linenums">と、linenumsを付加します。
ちゃちなコードも、きりりとして立派に見えます。
HTMLのタグがある場合
この場合、「<」や「>」は次のようなHTML特殊文字と呼ばれるものに変換してやる必要があります。
でもご安心を。変換してくれるサイトがあります。
たとえば、
https://www.peko-step.com/tool/escphtml.html
です。なんて便利なんでしょう！
次のようなコードを変換してもらいましょう。
でも恐れていてはいけません。
「HTML」モードにして、これを、<pre class="prettyprint linenums"></pre>で挟んでみましょう。
つまり、こうなります。
「作成」モードで見ても、ただ文字がちっちゃくなるだけでパッとしませんが、「プレビュー」で見ると、ちゃんとこんなふうに表示されます。
< → <なんて面倒くさいんだ！ 思わず叫んでしまいました。
> → >
でもご安心を。変換してくれるサイトがあります。
たとえば、
https://www.peko-step.com/tool/escphtml.html
です。なんて便利なんでしょう！
次のようなコードを変換してもらいましょう。
<div class="container">すると、こんなふうになります。
<h1>Bloggerでソースコードを表示する？</h1>
<p>カラーのソースコードだ</p>
</div>
<div class="container">う～む。すごい。恐ろしいことです。
<h1>Bloggerでソースコードを表示する？</h1>
<p>カラーのソースコードだ</p>
</div>
でも恐れていてはいけません。
「HTML」モードにして、これを、<pre class="prettyprint linenums"></pre>で挟んでみましょう。
つまり、こうなります。
<pre class="prettyprint linenums">「HTML」モードで作業するより、エディタなどでここまで作ってから貼り付けるほうがよさそうです。
<div class="container">
<h1>Bloggerでソースコードを表示する？</h1>
<p>カラーのソースコードだ</p>
</div>
</pre>
「作成」モードで見ても、ただ文字がちっちゃくなるだけでパッとしませんが、「プレビュー」で見ると、ちゃんとこんなふうに表示されます。
おお！ なんてきれいなんだ！ 感動です！
まとめ
でも、でも、やっぱり、それにしても、なんて面倒くさいんだ！
長いコードならともかく、いちいちこんなことをしている暇はない！
それに、よく考えたら、そんな長いコードを書く能力もない！
当面は、いつも使っているピンクの「引用」で十分かな。
