I am trying to get automatic numbering on headers using CSS snippets. Right now my issue is that some counters don’t reset in the Preview mode, and I can’t figure out why, or how to solve the issue. Here is the CSS I use:
.markdown-preview-view {
counter-reset: h1-prev h2-prev h3-prev h4-prev h5-prev h6-prev;
}
.markdown-preview-view h1::before {
counter-increment: h1-prev;
counter-reset: h2-prev h3-prev h4-prev h5-prev h6-prev;
content: counter(h1-prev) ". ";
}
.markdown-preview-view h2::before {
counter-increment: h2-prev;
counter-reset: h3-prev h4-prev h5-prev h6-prev;
content: counter(h1-prev) "." counter(h2-prev) ". ";
}
...
and the numbering is something like:
- First title
1.1 First subtitle- Second title
2.2 First subtitle of second title
Things I have tried
I’ve tried different selectors to no avail, but now I’m starting to believe the issue is linked to counter scopes, and the fact that headers are contained in adjacent div
s, with no classes I could use as handles. Cna anybody confirm?
What I’m trying to do
I’m trying to get a numbering like:
- wgwg
1.1 wrgwrg- asgar
2.1 wrgwr
in the preview mode.
I’ve succeeded in the source view edit mode with the following structure:
.markdown-source-view {
counter-reset: h1-ed h2-ed h3-ed h4-ed h5-ed h6-ed;
}
.markdown-source-view .HyperMD-header-1 {
counter-reset: h2-ed h3-ed h4-ed h5-ed h6-ed;
}
.markdown-source-view .cm-header-1 + .cm-header-1::before {
counter-increment: h1-ed;
content: counter(h1-ed) ". ";
}
.markdown-source-view .HyperMD-header-2 {
counter-reset: h3-ed h4-ed h5-ed h6-ed;
}
.markdown-source-view .cm-header-2 + .cm-header-2::before {
counter-increment: h2-ed;
content: counter(h1-ed) "." counter(h2-ed) ". ";
}
.markdown-source-view .HyperMD-header-3 {
counter-reset: h4-ed h5-ed h6-ed;
}
.markdown-source-view .cm-header-3 + .cm-header-3::before {
counter-increment: h3-ed;
content: counter(h1-ed) "." counter(h2-ed) "." counter(h3-ed) ". ";
}
.markdown-source-view .HyperMD-header-4 {
counter-reset: h5-ed h6-ed;
}
.markdown-source-view .cm-header-4 + .cm-header-4::before {
counter-increment: h4-ed;
content: counter(h1-ed) "." counter(h2-ed) "." counter(h3-ed) "." counter(h4-ed) ". ";
}
.markdown-source-view .HyperMD-header-5 {
counter-reset: h6-ed;
}
.markdown-source-view .cm-header-5 + .cm-header-5::before {
counter-increment: h5-ed;
content: counter(h1-ed) "." counter(h2-ed) "." counter(h3-ed) "." counter(h4-ed) "." counter(h5-ed) ". ";
}
.markdown-source-view .cm-header-6 + .cm-header-6::before {
counter-increment: h6-ed;
content: counter(h1-ed) "." counter(h2-ed) "." counter(h3-ed) "." counter(h4-ed) "." counter(h5-ed) "." counter(h6-ed) ". ";
}