Showing invisible characters

[kizu]

While this can be easy, but there are few issues to thought on:

• Do we need to highlight all the special characters like tab symbol? While highlighting the non-breakable spaces would be always good, highlighting the tabs would be trashy for indentations that use them.
• Do we need to highlight line breaks or any other special white-space symbols?
• Can we do the highlighting of such symbols only on the text selection like it can be done in the Sublime Text?

[LeaVerou]

The problem with this is that it breaks copying the code. I really don’t want to have to add a separate view mode for copying code, like some other highlighters. :(

[kizu]

What exactly would break copying? There would be only some CSS styles like backgrounds (like small light gray circle for nbsp), I don't think those would break anything.

[LeaVerou]

Oh, that’s what you were thinking. I was thinking of using unicode characters to show it.
Using images would mean I’d have to distribute images together with Prism, which makes it harder to use it and increases the size of the file.
Perhaps a solution would be to use pseudoelements somehow, since they're not selectable.

[kizu]

But we can use gradients! Like this — http://dabblet.com/gist/3092469 — it's very quick rough example, but you can get the idea.

[LeaVerou]

The problem with gradients is that they don't inherit the text-shadow and they look aliased.

[LeaVerou]

Btw, not sure if you noticed (or if I wrote it elsewhere), but I've coded a first version of this plugin: http://leaverou.github.com/prism/plugins/show-invisibles/