Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

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

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

2番目のは<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 -->
Takeru
いま勤めてる会社にはWindowsしかないから、遊ぼうと思ったらPowerShellを覚えないといけない。。。
http://takeru-chan.github.io
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away