I want to highlight all whitespace: spaces, tabs, newlines, carriage returns, and form feeds.
So, I’ve tried using highlightSpecialChars like this:
highlightSpecialChars({
render: (code, description, placeholder) => {
console.log(code, description, placeholder);
let rv = document.createElement(‘span’);
rv.innerHTML = placeholder;
return rv;
},
specialChars: /\s/g,
})
but it only matches spaces (and correctly renders dots for spaces).
You may be interested in highlightWhitespace from the @codemirror/view package.
Tried that first, also did not show newline, just spaces.
Line breaks aren’t rendered as characters in the editor, so you cannot replace them. Are you looking to display a widget at the end of every line (except the last)? You’d have to write a custom extension for that.
Yes, that’s what I’d like.
I have an app which does dynamic testing (compare stdouts) for the students, and every white space matters there.
Are there any examples of similar widgets for me to try and modify?
Not directly, but the decoration examples should show all the concepts this would involve.
Check out my comment, it might help you.