Is it possible to show hidden characters in CodeMirror?

Question

Is it possible to show hidden characters (for example, a carriage return character) in the Codemirror text editor , but I did not find any configuration link in it. Is it possible to do this?

Answer 1

A carriage return is interpreted specifically by CodeMirror (when it is on its own, it creates a line break when it will be ignored before the line feed), so in this case you cannot.

But other non-printable characters (e.g. \b ) will appear as red dots by default, and you can adapt the corresponding cm-invalidchar CSS class to customize their appearance.

Answer 2

This can be done using overlays and predefined styles with a space character and an EOL symbol as follows:

 cm.addOverlay({ name: 'invisibles', token: function nextToken(stream) { var ret, spaces = 0, peek = stream.peek() === ' '; if (peek) { while (peek && spaces < Maximum) { ++spaces; stream.next(); peek = stream.peek() === ' '; } ret = 'whitespace whitespace-' + spaces; } else { while (!stream.eol() && !peek) { stream.next(); peek = stream.peek() === ' '; } ret = 'cm-eol'; } return ret; } }); 

For this purpose you can use addon CodeMirror Show Invisibles .