Recommended CSS snippet: Hide HTML comments on non-active lines

[vergenzt]

Hi! I just came up with this snippet for my own use and figured I'd share it:

edited 2025-04-09 Wed to account for #37 (comment):

/* filename: .obsidian/snippets/hide-non-active-comments.css */
/* Hide HTML comments in non-active lines (displays as `<-- …`) */
.cm-line:not(.cm-active) .cm-comment:not(.cm-hmd-codeblock) {
  display: block;
  max-width: 5ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-style: italic;
}

Screenshots

Without the snippet:

With the snippet, cursor not on any comment line:

With the snippet, cursor on first comment line:

[dvub]

nice, just added it for my exact same use case (link notes created today) and it works great.

[vergenzt]

Okay I just encountered an issue... codeblocks which contain syntax which is recognized as a comment in the language the code block get the comment tagged as the same CSS class, leading them to get abbreviated the same way. 🤪

With the following source:

```shell
set _pagination # empty for now
```

It led to the following rendering:

---

Fixing for myself with the following:

 /* filename: .obsidian/snippets/hide-non-active-comments.css */
 /* Hide HTML comments in non-active lines (displays as `<-- …`) */
-.cm-line:not(.cm-active) .cm-comment {
+.cm-line:not(.cm-active) .cm-comment:not(.cm-hmd-codeblock) {
   display: block;
   max-width: 5ch;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   font-style: italic;
 }

Renders fine after the fix: