#1

I remember this wasn’t possible with the old editor, but wondering if the new editor allows CSS styling of lists? (In the editor, not the preview.) I tried adding this, but had no luck.

list-style: circle;

#2

I think it might be possible, but list items in the editor aren’t actually in lists, so the simple tricks won’t work.
It would just be a matter of finding the class for a list item line and adding a ::before with the content you want. (not at my computer right now, so can’t just quickly whip something up)

By the looks of things though it seems as if you’re trying to hack together a WYSIWYG editor before the official one is ready :laughing:

1 Like
#3

Basically. Although I don’t really need WYSIWYG - just slightly prettier markdown. As far as I can tell this is the last thing I’d need…

1 Like
#4

At my computer this morning, so here’s what I’ve come up with:

.cm-s-obsidian div:not(.CodeMirror-activeline) > pre.CodeMirror-line
span.cm-formatting-list-ul {
  font-size: 0;  /* remove the bullet char */
}
.cm-s-obsidian div:not(.CodeMirror-activeline) > pre.CodeMirror-line
span.cm-formatting-list-ul::before {
  content: '•';
  font-size: 1rem;
  padding-right: 0.18rem;
  color: var(--text-normal);
}

You can change the character for the bullet in the content: '•'; part.
If you wanted different characters for different levels you could do something like this:

.cm-s-obsidian div:not(.CodeMirror-activeline) > pre.CodeMirror-line
span.cm-formatting-list-ul.cm-list-1::before {
  content: '•';
}
.cm-s-obsidian div:not(.CodeMirror-activeline) > pre.CodeMirror-line
span.cm-formatting-list-ul.cm-list-2::before {
  content: '◦';
}
.cm-s-obsidian div:not(.CodeMirror-activeline) > pre.CodeMirror-line
span.cm-formatting-list-ul.cm-list-3::before {
  content: '▪';
}
/* etc */
2 Likes
#5

This is amazing. Thanks again for your CSS nija skills!

(Only issue I found is that if the first line of the document is a list item, it doesn’t seem to get affected, but I can live with that.)

#6

This also does seem to do some funky things to text selection. Not terrible, but people should use this CSS with caution. (It makes it seem like text on the right hasn’t been selected when it has.)

1 Like