githubのコードを見やすくしたい!~ CSSを変更する
GitHubのソースコードは、見やすいほうだとは思うのですが、コメントアウトの文字色がグレーで、ぱっと目につきにくい気もします。
そこで、もう少し目に付きやすいように、CSSを自分好みにカスタマイズしてみたいと思います。
ブラウザ拡張機能 Styus を利用する
Styus のインストール(Chrome編)
Chromeウェブストアで、Styus を追加します。
アドレスバーに、Styus のアイコンが追加されます。
Styus は、Chromeの他にFirefox、Opera でも拡張機能があります。
その他使い方などの詳細は、Styus のページを参照してください。
(GitHubでも公開されています)
Styus に ユーザースタイルシートを追加する
GitHub へアクセスします。
事前に、CSSを変更したいクラス名などを、ブラウザのデベロッパーツール等で調べておきます。 今回、変更したいクラスは
.pl-c
です。
Styus のアイコンをクリックして、「次のスタイルを書く:github.comこのURL」のリンクを押下すると、ユーザースタイルシートの設定画面が表示されます。
オプションは、この設定画面を使用するオプションです。自分好みに設定してください。
- ① ユーザースタイルシート名を記入する
- 「github.com」と入力
- ② ここに、変更したいCSSを記述する
- colorを指定すると、カラーピッカー機能も使えます。
- お好みの文字色を選んでください。
.pl-c { color: #bd878d; }
コメントアウトを、くすんだピンクに変更
GitHubを一瞬で、ダークなUIに変えてくれる GitHub Dark
GitHub Dark は GitHubで公開されています。
Styusにも対応していて、リンク一つでCSSをインストールしてくれてお手軽です。
GitHub Dark のページへアクセスし、以下の Installation にある、Install the usercss
のリンクを押下します。
自動で Styus へのインストール画面が開くので、 インストール
をクリックします。
スタイル編集画面が表示されますが、何もしないでOKです。
GitHub サイトへアクセスします。
おそらく、ダークなUIに変更されているかと思います。
もし、ダークな画面になっていないようでしたら、アドレスバーの Styus アイコンをクリックして、インストールした GitHub Dark が有効になっているか確認してください。
補足 所属会社のブログに投稿した内容と同じものです techblog.forgevision.com