PREタグにスクロールをつけてコードを読みやすくする

このブログでサンプルコードなどを載せる場合は、
preタグとcodeタグを使って、コードを貼り付けている。

ただ、コードが横に長くなってしまった時に、
今までは表示崩れしてしまっていたので、困っていました。

というわけで、ちょっと検索してみたらすぐに対策を発見。

参考:
PREタグにスクロールバーを付けたい

pre {
  overflow: auto;
}

これで、横に長くなるコードを張り付けたときに、
スクロールバーがついたので表示崩れは回避できました。
ついでに、font-size:smallerをつけて、
フォントサイズを小さくしてできるだけスクロールバーが
表示されないようにしてみた。

怠けないで、ちょっと調べれば、でてくるもんですな。