Is there a way to highlight tab spaces in cm6?

v6
1

We want a way to highlight the background in code mirror 6 for tabbed spaces only.
In CM 5 there seemed to be a way to change the style of a tab element since it was a span element with class “cm-tab”. Is there a way to change the styling for tabs in CM6?

1 Like
2

Yes, there is.

3

Thanks. When I use the extension all tabbed lines show up under “cm-highlightSpace”. I also tried “highlightSpecialChars” and haven’t had any luck with this extension as well. It seems like there isn’t a distinction between tabbed spaces and regular spaces.

6

As the docs that I linked tell you, the extension styles tabs with .cm-highlightTab and spaces with .cm-highlightSpace. You can override the styles for those (though mind the theme prefix specificity if you’re doing it in plain CSS).

7

Overriding doesn’t work. I’ll try to create an example that demonstrates the issue.

8

Here is an example that demonstrates the issue.
white space shows up in blue but I want tab spaces to show up in green and it doesn’t work.

https://codesandbox.io/p/sandbox/create-react-app-forked-hjkcnh

9

I see, when you say ‘tab spaces’ you don’t mean tabs, you mean spaces at the start of the line. The extension does not distinguish between those. You’d have to write your own (maybe fork view/src/highlight-space.ts, it’s only 57 lines).

10

No, also when I press the tab key in the editor they show up as white spaces. I’ll take a look at link you provided. Thanks.