'How to change tab size on GitHub?

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?

tabstab-size


Solution 1:[1]

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

Solution 2:[2]

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:

Solution 3:[3]

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.

Solution 4:[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".

Just:

setting

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

Solution 5:[5]

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.

Solution 6:[6]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 McNets
Solution 2
Solution 3 DisgruntledGoat
Solution 4
Solution 5 twhb
Solution 6 Denis Howe

Related Questions