Don't fold over horizontal rule line break

Feature requests
13

Success! I knew there had to be a better way than what I posted above.

The below CSS snippet makes it easy to turn a divider into a header (protecting it from folding), doesn’t introduce any additional characters or html into the note, and leaves everything working normally except when # is added to the line immediately above your ---:

/* 
Hide and resize H1 style when it has a hr divider line immediately after.
*/

.HyperMD-header-1:has(+ .hr) {
    opacity: 0;
    font-size: 1px;
}

.cm-active.HyperMD-header-1:has(+ .hr) {
    opacity: 100;
    font-size: var(--h1-size);
}

The snippet is pretty simple! Here’s how to use it after installing:

  1. Add # to the line before your divider line (---)
  2. That’s it!

What the snippet is doing: It’s basically restyling your H1 (#) when it’s immediately followed by a --- on the next line (which Obsidian automatically adds a hr class to). Thanks to the CSS has:() modifier it’ll only restyle your H1 if it sees an hr class after.

The H1 line will then become 1px (so the spacing around the divider looks good) and the visible markdown will disappear without needing to do anything else to it. To keep things user friendly, the H1 line will display normally when it’s the active line so it’s easy to adjust or delete the markdown whenever needed.

If you want the same thing to happen with H2-6, here’s the CSS for that (I personally always use H2 for my divider lines as H1 is reserved for my note title):

/* 
Hide and resize header styles when there's a hr divider line immediately after.
*/

.HyperMD-header-1:has(+ .hr) {
    opacity: 0;
    font-size: 1px;
}

.cm-active.HyperMD-header-1:has(+ .hr) {
    opacity: 100;
    font-size: var(--h1-size);
}

.HyperMD-header-2:has(+ .hr) {
    opacity: 0;
    font-size: 1px;
}

.cm-active.HyperMD-header-2:has(+ .hr) {
    opacity: 100;
    font-size: var(--h2-size);
}

.HyperMD-header-3:has(+ .hr) {
    opacity: 0;
    font-size: 1px;
}

.cm-active.HyperMD-header-3:has(+ .hr) {
    opacity: 100;
    font-size: var(--h3-size);
}

.HyperMD-header-4:has(+ .hr) {
    opacity: 0;
    font-size: 1px;
}

.cm-active.HyperMD-header-4:has(+ .hr) {
    opacity: 100;
    font-size: var(--h4-size);
}

.HyperMD-header-5:has(+ .hr) {
    opacity: 0;
    font-size: 1px;
}

.cm-active.HyperMD-header-5:has(+ .hr) {
    opacity: 100;
    font-size: var(--h5-size);
}

.HyperMD-header-6:has(+ .hr) {
    opacity: 0;
    font-size: 1px;
}

.cm-active.HyperMD-header-6:has(+ .hr) {
    opacity: 100;
    font-size: var(--h6-size);
}

Hope somebody finds this helpful! I love Obsidian snippets.

3 Likes