Google code prettifyでスクロールバーを出す方法

ブログにソースコードを載せるとき、もともとはGoogle code prettifyを使っていたんですが、１行が長い場合（ワンライナーとかだとよくある。。。）改行されちゃうんですよね。

で、代替シンタックスハイライターとしてGistを使っていたんですが、ふたつ不満があります。

1.行数の多いコードが記事そのものを長くする
2.見た目の統一感を出すためにわずか数行のコードでGistを作るのダサい

２番目のは<code>タグで対応してもいいんですが、ハイライト効かないし、やっぱ見た目の統一感って大事だし。ということで…。

Google code prettifyで横スクロールバーを出す

よくよく調べてみたらGoogle code prettifyのスタイルシートではword-wrap:break-wordになっています。要はわざわざ折り返しするように指定してある。

そこでこれをword-wrap:normal指定に戻すと折り返しをしなくなります。で、折り返しをしなくなると自動的にオーバーフロー分に対応して横スクロールバーが出てきます。なんて簡単！

Google code prettifyで縦スクロールバーを出す

こちらはもっと簡単。ソースコードを表示している<pre class="prettyprint">ボックスに対し高さ制限を追加します。

たとえば50行もあるソースコードのうち10行以降を枠外に追いやっておきたいのであれば、height:10em指定をしておけばOK。はみ出し分は縦スクロールバーでスクロール表示できるようになります。（実際にはpaddingがあるので少し表示量は減るかも）

まとめ

Google code prettifyスクリプト読み込み指定のついでに以下のようなスタイルを追記しておきましょう。

<!-- Google code prettify start -->
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<style type="text/css">
pre.prettyprint {
  font-size:12px;
  word-wrap:normal;
}
pre.high {
  height:12em;
}
</style>
<!-- Google code prettify end -->