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