I indent with tabs. There, I said it. Viewing my code (and that of other tab indenters) on GitHub, Gist, or Bitbucket can be annoying because the default tab size in the browser is equivalent to 8 spaces. Modern browsers let you change that through CSS, and here’s some bookmarklets that do just that.

First, I must warn: these three bookmarklets all work in Chrome, but the Gist and GitHub ones don’t currently work in Firefox. Those two sites send CSP headers that prevent foreign scripts from being executed, and the Firefox implementation of CSP includes bookmarklets. There’s a long running bug ticket… but at least with GitHub, you can just tack ?ts=4 on the end of the URL to get tab size of 4 spaces.

So, the trick: add a CSS style element to the browser that overrides the tab-size for the elements containing source code. This can be done from a simple bookmarklet, targeting each of the different sites.

GitHub:

<style>
.tab-size-8 .blob-code {
    -moz-tab-size: 4;
    tab-size: 4;
}
</style>

Gist:

<style>
.file-data {
    -moz-tab-size: 4;
    tab-size: 4;
}
</style>

Bitbucket:

<style>
.refract-container .source {
    -moz-tab-size: 4;
    tab-size: 4;
}
</style>

You can get the bookmarklets implementing tab size 4 from this gist. Copy the code and add to a bookmark as the location. You can then click that bookmark to change the tab size.

Job is done with my tab size, not that ugly 8 spaces tab size.