2014年9月27日土曜日

Bloggerでコードを折り返させないで表示する

以前Bloggerでコードを見栄えよく表示する方法を投稿したのですが折り返しがあると
見づらいと感じたことが何度かありました。
今回は折り返ししないで、枠内に収まらなければ横スクロールできるデザインにしたいと思います。

1. レイアウトの「ガジェットを追加」から「HTML/JavaScript」を選択します。
2. 「HTML/JavaScript」編集画面の「コンテンツ」に次のコードを埋め込んで保存します。
<!-- Google Code Prettify -->
<script src='https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js'></script>
3. テンプレートの「カスタマイズ」で「上級者向け」を選択します。
4. 「CSSを追加」を選択して次のコードを埋め込んで「ブログに適用」します。
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{ list-style-type: decimal !important }

pre.prettyprint{
  overflow-x: auto;
  word-wrap: normal;
  font-family: 'Lucida Console';
}

ol.linenums{
  display: table;
  width: 93%;
}
5. ヘッダーの「Blogger に戻る」で戻ります。

widthを指定しないとコード行の背景色が欠けてしまうので設定しています。
widthは横スクロールの有無に関らず背景色が大きく欠けない程度に93%;を設定しています。
calc(100%-OOpx)と指定することで%指定でも任意の横幅を設定できるはずなのですが
認識せず思ったとおりに反映されなかったのでwidth: 93%;にしています。

IE11、Firefox、Chromeで確認したところ背景色も欠けずに表示されました。
投稿者 時刻: