ブログへソースコードを載せるときには Google Code Prettify を使っています。
google code - google-code-prettify
http://code.google.com/p/google-code-prettify/
さらに CSS で overflow:auto; を指定すれば、
コードがはみ出しても横スクロールできると多くのサイトで書いてあります。
しかし、Blogger で overflow:auto; を指定してもコードが改行されずに困っていました。
 |
| overflow: auto; にしても勝手に改行される |
結局、Blogger がデフォルトで word-wrap: break-word; を指定していることが原因でした。
勝手に改行されずにスクロールできるようになりました。
 |
| word-wrap: normal; を指定すると改行されなくなった |
ちなみに、試行錯誤した結果、テンプレートの HTML へ以下のコードを追加するが一番だとわかりました。
<head> タグの中へ以下を追加
<script src='https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=default'/>
<style>
pre.prettyprint {
overflow: auto;
word-wrap: normal;
}
</style>
 |
| これが一番楽 |
参考
mig-ration - overflow:auto で横スクロールバーが表示されない件（解決）
http://mig-ration.blogspot.jp/2007/04/overflowauto-resolved.html
0 件のコメント:
コメントを投稿