ブラウザー拡張機能 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
サイトデザインに不満があるからといって、サービス運営側に要望を出しても解決されることはまずないでしょうから、オリジナルのスタイルを適用しちゃいましょう。
Author And Source
この問題について(ブラウザー拡張機能 Stylus で GitHub Markdown を見やすくする), 我々は、より多くの情報をここで見つけました https://qiita.com/peaceiris/items/31dd73d24b486799e7a4著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .