How to change tab size on GitHub?

Question

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

Example:

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

Zoospore

You can also check out answers provided in the GitHub issue #170 pre { tab-size: 4 } – Ahmednagar

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. – Guib

@Guib 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 – Leonilaleonine

@Leonilaleonine - 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. – Guib

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? – Broadfaced

Eight space tabs was the Unix default many moons ago. There's probably a ton of old C on GitHub that assumes it. – Duple

Indent size can be different then tab size. Most editors can still offer an indent size of 4, with a tab size of 8. See this post: terminatorul.wixsite.com/blog/post/tabs-and-tab-size – Calida

Sept. 2021: you now have an official GitHub profile setting, which will apply to all GitHub pages. See my answer below. – Demurral

Answer 1

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.

• Standard view: https://github.com/moroshko/mmSelect/blob/master/mm_select.js
• Ace view: https://github.com/moroshko/mmSelect/edit/master/mm_select.js

Vivisectionist

Great idea, but the problem is once you go into EDIT mode, you also FORK the said archive. Might get a bit excessive after 50 or so view-only-edits ;) – Hospitaler

Agreed. But that might be a good incentive to start contributing ;) – Vivisectionist

As @chrisdembia mentioned, this is no longer correct; github allows you to change tab size by passing the value as a query param (e.g., ?ts=4) – Blubbery

Is there a way for the community to override the selected answer? – Conation

@Conation Thanks for the reminders ;) Updated the answer to point to morenti's one. – Vivisectionist

Answer 2

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

Example: https://github.com/jquery/jquery/blob/main/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

Dempsey

It's good that this is possible, but it would be nice if there was an easy way to choose the tab width rather than having to remember the URL parameter. – Remittance

It would also be nice if github let you save that as a preference so you wouldn't need to keep putting it back in the URL. – Prebo

This seems to be no longer working. When viewing the example given above (github.com/jquery/jquery/blob/master/src/core.js?ts=2) the tab size displays as 8, not 2. – Byrdie

@PhilDennis Works for me with Chrome (on Linux). – Dempsey

@NikolaMihajlović What do you mean by "in commits"? It appears to be working in the commit view (github.com/jquery/jquery/commit/…) on Chrome/Linux. – Dempsey

@Dempsey Super weird, it seems it is selective about extensions e.g. doesn't work for json: github.com/jquery/jquery/commit/… – Shaman

@NikolaMihajlović It's a bit subtle, but the ts argument needs to be before the # fragment in the URL. E.g. github.com/jquery/jquery/commit/… – Dempsey

nice solution. sadly doesn't work on diffs in PR's. – Outfielder

in firefox you can use trumpio's addon request control for creating rules. i apply the ts query parameter to every request to *.github.com. – Gabar

@Outfielder it does work for diffs in pull requests now. – Cancel

@Cancel , the normal commit view or Files changed view in PRs seems not to handle ?ts=4 so far. What is the trick? – Antagonize

This doesn't seem to work anymore in 2021. GitHub automatically removes this from the URL. The example URL you gave ends up displaying 8-wide tabs. – Tulley

You can now set tab width in github.com/settings/appearance (see VonC's answer below). – Jaimiejain

It's weird that this tops out at 12 spaces. I really want 24 spaces for viewing assembly listings in wide column format. The ?ts= query param changes the data-tab-size="12" HTML attribute on the table, which in turn changes the tab-size css value. The data-tab-size attribute only accepts the values 1-12. However, you can set the tab-size css value to anything and it works fine. For some reason there an indirect lookup between the data tribute and the actual CSS value that only respects tab spacing 1-12 and it's an annoying restriction. – Leukas

Answer 3

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:

• https://chrome.google.com/webstore/detail/github-tab-sizer/djpnapkcpjomnkfekaedkigfomiedpjf
• https://chrome.google.com/webstore/detail/github-tab-size/ofjbgncegkdemndciafljngjbdpfmbkn/related

Artimas

It seems that github does not respect the editorconfig file for files with no names (.gitconfig, etc). Any idea why or is it a bug? Ex github.com/rmandvikar/git-setup/blob/tabs/.gitconfig – Valentia

dotfiles don't seem to be respected with the [*] (on github). I had to add another entry with [.*]. – Prospectus

This should be the accepted answer by far! I'm amazed that Github actually does follow editor config rules. – Reddick

It's not respected in commits :-( – Shaman

It fixes the size of a tab in your editor too, though, which kind of defeats the whole purpose of tabs. – Pesticide

Has this feature been removed from github? Some of my previously correct repo's seem to be reset to 8 spaces. – Blacklist

@Blacklist Can you make a testing repo? – Artimas

@Artimas I think I was mistaken. The tab size works correctly in code and diffs, but not in README.md code snippets. This is a new observation; I don't know if README.md code snippets ever did tab sizes other than 8 spaces. – Blacklist

Unfortunately this only works on tab spacing from [1..12] which appears to be a fundamental limitation of the way that it's implemented on the page. – Leukas

Answer 4

Since Sept. 2021, you can set the tab size directly in your GitHub settings: github.com/settings/appearance.

Announced in Changelog "Tab size rendering preference".

• No more .editorconfig
• No more ?ts=2 added to the URL

Just:

Note: you cannot enter "3" for instance. You would get:

Tab size rendering preference could not be saved:
Validation failed:
Tab size is not included in the list

Demurral

This answer should be higher up; it's unfortunate that the outdated answers have more votes. I initially saw the top two answers (by votes), thought that it wasn't possible as a user-specific setting and gave up. Then I stumbled across this setting by accident in the UI. – Presbyopia

This doesn't replace .editorconfig. Different file formats need different indentation. That's kinda the point. – Leukas

@Leukas I agree. This is not a complete solution – Demurral

This doesn't seem to do anything, is it session based? Edit: oh, it works on the editor view, I was expecting it to work in the code examples on a readme. – Iowa

Answer 5

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.

Gamba

I wrote that user style. I’m glad you found it useful. I’ve fixed it and tested it in Chrome, and it now works without your modification. – Tungting

You might also like my user style “All code has tab size 4”, which changes the tab size of <code> elements on all websites. – Tungting

Hey Rory! Thank you for that style. I'll check out the other one as well. Only I like my tab to be size 2 so I think I'll thinker it a bit :P – Gamba

Great tool. While I normally like a 2 space tab size, I noticed that setting it to two spaces hid some "white space anomalies" (lines with incorrect indentation) so I compromised and set stylish to 4. – Adrianeadrianna

Github replaces every \t with 8  . Merde. – Serai

Yep They did not do that before and I have no idea why they do that now :( I guess a solution can be someone writing a script that replaces say... 4 consecutive   with two or whatever. But that has to be a "userscript" I think. – Gamba

Maybe a browser extension that would use @mortenpi's solution to append the official supported URL argument to GitHub URLs would do the trick? – Undergo

@aledujke: Something like this: github.com/NV/tab_character_size Haven't tested as the site (userscripts.org) currently seems to be down. – Remittance

Our GitHub Dark Stylish userstyle allows you to set the tab size. And it is being actively maintained. – Kurdish

This plugin definitely works but you need to tweak the selectors. A user helpfully provided a version in a discussion post that works fine for me at time of writing. – Gemination

@RoryO'Kane The extension does not work on diff. Someone proposed a fix a while ago already. Could you apply it? – Osmious

@Osmious I just updated the extension so it works in diffs too. Thanks for letting me know about the bug. – Tungting

If you want it affect code examples on README files: pre { tab-size: 2 !important } – Iowa

Answer 6

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.

Carbamate

tab_width = 4 is more correct for specifying the rendering width of tabs, than indent_size = 4 which specifies the default indentation width in an editor. – Leukas

@Leukas I agree, but I’d note that setting indent_size is what you want if 1 indent = 1 tab: tab_width defaults to indent_size, and you’d only want to break that link if you want e.g. 1 indent = 2 tabs, or to indent using spaces and use tabs elsewhere. – Carbamate

Ahh, right! That's good to know. – Leukas

Answer 7

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 });

Duple

I would have preferred this alternative but this seems to work more or less randomly: if the data was not loaded before the userscript runs (e.g. file listing then click to open the file), it doesn't work. – Osmious

Good job, however, does not work for code blocks in the comment box. – Roturier

Answer 8

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>

Progressive

Answer 9

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.

Hiles

Answer 10

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.

Lashawn

GitHub has a whitespace querystring var you can pass like ?w=1. It'd be nice if they had a `?t=4' for 4 spaces or if you could somehow configure your project and it'd just pick it up, via Editor Config or something else. – Tharpe

This is the correct answer and does not deserve to be downvoted. There's far too much software out there that doesn't let you change the tab width for "tabs are configurable" to be anything other than wishful thinking. And if you ever indent anything a distance that isn't a multiple of your preferred tab width, you now have a mixture of tabs and spaces and adjusting the tab size doesn't even work anymore. – Bondwoman

Read the Wikipedia article about where the 8-space tab comes from. “A common horizontal tab size of eight characters evolved, despite five characters being half an inch and the typical paragraph indentation of the time, because as a power of two it was easier to calculate in binary for the limited digital electronics available.” Your answer uses circular reasoning (i.e. the standard is eight characters because that’s the standard) to shut the door on the question. The asker is not satisfied with this standard and has little reason to be. – Akeylah

@mrjedmao It does, you can do ?ts=4. – Patinated

@Patinated thanks. I probably figured that out right after I posed this comment, because I've known about ?ts=4 for a while now and sindresorhus created a Chrome plugin for that, so bonus there! – Tharpe

I prefer tab over space, because it speeds up my editing between 4 and 8 times when I move my cursor across a whitespace. – Traprock

It should be noted that irregardless of whitespace preferences, there are times you are forced to use tabs such as Makefiles. Been dealing with how our Makefiles look horrible on GitHub by default since we use 4 space wide tabs. – Crinkumcrankum

"nobody can tell other developers how they should format their code. Nobody." Except the person who's paying the developer, hmm? "it speeds up my editing between 4 and 8 times when I move my cursor across a whitespace." Why do you do that to yourself, when all editors have a move-by-word/field/line feature? – Lashawn

"Except the person who's paying the developer, hmm?" Did your brain's IDE use its move-by-line feature to skip the following sentence? I explicitly stated that a project's enforced conventions take precedence over individual preferences. || "Why do you do that to yourself, when all editors have a move-by-word/field/line feature?" Yes, you're implying it's easier to use the feature of an editor to navigate code than to simply hit one key to traverse an entire column. Furthermore, not all editors have said features, and some even work differently. Stop thinking the whole world uses Sublime. – Dreamy

Sir, you have the correct answer. Looks like you got hated on pretty badly here! – Whitmire

If I quickly want to view a file in the browser that was intended to be viewed with a specific width of tabs (for alignment purposes), I'm not going to wait for months or potentially years for someone to change it. – Walleyed

Spaces or tabs is a whole different argument that you've successfully trolled. But your "answer" does not answer the question in any way. – Fragmentation

This “solution” sounds like communism. “Just do the same because your opinion doesn’t matter.” – Ethelstan