Change how specific MD syntax displays in Live Preview?

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.

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.

CleanShot 2024-03-16 at 10.07.12

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);
}

Screenshot 2024-03-16 at 10.20.39

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);
}

CleanShot 2024-03-16 at 11.55.00

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.

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.

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.

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

1 Like