#1

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

8 Likes
Show whitespace in editor
How to Calculate Duration between Dates in Dataview
#2

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?

1 Like
#3

@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

1 Like
#4

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

#5

Hello.

Anyone know the CSS for this with the new editor?

Thanks

Angel

#6

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

#7

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.

#8

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: