Refined-github: Option to show whitespace characters

[arkon]

It'd be nice if we could see whitespace characters like in an IDE/code editor so it's easier to see things like tabs vs spaces, trailing spaces, etc.

---

IssueHunt Summary

notlmn has been rewarded.

Backers (Total: $80.00)

• issuehunt ($80.00)
  

  Submitted pull Requests

- #2073 Add show-whitespaces features

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
  

  - Need some help from other developers? Add your repositories on IssueHunt to raise funds.

IssueHunt has been backed by the following sponsors. Become a sponsor

[sindresorhus]

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.

[fregante]

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.

[sindresorhus]

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

[fregante]

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

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

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

[fregante]

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

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

[bweston92]

BitBucket do this quite well with an option to show whitespace.

Then you get to see faint dots like:

[fregante]

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

[bweston92]

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

[tallen1983]

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?

[jdreesen]

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

[tallen1983]

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.

[IssueHuntBot]

@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.

[issuehunt-app[bot]]

@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