Option to show whitespace characters #588

Would be super useful. I think we should just do it by default without an option. Diffs are all about seeing changes, and whitespace characters are part of that.

I'm not sure I want to see poor code whenever I browse.

However it does make sense in diffs and CodeMirror. Perhaps this can be achieved with a custom font.

Oh, I assumed this was about diffs only. I agree, only makes sense in diffs and CodeMirror.

Tabs in CodeMirror have their own element, however spaces don't :(

.cm-tab {
     background: url(tab-symbol.svg);
}

https://codemirror.net/demo/visibletabs.html

Related content around the web, unfortunately not very positive:

• https://graphicdesign.stackexchange.com/questions/51233/is-there-any-font-where-white-space-or-non-printing-characters-are-visible-for (no answer)
• https://discourse.wicg.io/t/visualizing-whitespace-characters/1394/11 (no CSS way?)
• https://github.com/source-foundry/Hack/issues/46 (shows font support, but how to trigger it in a browser? edit: it's just U+00B7, editors can just show that via text replacement)

I created a font with fontello and:

• the space works
• the tab uses the space character instead of its dedicated character on Chrome
• (gray) color can't be set via font
• character width has to match the selected character width

<img width="157" alt="screen shot 2017-08-24 at 19 23 37" src="https://user-images.githubusercontent.com/1402241/29666369-31a1dcd6-8902-11e7-8ff0-1fa0ab8050ed.png">

In short: this has to be built in JS. If we can access CodeMirror's instance there's a plugin for that https://github.com/coderaiser/cm-show-invisibles

BitBucket do this quite well with an option to show whitespace. Then you get to see faint dots like:

Where are you seeing that? I can't find it anywhere in my BB repos.

@bfred-it hmm it is on private BitBucket server (without addons) maybe BitBucket Cloud is different.

https://github.com/Mottie/GitHub-userscripts/wiki/GitHub-code-show-whitespace seems to work for me. Perhaps the author will let the plugin pull it in?

https://github.com/glebm/render-whitespace-on-github shows whitespace in file and diff view, but not in codemirror (afaik).

https://groups.google.com/forum/m/#!topic/codemirror/L2EJ8Bs3mGA seems to imply it can be done with their specialChars option. That in combination with the script I posted above would solve both, I think.

@issuehunt has funded $80.00 to this issue.

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

@sindresorhus has rewarded $72.00 to @notlmn. See it on IssueHunt

• :moneybag: Total deposit: $80.00
• :tada: Repository reward(0%): $0.00
• :wrench: Service fee(10%): $8.00