Change how specific MD syntax displays in Live Preview?

[macrospect]

Is there any way to change how some specific MD syntax renders in Live Preview mode? My case: I use the commenting function a lot, but the “%%” takes up a ton of room in my notes and visually clutters up my screen. I would really appreciate it if there were a way to make these marks show up as some slimmer symbol, like | or {. If anyone has a snippet or plugin, or just could point me toward the right css element to change, I would be really grateful.

[ariehen]

You could try this silliness courtesy of FireIsGood:

.cm-line:not(.cm-active) :is(.cm-comment-start, .cm-comment-end) {
  color: transparent;
  position: relative;
}
.cm-line:not(.cm-active) :is(.cm-comment-start, .cm-comment-end)::after {
  content: 'ඞඞ';
  position: absolute;
  left: 0;
  width: 4ch;
  color: var(--text-muted);
}

This hides the original percent symbols and replaces it with whatever is in content: ' '; when you aren’t on that line.

If you wanted the start and end comment to be different, you could break them out:

.cm-line:not(.cm-active) :is(.cm-comment-start, .cm-comment-end) {
  color: transparent;
  position: relative;
}
.cm-line:not(.cm-active) .cm-comment-start::after {
  content: 'ꆜꆜ';
  position: absolute;
  left: 0;
  width: 4ch;
  color: var(--text-muted);
}

.cm-line:not(.cm-active) .cm-comment-end::after {
  content: 'ꁸꁸ';
  position: absolute;
  left: 0;
  width: 4ch;
  color: var(--text-muted);
}

Keep in mind the original spacing for the two %% is still there, so it may look a bit off if you only use one character for the content: '', but you can put pretty much anything in there.

edit:

This version is fairly minimal and seems mostly balanced:

.cm-line:not(.cm-active) :is(.cm-comment-start, .cm-comment-end) {
  color: transparent;
  position: relative;
}
.cm-line:not(.cm-active) :is(.cm-comment-start, .cm-comment-end)::after {
  content: '|';
  position: absolute;
  left: 0.4ch;
  width: 4ch;
  color: var(--text-muted);
}

If you decide to use any of this, just play around with the values a bit depending on the character you use for the content.

[macrospect]

This is fabulous, thank you so much! I may keep playing around to see if there is any way to do this without the extra blank space where the “%” would be. But this is a huge step up in terms of decluttering!

I ended up going with these values, for reference, which look neatest on my screen:

}
.cm-line:not(.cm-active) .cm-comment-start::after {
  content: '{';
  position: absolute;
  left: 1.7ch;
  width: 2ch;
  color: var(--text-muted);
}

.cm-line:not(.cm-active) .cm-comment-end::after {
  content: '}';
  position: absolute;
  left: 0.4ch;
  width: 2ch;
  color: var(--text-muted);
}

Just one quick follow-up question: Is there a variable for text that is even lighter than “text-muted”? The original color of the “%” (a very light gray) would be great, but I’m not sure what that was in terms of font variables.

[ariehen]

@macrospect

Just one quick follow-up question: Is there a variable for text that is even lighter than “text-muted”? The original color of the “%” (a very light gray) would be great, but I’m not sure what that was in terms of font variables.

I hadn’t checked before but it appears the default theme uses var(--code-comment); for the %% symbols and text between. You could try that.

In the default theme’s light mode, for me, that --code-comment ends up being #ababab. You could skip the variable and use a hex, rgb, etc., there as well if it looks alright in both light and dark modes. e.g.

    color: rgb(210,210,210);

---

Also, for next time, when you paste code in the forum it’s best to mark it as code so the forum doesn’t try to render it.

[macrospect]

Thank you! (And edited the code in the prior post.)