はてなブログにGistのコードを埋め込んだ際にデザインがおかしくなるのを修正した

先日の Gist のリニューアルに伴って、外部サイトにコードを埋め込む際の HTML 構造が変更されたらしく、はてなブログ上に貼り付けたコードのデザインがおかしくなってしまった。

修正前:

f:id:hyone:20121228214918p:plain

そこで、以下のような CSS を追加して修正した。

td.line_data pre {
    font-size: 13px;
    white-space: pre;
    box-shadow: none;
}

td.line_numbers {
    font-size: 13px;
}

修正後:

f:id:hyone:20121228214850p:plain

行ごとの枠線を消して、行番号とコードのずれを修正。

参考にしたサイト