ブログにコードの一部だけを載せたいようなとき、githubのgistにアップしてその埋め込みをブログに貼るというのを良くやるのですけど、このところずっとその埋め込みの表示が崩れて難儀してました。
上の画像にあるとおり、
- スクロールバーが2重に出てしまう
- コードの一番上に隙間が出来る
- 行番号とコードの行がずれる
といった感じに崩れてしまって、コードは読めるものの見栄えがよくない。とはいえ埋め込みってことは通常CSSの管理はサービス側の仕事だし、こっちでやれることはないんだろうな……と思ってたらそうでもなかった。これiframeじゃなくて生のHTMLタグを書き出してるんですね。そうだったのか。だからCSSをこちらで設定してやれば崩れるのを修正出来ると。
調べてみたら対策もきちんと公開されてました。
参考サイト
Gistの埋め込みが崩れる(2013/02) – Enjoy*Studygistの埋め込みが崩れる(解決) – Enjoy*Study
これを参考にこのブログ特有の影響も考慮して以下をCSSファイルに追加したところ、直りました。
上で貼った画像と同じgistの現在の様子はこんな感じ。
うん、良い感じです。
