[Blogger]google-code-prettifyでコードを構文強調表示

イメージ

Bloggerにシンタックスハイライトを導入するのは難しいイメージがあったんですが、めちゃくちゃ簡単
追記
非レスポンシブテーマへの導入はお勧めしません(モバイル デバイスでBloggerの モバイルテーマを表示させている場合)
関連:

• [Blogger]「モバイル ユーザビリティ」の問題が新たに検出された

リポジトリ

GitHub - googlearchive/code-prettify: An embeddable script that makes source-code snippets in HTML prettier.
https://github.com/googlearchive/code-prettify

セットアップ

</head>以前に

<script src='https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js'/>

を追加

これで

<pre class="prettyprint">
コード
</pre>

の記述で強調表示ができます
(載せるコードは特殊文字に変換しておきましょう)
関連:

• [お役立ちサイト]HTML特殊文字変換ツール

あとは長いコードはスクロールできるようCSSを追加しておく

pre {
  overflow: auto;
}

言語の指定は

<pre class="prettyprint lang-html">
  The lang-* class specifies the language file extensions.
  File extensions supported by default include:
    "bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java",
    "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml",
    "xsl".
</pre>

こう記述

スキンの変更

<script src='https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=sunburst'/>

の様に
?skin=sunburst
を追加してやる

• Prettify Themes Gallery (Gallery of themes for code prettify)

参考

Bloggerにソースコードを埋め込む方法 - Qiita
https://qiita.com/piro_erdes/items/f133e170a8cf6c10b449