GitLab のソースコードのタブ幅をブラウザのアドオンで変更する

2016/11/30

GitLab のソースコードのタブ幅をブラウザのアドオンで変更する

各ブラウザのタブ幅は 8 がデフォルトなので、ブラウザ上でソースコードを見るととても見づらかったりします。
GitHub でタブ幅を変える方法はいろいろ見つかりますが、GitLab でタブ幅を変える方法は意外と少なかったので記事にしてみました。

GitLab 側の設定を変更することでタブ幅を変更することもできるようですが、タブというのはただのインデントで、その幅がどのくらいかは個人で好きなように設定できるべきだと思うので、ここではブラウザのアドオンで変更する方法について述べます。

私が使用しているブラウザは Firefox ですので、Firefox で説明していますが、CSS の書き方自体は他のブラウザのアドオンにも適用できると思います。

使用するアドオン

Firefox では Stylish というアドオンがあるので、これを使います。

設定方法

アドオンをインストールしたら画面右上に Stylish のアイコンが表示されます。
アイコンをクリックし、「新しいスタイルを書く」からスタイルを作成します。

例えば、以下のようにスタイルを記述することで GitLab のタブ幅を変更できます。

@-moz-document url-prefix("http://example.com/") {
  code, .tab-content{
    -moz-tab-size: 4 !important;
    -webkit-tab-size: 4 !important;
    -o-tab-size: 4 !important;
    tab-size: 4 !important;
  }
}

書き方についての詳細はググってください。
code のタグはファイルを単体で表示したとき用に指定しています。
tab-content のクラスはマージリクエスト時など、ソースを差分表示したとき用に指定しています。
ここらへんは GitLab のページの HTML ソースを解析して割り出しましたが、もしかしたらもっと良い指定方法があるかもしれません。

参考URL

※ Qiita にも投稿しています。

へっぽこプログラマーの備忘録

2016/11/30