Hi,
I’ve needed to reorganise a more significant document with many headings. While scrolling up and down, I had trouble keeping constant heading formatting per different topics.
So, instead of working on a document, I spend an hour making this snippet 
The snippet shows you " (h…)" after the headings in the editing mode …
It took me a while to prevent from showing " (h…)" after ### sings, as it was annoying! This made the magic :not(.cm-formatting-header-1).
I didn’t want this snippet to be applied to every note, so I made it be triggered via property cssclasses = visibleHeading
OK, enough of the boring stuff …
CSS Snippet
/* Adds a visual label " (h..)" after each level header in editing mode, except when formatting (after ###) */
/* This is useful for distinguishing between headers of different levels in the editor */
/* Adds a visual label " (h1)" */
.visibleHeading
.HyperMD-header
.cm-header-1:not(.cm-formatting-header-1)::after {
content: " (h1)"; /* Displays the header level as " (h..)" */
font-size: 0.7em; /* Makes the label smaller than normal text */
opacity: 0.5; /* Reduces the label's opacity for subtlety */
}
/* Adds a visual label " (h2)" */
.visibleHeading
.HyperMD-header
.cm-header-2:not(.cm-formatting-header-2)::after {
content: " (h2)";
font-size: 0.7em;
opacity: 0.5;
}
/* Adds a visual label " (h3)" */
.visibleHeading
.HyperMD-header
.cm-header-3:not(.cm-formatting-header-3)::after {
content: " (h3)";
font-size: 0.7em;
opacity: 0.5;
}
/* Adds a visual label " (h4)" */
.visibleHeading
.HyperMD-header
.cm-header-4:not(.cm-formatting-header-4)::after {
content: " (h4)";
font-size: 0.7em;
opacity: 0.5;
}
/* Adds a visual label " (h5)" */
.visibleHeading
.HyperMD-header
.cm-header-5:not(.cm-formatting-header-5)::after {
content: " (h5)";
font-size: 0.7em;
opacity: 0.5;
}
/* Adds a visual label " (h6)" */
.visibleHeading
.HyperMD-header
.cm-header-6:not(.cm-formatting-header-6)::after {
content: " (h6)";
font-size: 0.7em;
opacity: 0.5;
}
Cheers, Marko 
