How to change tab size on GitHub?

306
votes

When I view files on GitHub, tabs appear as 8 spaces.

Example:

example

Is that possible to change this configuration to 2 or 4 spaces?

9
tabsgithubtab-size
You can also check out answers provided in the GitHub issue #170 pre { tab-size: 4 } - KyleMit
I think you should change the accepted answer to the one by @rofrol about using the .editorconfig, I think his answer includes current best methods for both setting the configuration in a way that other people will see the code as you intended it to be seen, and altering how other people's code looks when you are reading it. - f1lt3r
@f1lt3r I disagree. If people really want to view my code with 8 spaces more power to them. I don't want to restrict them that way just so I can view it with 4 spaces on github for myself. If the answer is going to change, it should be mortenpi's answer - Assimilater
@Assimilater - rofrol's answer wouldn't restrict anyone from viewing whatever width they want. Agree that mortenpi's answer is good though pretty frustrating to have to add the param for every file you look at. - f1lt3r
Can anyone explain the logic behind using 8 spaces as a default? I can't imagine any scenario where 8 spaces would look anything other than ridiculous - yet it's the default on github? What gives? - PandaWood

9 Answers

26
votes

Update

Yes. As stated by mortenpi, this can be done by through an additional query parameter. See his answer for more details.

Original answer

Is that possible to change this configuration to 2 or 4 spaces?

No. It's only available as part of the editing feature through the Ace editor and the change is not persisted.

This blog post gives some more information about the embedded IDE.

However, provided you know the url of the blob (file) you're willing to review, you can switch to the edit mode easily by changing the blob segment with an edit segment and use the dropdown to select your prefered tab size.

tabSize

384
votes

You can append ?ts=2 or ?ts=4 to the URL to change the tab-size.

Example: https://github.com/jquery/jquery/blob/master/src/core.js?ts=2

It seems that the value can be anything from 1 to 12. It does not work on Gists or raw file views though.

Source: GitHub Cheat Sheet

316
votes

Set default displayed tab size for your repository

When you have a .editorconfig in your repository it will respect it when viewing code on GitHub.

indent_style = tab and indent_size = 4 shows tabs with 4 columns instead of 8 https://github.com/isaacs/github/issues/170#issuecomment-150489692

Example .editorconfig for multiple extensions which works in JetBrains' products:

root = true

[*]
end_of_line = lf
insert_final_newline = true

# Matches multiple files with brace expansion notation
[*.{js,jsx,html,sass}]
charset = utf-8
indent_style = tab
indent_size = 4
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false

Change how you see tabs on other repositories

Install Stylus in your browser, than install GitHub: better-sized tabs in code.

There are also Google Chrome extensions:

71
votes

It actually is possible to do it, with a browser extension. Install Stylish (in Firefox or Chrome), then install this user style: “GitHub: better-sized tabs in code”.

It might not work for some languages. For example, I was viewing a JavaScript file and I did not notice any changes. So I deleted the style the author had and put the following lines into it:

.tab-size {
  -webkit-tab-size: 4 !important;
     -moz-tab-size: 4 !important;
       -o-tab-size: 4 !important;
          tab-size: 4 !important;
}

And it worked on Chrome (screenshot).

As you can see from the screenshot, I also enabled widescreen mode and changed the color scheme to Solarized. So I have three user styles running on GitHub pages via the Stylish extension for Chrome. I hope this helps someone.

4
votes

If the project is yours, create a file in the project root named “.editorconfig” and give it the following contents.

[*]
indent_style = tab
indent_size = 4

This will cause GitHub to render tabs 4-wide within the project.

This is an EditorConfig file, which is formally specified, supported by many editors, and also supports more extensive editor configuration, like specifying that all .html files are UTF-8 encoded.

If the project isn’t yours, consider opening an issue requesting the author specify the indent style they intended.

0
votes

If you're into UserScripts, this did it for me:

// ==UserScript==
// @name         GitHub Tabs
// @namespace    http://foldoc.org/
// @version      1
// @description  Set sensible tabs on GitHub
// @author       Denis Howe
// @match        https://github.com/*
// ==/UserScript==

document.querySelectorAll('table').forEach(t => { t.dataset.tabSize = 2 });
-4
votes

I did that for fixing them http://valjok.blogspot.com/2014/07/indentation-correction-for-exposing.html.

Another option is when embedding your gist, replace all tabs with required number of spaces

<div id="willReplaceTabs">
 <script src="https://gist.github.com/valtih1978/99d8b320e59fcde634ad/cf1b512b79ca4182f619ed939755826c7f403c6f.js"></script>

 <script language="javascript">
  var spaces = "  "
  willReplaceTabs.innerHTML = willReplaceTabs.innerHTML.replace(/\t/g, spaces)
 </script>
</div>
-8
votes

If it's an option for the project you're working on, changing your editor to treat tabs as spaces will fix the problem.

So, for example, in Visual Studio Code, the config looks like this: 

{
    "editor.tabSize": 2,
    "editor.insertSpaces": true
}

In Sublime it's: 

{
    "tab_size": 2,
    "translate_tabs_to_spaces": true
}

Until recently I insisted on non-spaced tabs. After switching, it fixed the Github rendering weirdness, and I haven't noticed any significant downsides in my workflow.

-31
votes

The best solution is, if possible, to convince maintainers of the source code you're looking at to replace all the tabs by the correct number of spaces.

Using tabs is problematic in code today given that you're often seeing it on the web, where the decision of "how many spaces per tab" depends on where it's being displayed.