はじめに

最近すごく気になってたのだが, ブログでの gist の表示が崩れまくっている ので, 直し方を調べたのでメモする.

以下の過去記事も参照.

CSS の調べ方

要素を調べる

ブラウザのツールを利用して, CSS の要素を調べる.

  • Chrome ならばディベロッパーツール,
  • firefox ならば右クリックから要素を検索

編集画面で該当箇所の css に辿り着いたら, そこを編集する. すると, リアルタイムで変更が確認できる.

class=“gist” class"gist-file" で囲まれている

調べてみると, gist では, <div class=“gist”> などで囲まれていることがわかる.

以下のような StyleSheet に追加する.

/* for gist */
.gist {
    font-size: 16px;
}
.gist-file div{
    background-color: black!important;
}

.gist-file .pl-vo{
    color: white!important;
}

.gist-file .highlight{
    color: white!important;
}

BookMarks