Edited at

ブラウザー拡張機能 Stylus で GitHub Markdown を見やすくする

Stylus を使ってサイトデザインを自分好みに変えよう、って話です。今回は GitHub README のスタイルをいじります。


Stylus

Stylus は閲覧するサイトの CSS を変更できるブラウザ拡張機能です。


CSS

ブラウザの開発者ツールを使って変更したい CSS クラスを探し、Stylus に以下を登録します。

.markdown-body h2 {

margin-top: 2rem;
border-bottom: solid 1px #FF7F50 !important;
}

.markdown-body h3 {
margin-top: 2rem;
margin-bottom: 1rem;
padding-left: 0.5em;
border-left: solid 4px #FF7F50 !important;
}

.markdown-body em {
text-decoration: underline;
}

.markdown-body strong {
text-decoration: underline;
}

.Label--outline {
background-color: #FFA500;
}


こんな感じになります

Before
After


個人的に <h2><h3> が判別しにくかったので、色をつけてマージンを追加しています。

あと Private repository のバッジが見にくいので色を付けました。

リポジトリ一覧ページ
個別リポジトリページ



オススメの公開テーマ


Qiita Dark


GitHub Dark

サイトデザインに不満があるからといって、サービス運営側に要望を出しても解決されることはまずないでしょうから、オリジナルのスタイルを適用しちゃいましょう。