gistのソースコード貼付け機能のコードと行番号の表示崩れを修正する

octcat

当ブログやその他サイトでソースコードを表示させたいとき、gistが扱いやすいので、気に入って使っています。

先日、Bootstrapを使っているサイト上で、gist本体で設定されているcssと、Bootstrapのcssが干渉してしまうせいで、以下のようにソースコード本体と、左側の行番号の高さがあっていない状態がありました。
その修正内容を記録しておきます。

gistの行番号の表示崩れとその原因

Gist linenum

firebugで適用されているcssを見てみると、行番号のフォントサイズが12px(gist側のデフォルト)、ソースコードのほうは、フォントサイズ13px(bootstrapのcss)となっていて、フォントサイズの違いによって、行の高さがずれていることがわかります。

▼フォントサイズが違っています

cssに追記

bootstrap.cssに上書きする形でstyle.cssに以下を追記します。

サイト全体のフォントサイズとのバランスを考慮し、15pxに変更します。

gistのcssは、style.cssを読み込んだ後に読まれる形なので、!importantを付けて、強制的にstyle.cssの記述を有効にさせました。

▼これで行番号と、コードの高さが合って、すっきりしました
Gistlinecorrect

スポンサーリンク

シェアする

フォローして更新を受け取る

スポンサーリンク