Bloggerでコードをハイライトする

Bloggerでコードをハイライトするのに苦労したので、メモしておく。
Bloggerの管理画面の左側のメニューから「テーマ」をクリック。
「ブログで使用中」の「HTMLの編集」をクリック。

</head>を検索して、その上に以下のコードを追加。

<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst'/>

好みのskinはここで選べます。
https://rawgit.com/google/code-prettify/master/styles/index.html

上のコード末の skin=sunburst の　sunburst　を他のスキン名に変更する。
ただし、すべて小文字。

「テーマ」に戻って、「ブログで使用中」の「カスタマイズ」をクリック。
「上級者向け」から「CSSを追加」とたどって、以下のコードを追加。

pre.prettyprint {
  width: 530px;
  overflow: auto;
}

「ブログに適用」クリック。

overflow: auto は枠からはみだしたときの表示をブラウザ任せにするようです。
概ねスクロールバーが表示されるようです。
widthは横幅。　お好みで数値変更。


HTML編集画面で以下のように入力する。

<pre class="prettyprint">
 
 //ここにコードをかく
   
 
</pre>

プレビューで表示確認できるようです。

スマホでも同じような表示にするには、
「テーマ」から「モバイル」下歯車マークをクリック。
「はい。モバイル端末でモバイル テーマを表示する。 」をクリック。
「モバイル テーマの選択」で「カスタム」を選択して「保存」