"Editor's CSS" to show tabs, trailing whitespace and "strict" line breaks

I use “Strict line breaks” to maximise compatibility with other Markdown apps, but mostly just use the editor and it’s unclear whether I’ve actually added the two spaces required for the strict line break or not. So I had a brainwave and added a line break marker with CSS.
Additionally, I found I could target trailing spaces and tabs in the editor, so I added those, too:

.cm-trailing-space-new-line, .cm-trailing-space-a, .cm-trailing-space-b, .cm-tab{
  font-size: 0;
}
.cm-trailing-space-a::before, .cm-trailing-space-b::before, .cm-trailing-space-new-line::before, .cm-tab::before{
  content:'·';
  color:var(--text-faint);
  font-size: initial;
}
.cm-trailing-space-new-line::before {
  content:'↵';  
}
.cm-tab::before {
  content:'⟶'
}

And here’s a screenshot of what it looks like in the editor:
image

9 Likes

You are one of the star experts here, and I use your Andy Mode almost religiously, adding it to any new theme I try, and having it as part of my standard default theme set-up.

Being an almost complete ignorant about CSS, but wanting to know if another one your brainwaves could be useful for me, could you explain in simple terms what this latest code snippet does, apart from compatibility with other markdown apps?

2 Likes

@Klaas I’ve updated the main post with a screenshot to make it clearer
Basically it replaces trailing spaces (spaces at the end of a line) with a · character, so you can actually see them (instead of them being invisible). Also, if the line ends with two or more spaces - what counts as a line break in markdown - the line will also end with a character to indicate a new line.
I also replace tabs with a character, so you can see them as well.

All of these only apply to the editor, and in preview mode the characters will not appear

2 Likes

How does this compare with Show whitespace plugin ?
(Which solution to choose for good compatibility with themes, plugins, fonts, monospaced fonts, bold text, …)

Hello.

Anyone know the CSS for this with the new editor?

Thanks

Angel

Hello, @Licat

I was reading this post about CSS themes and the changes from CM5 to CM6.

I am trying to get the CSS listed at the start of this thread to work with with new live-preview / source-mode editor, but just can’t work out how to modify the old CSS to make it work.

Does your post on the CodeMirror website mean that it will be impossible to tweak our old CSS themes to work ‘fully’ with the new editor, although some elements will work okay?

I understand almost nothing when it comes to CSS, but I have cobbled together a theme that I like. The only things I can’t get working are the CSS snippets that enable invisibles (spaces, line breaks, tabs, etc) to be viewed when writing. I don’t know if it is impossible to get the CSS to work as I need it to, or if I am just too dim to get the syntax right.

Thanks for any advice.

Angel

1 Like

I think there is a plugin that did this for cm5, but it hasn’t yet been updated to cm6 - but some people are working to get it upgraded behind the scenes and it may be available soon in the plugin store.

1 Like

Thanks. Sounds hopeful. My brain needs to see those invisibles, so I’ll be checking for the plug-in update about 1000 times every day :grimacing:.

Wish I was smart enough to work out the CSS syntax.

Super grateful

Angel :angel:

Can anyone tell me if this works in the final state of the program in any way? Can anyone give me instructions on how to enable this? I’ve tried some ways, but they all don’t work.

This css snippet hasn’t worked since the editor was changed in December last year. Such a shame.

I’m slowly drifting away from using Obsidian as I need to see invisibles in much of my work.

Angel

But GitHub - deathau/cm-show-whitespace-obsidian: A plugin for [Obsidian](https://obsidian.md) which shows whitespace in the editor. still work, isn’t it?

1 Like

It hasn’t been updated to work with the new editor, so it will only work with old versions of Obsidian.

Think the community-plugins directory needs to be moderated so that out-of-date plugins are removed or clear information is given stating which version of Obsidian each plugin is compatible with.

Angel

1 Like

Current version v1.0.3.
There’s no solution?

I have built the Control Characters plugin (obsidian://show-plugin?id=control-characters | https://github.com/joethei/obsidian-control-characters) as a replacement some time ago, it inludes all features of this snippet, and more.

3 Likes

:raised_back_of_hand: The issue is me.

Wow, thank you. I’ve been missing this functionality since Show Whitespace stopped working. I know it is probably a bit of a niche requirement, bit of a love/hate thing.

1 Like

In case it’s useful to anyone, I copied most of the original post and just added .markdown-source-view at the start. This now works in my current version of Obsidian:

/* Symbols at line breaks */
.markdown-source-view .cm-line::after {
  content:'↵';  
  color: var(--text-faint);
}

/* Symbols at trailing spaces */
.markdown-source-view .cm-trailing-space-a::before, .cm-trailing-space-b::before, .cm-trailing-space-new-line::before, .cm-tab::before {
  content: '·';
  color: var(--text-faint);
}

/* Symbols at indents - for some reason needs more specifics*/
.markdown-source-view.mod-cm6 .cm-indent::before {
  content: '🠂';
  color: var(--text-faint);
}
1 Like

wow, thanks for sharing!