Option to fold or hide comments in Live Preview (including comments that encapsulate code blocks)

I want to hide or fold this entire section. I ran into the following issues with the current dom structure in Live Preview.


It is great that we have .cm-comment-start and .cm-comment-end however they are both children of .cm-line and CSS does not allow selecting .cm-line based on their children’s classes thus I’ve not been able to craft a CSS that would select the range of siblings between the parents of .cm-comment-start and .cm-comment-end.

I also attempted

.cm-comment {display: none;}

but unfortunately .HyperMD-codeblock does not receive the .cm-comment class even when it is within the comment block.

This script hides the comment block, but this is a code block, not a CSS. This could maybe be the basis of a Markdown Post Processor, but I don’t think this is the right approach:

function hideComments(element) {
    const commentStarts = element.querySelectorAll('.cm-comment-start');
    commentStarts.forEach(function(commentStart) {
        const cmLine = commentStart.parentElement;
        cmLine.style.display = "none";
        let nextElement = cmLine.nextElementSibling;
        while (nextElement && !nextElement.querySelector('.cm-comment-end')) {
            nextElement.style.display = 'none';
            nextElement = nextElement.nextElementSibling;
        if(nextElement && nextElement.querySelector(".cm-comment-end")) {
            nextElement.style.display = "none";

This was the first thing that came to mind when trying out the new “hybrid”-Excalidraw feature.

I fully support this request.