ForgeVision Engineer Blog

フォージビジョン エンジニア ブログ

githubのコードを見やすくしたい!~ CSSを変更する

納豆にはお酢が欠かせない、かーさん (id:Kaa_saan) です。

先日、開発メンバーから、
GitHubソースコードコメントアウトの文字色を、目に付きやすい色に変更したい。」
という声が上がりました。

既存のGitHubソースコードの文字色は黒で、コメントアウト文字色は、グレーです。
たしかに一瞬、見分けがつきにくい気もします。
そこで、GitHubソースコードCSSを自分好みにカスタマイズしてみたいと思います。

CSSのカスタマイズには、ブラウザ拡張機能を利用します。
今回の対象ブラウザは、Chromeです。

ブラウザ拡張機能 Styus を利用する

Styus のインストール(Chrome編)

Chromeウェブストアで、Styus を追加します。

chrome.google.com

アドレスバーに、Styus のアイコンが追加されます。

f:id:Kaa_saan:20180717114744p:plain

Styus は、Chromeの他にFirefoxOpera でも拡張機能があります。
その他使い方などの詳細は、Styus のページを参照してください。
GitHubでも公開されています)

github.com



Styus に ユーザースタイルシートを追加する

GitHub へアクセスします。

事前に、CSSを変更したいクラス名などを、ブラウザのデベロッパーツール等で調べておきます。 今回、変更したいクラスは .pl-c です。

Styus のアイコンをクリックして、「次のスタイルを書く:github.comこのURL」のリンクを押下すると、ユーザースタイルシートの設定画面が表示されます。

f:id:Kaa_saan:20180717114820p:plain

オプションは、この設定画面を使用するオプションです。自分好みに設定してください。

  • ① ユーザースタイルシート名を記入する
  • ② ここに、変更したいCSSを記述する
    • colorを指定すると、カラーピッカー機能も使えます。
    • お好みの文字色を選んでください。
.pl-c {
  color: #bd878d;
}
  • ③ 適用先設定を入力。
    • 指定方法はその他、URL、次で始まるURL、正規表現などあります。
    • 設定した、URLにマッチするとユーザースタイルシートが適用されます。

コメントアウトを、くすんだピンクに変更

f:id:Kaa_saan:20180717115038p:plain

CakePHPソースコードを表示中。



GitHubを一瞬で、ダークなUIに変えてくれる GitHub Dark

GitHub Dark は GitHubで公開されています。
Styusにも対応していて、リンク一つでCSSをインストールしてくれてお手軽です。

github.com



GitHub Dark のページへアクセスし、以下の Installation にある、Install the usercss のリンクを押下します。

f:id:Kaa_saan:20180717115136p:plain



自動で Styus へのインストール画面が開くので、 インストール をクリックします。

f:id:Kaa_saan:20180717115203p:plain

スタイル編集画面が表示されますが、何もしないでOKです。



GitHub サイトへアクセスします。
おそらく、ダークなUIに変更されているかと思います。

f:id:Kaa_saan:20180717115242p:plain

もし、ダークな画面になっていないようでしたら、アドレスバーの Styus アイコンをクリックして、インストールした GitHub Dark が有効になっているか確認してください。

f:id:Kaa_saan:20180717115310p:plain