※この記事は、2016年7月に他のブログ(WordPress)で書いた記事をQiitaに移行したものです。
スマホ（iOSのSafari）で、当ブログを見ていたら・・・
preタグで囲ったソースコードが、改行されまくっている！！
見づらい！！(´；ω；｀)
この問題を、ググッて解決できたので、載せます。
当ブログでのソースコード表示
まず、当ブログにソースコードを載せる際は、ソースコードをpreタグで囲っています。
preタグで囲うことで、改行やインデントを、整形せずにそのままの形で表示してくるんですね。
しかし、以下の問題がありました。
- スクロールする必要がなくても、縦横にスクロールバーが表示されて、あまり格好良くない・・・。
- 背景が白色で、ソースコードっぽくない。
CSSをいじってみる
PCではいい感じになったのですが、スマホ（iOSのSafari）で見ると、
横スクロールせずに全て改行されることに気づきました。
結論
調べて、いくつか試した結果、preタグに
word-wrap: normal;
を指定することで解決しました。
今回、preタグに指定したものは、以下になります。
overflow: auto !important;
background-color: #f7f7f7;
word-wrap: normal;
これで
- 必要なときだけ横スクロールバーが表示される
- 背景色をグレーにして、ソースコードっぽく
- スマホで見てもソースコードが改行されない
の３つを実現できました。
見づらいかもしれませんが、画像のような形になりました。
今回は以上です。