CSS: Differentiate between Obsidian and HTML Comments

[flechtwerk]

What I’m trying to do

I want to hide Obsidian comments (%% … %%) in editing mode (except in active lines), but keep HTML comments (<!-- … -->) visible throughout the note. (This would give me two different ways to annotate text.)

Things I have tried

I have this simple CSS snippet to hide comments in editing mode, except in active lines:

.cm-line:not(.cm-active) .cm-comment
    { display: none; }

This hides both kinds of comments though. Is there a way to differentiate between them and make the snippet only apply to Obsidian comments?

[holroy]

Have you seen in the Developers Tool, if their markup is different somehow? That’ll be the ticket to differentiate the CSS.

Are you only concerned with live preview, and don’t care about reading mode?

[flechtwerk]

The two comments are differentiated in Developer Tools:
Obsidian Comment: span.cm-comment
HTML Comment: span.cm-comment.cm-hmd-html-begin

As I’m quite a noob with CSS, I’m note sure how to make this information useful.

And yes, I only care about live preview - in reading mode both comment types should stay hidden, as they are now.

[flechtwerk]

What I wrote above was wrong, unfortunately. The two comments are both seen in Developer Tools as:
span.cm-comment

[woofy31]

The difference is as follows:

• HTML comments just have a .cm-comment class
• Obsidian comments also have .cm-comment-start and .cm-comment-end classes for the %% placeholders

So, given this CSS snippet I made:

.is-live-preview .cm-line:not(.cm-active):has(.cm-comment-start, .cm-comment-end) * {
  visibility: hidden;
}

• this works only in Live Preview editing mode as requested
• this does not use display: none because that collapses the whole line and you will never be able to edit it again in Live Preview mode (except in source mode)
• instead uses visibility: hidden so that the comment line doesn’t collapse but you cannot see it unless you move the cursor to its line
• this works even if you just use the starting %% or just the ending %%, or both

[flechtwerk]

Thank you, this does exactly what I needed!