How to change tab size on GitHub?

2019-01-05 07:29发布

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?

8条回答
太酷不给撩
2楼-- · 2019-01-05 08:09

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.

查看更多
对你真心纯属浪费
3楼-- · 2019-01-05 08:09

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.

查看更多
淡お忘
4楼-- · 2019-01-05 08:16

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>
查看更多
等我变得足够好
5楼-- · 2019-01-05 08:26

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 stylish in your browser, than install GitHub: better-sized tabs in code.

There are also Google Chrome extensions:

查看更多
Evening l夕情丶
6楼-- · 2019-01-05 08:28

Here's an update for Stylish. It's aledujke's answer with .tab-size replaced with .diff-viewer.

.diff-viewer {
  -webkit-tab-size: 4 !important;
     -moz-tab-size: 4 !important;
       -o-tab-size: 4 !important;
          tab-size: 4 !important;
}
查看更多
Fickle 薄情
7楼-- · 2019-01-05 08:29

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

查看更多
登录 后发表回答