上記対処の後にも、崩れるパターンがあったので、整理してみました。
(あくまで、現時点での対処なので、gistのcssが変わると、指定方法も変えなければならない可能性があります)
スクロールバーが出てしまう
ソースコードの部分にスクロールバーが出てしまい、レイアウトが崩れる場合があります。
これはpre要素に対して、overflow:scroll(溢れた部分はスクロールバーを表示)が設定されているのが原因です。
gistで埋め込まれたコード部分に対してはスクロールがでないようにして回避します。
.gist .gist-file .gist-data .line_data pre { overflow: visible; }
行番号がおかしくなる
行番号が折り返してしまって、1桁ずつで1行になってしまうことにより、レイアウトが崩れてみえる場合があります。
gistの埋め込みでは、2カラムのテーブルレイアウト(行番号とソースコード)になっており、ソースコードの方が、width:100%指定になっているため、行番号の方が、可能な限りせまく表示されるようになっています。
このため、行番号の部分が word-break:break-all となっていると、1文字で折り返してしまい、行番号がおかしくなって、レイアウトが崩れてしまいます。
gistで埋め込まれた行番号の部分は折り返さないようにして回避します。
.gist .gist-file .gist-data .line_numbers { word-break: normal; }
どちらもgistのcss自体に入ってくれていた方が、Blogのデザインなどに影響しなくてよいので、今後改善されるないかなぁと期待しています。
また変わったので、変更しました。
