Toggle headings numbering

[memophen]

@tessus

toggle that behavior

Do you really want to toggle, like seeing section numbers on working days and not seeing them in the weekends? If you want to make a once-only decision per note, you can easily do it with a class reference in the note you want to decorate with numbers.

Here's my experiment. I conceived a class n- and applied it this way in the style definitions:

body {
  counter-reset: h2counter h3counter h4counter h5counter h6counter;
}

h1 { counter-reset: h2counter h3counter h4counter h5counter h6counter;}
h2 { counter-reset: h3counter h4counter h5counter h6counter;}
h3 { counter-reset: h4counter h5counter h6counter;}
h4 { counter-reset: h5counter h6counter;}
h5 { counter-reset: h6counter;}
h6 {}

.n- h2:before {
    counter-increment: h2counter;
    content: counter(h2counter) ".\A0\A0\A0";
}

.n- h3:before {
    counter-increment: h3counter;
    content: counter(h2counter) "." counter(h3counter) "\A0\A0\A0\A0\A0";
}

.n- h4:before {
    counter-increment: h4counter;
    content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) "\A0\A0\A0\A0\A0";
}

.n- h5:before {
    counter-increment: h5counter;
    content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) "." counter(h5counter) "\A0\A0\A0\A0\A0";
}

.n- h6:before {
    counter-increment: h6counter;
    content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) "." counter(h5counter) "." counter(h6counter) "\A0\A0\A0\A0\A0";
}

(I excluded the H1 level from being numbered, as I use that one as the title of the note.)

My note looks like this:

Numbered headers
================
<div class="n-">

## Level Two
### Level Three
### Nivo Trije
#### Level Four
##### Level Five
###### Level Six
Hello, world!
## Nivo Twa
### Niveau Drie
Hallo, wrâld!

# Nûmere kopteksten
## Niveau Twee
###### Nivo seis
Hallo, wereld!
## Ebene Zwei
###### Niveau Zes
Hallo, welt!
###### Vlak Ses
Hallo, wêreld!

</div>

###### Niveau Six

You can even decide within the note which parts have to be numbered and which parts not (I left "Niveau Six" at the bottom out).

In the future it might even be supported on per header basis:

##### Niveau Cinq {.n-}

[tessus]

@memophen

Do you really want to toggle , like seeing section numbers on working days and not seeing them in the weekends?

Haha, good one. No, but rather depending on the note. So your approach is a great workaround. Thank you. However, I'd rather use the opposite direction (turning off, instead of turning on).

[memophen]

That’s simple. Remove all the prefixing .n- selectors from my example above and define an nn (not numbered) class that wipes the numbers out:

.nn- h2:before,
.nn- h3:before,
.nn- h4:before,
.nn- h5:before,
.nn- h6:before {
  content: none;
}

Now you can (selectively) suppress the numbering in the note by <div class="nn-"> ... </div>.

[tessus]

Thx. Btw, is there a reason why you use a dash? Namespace thing?

[memophen]

Exactly. I changed my mind and prefer a single dash suffix now above a prefix that would take at least two characters.

Edit:
I’ve reported my whim here.

[tessus]

Hmm, I don’t get it to work.

[memophen]

I built the whole thing in a note yesterday, i.e. with all specific CSS included:

Unnumbered headers
==================
<div class="nn-">

## Level Two
### Level Three
### Nivo Trije
#### Level Four
##### Level Five
###### Level Six
Hello, world!
## Nivo Twa
### Niveau Drie
Hallo, wrâld!

# Nûmere kopteksten
## Niveau Twee
###### Nivo seis
Hallo, wereld!
## Ebene Zwei
###### Niveau Zes
Hallo, welt!
###### Vlak Ses
Hallo, wêreld!

</div>

###### Niveau Six

<style>

body {
  counter-reset: h2counter h3counter h4counter h5counter h6counter;
}

.nn- h2:before,
.nn- h3:before,
.nn- h4:before,
.nn- h5:before,
.nn- h6:before {
  content: none;
}

h1 { counter-reset: h2counter h3counter h4counter h5counter h6counter;}
h2 { counter-reset: h3counter h4counter h5counter h6counter;}
h3 { counter-reset: h4counter h5counter h6counter;}
h4 { counter-reset: h5counter h6counter;}
h5 { counter-reset: h6counter;}

h2:before {
    counter-increment: h2counter;
    content: counter(h2counter) ".\A0\A0\A0";
}

h3:before {
    counter-increment: h3counter;
    content: counter(h2counter) "." counter(h3counter) "\A0\A0\A0\A0\A0";
}

h4:before {
    counter-increment: h4counter;
    content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) "\A0\A0\A0\A0\A0";
}

h5:before {
    counter-increment: h5counter;
    content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) "." counter(h5counter) "\A0\A0\A0\A0\A0";
}

h6:before {
    counter-increment: h6counter;
    content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) "." counter(h5counter) "." counter(h6counter) "\A0\A0\A0\A0\A0";
}

</style>

And this was the result:

Can you copy my MD to a new note and see if you get the same (no)numbering as in my snapshot? If you have already some (no)numbering CSS in userstyle.css, you should comment that out to avoid interference (or simply temporarily rename userstyle.css).

[tessus]

Nope, unfortunaetly not (I renamed my userstyle.css). The strange thing is that I get numbering with your code. All my other notes don’t have numbering (since I renamed my userstyle.css):

[memophen]

I’m puzzled as well. At my side none of the H2…H6 headers are numbered except for the last one, ###### Niveau Six. Both on Windows and macOS, even with userstyle.css renamed. Is the last section ###### Niveau Six at your side numbered?

In fact, my CSS does not switch the numbering for H2…H6 off. It just makes it invisible by the content: none; property. You could try if content: ""; helps (gives the same result at my side). And otherwise you could move the block

.nn- h2:before,
.nn- h3:before,
.nn- h4:before,
.nn- h5:before,
.nn- h6:before {
  content: none;    /* or content: ""; */
}

to the end of the style specs.

Edit:
Here’s a little experiment to show who wins: the last definition or the most specific one:

Who wins?
=========

##### H5
###### H6

<div class="different">

##### H5
###### H6

</div>

<style>
  .different h5 { color: lightgreen; }
  h5 { color: orange; }
  h6 { color: orange; }
  .different h6 { color: lightgreen; }
</style>

In my case: the first H5/H6 pair is orange, and the second pair green. The most specific has won.

[tessus]

I moved this to a new topic. We can add the solution to the other topic later.

@memophen

Is the last section ###### Niveau Six at your side numbered?

Yes.

@memophen

You could try if content: ""; helps

Nope, didn't help.

@memophen

In my case: the first H5/H6 pair is orange, and the second pair green. The most specific has won.

Hmm, and do you see the < at the end? I'm very confused.

[memophen]

What if you put the entire <style> block on top of the note?

Edit:
If that does not help (I’m curious if you still see some sharp angle anywhere), add some whitespace between the <style> tags and the content of the CSS block.

In case of failure again, I’m running out of ideas for Joplin. We could try to find a common ground outside Joplin, by trying this HTML file in your browser:

<html>
  <head>
    <style>
      .different h5 { color: lightgreen; }
      h5 { color: orange; }
      h6 { color: orange; }
      .different h6 { color: lightgreen; }
    </style>
  </head>

  <body>

    <h1>Who wins?</h1>

      <h5>H5</h5>
      <h6>H6</h6>

      <div class="different">
        <h5>H5</h5>
        <h6>H6</h6>
      </div>
  
  </body>
</html>

Still 2 × orange + 2 × green here.

[tessus]

Same output. No change.

[tessus]

TL;TR

This can’t work. The commonmark specs are quite clear on that.

Joplin apparently allowed some things in the past, which didn’t follow the specs. I’m using git master, you probably 1.0.179.

Explanation

Foldable sections and hidden elements not working any more

[tessus]

This is the only way to remove headings numbering on a per-note basis:

<style>
h1:before, h2:before, h3:before, h4:before, h5:before, h6:before {content: none;}
</style>

[memophen]

I don’t want to interfere in the current discussion on Github, but Joplin 1.0.187 certainly behaves different from the CommonMark Spec.

CommonMark:

Joplin 1.0.187:

(Surprising that the <pre> tag does comply, in contrast with other tags.)

BTW, the <details> construction also still works in CommonMark.

[tessus]

@memophen

I don’t want to interfere

You should. I've added a link to this comment on gh. Things like that should be disseminated.
Btw, a link to the commonmark demo/live editor would be great.

[memophen]

Oh,that was simple (not overcoming my shyness , but finding the test page). I just clicked on one of the Try It buttons on the specs page. But this is the main entrance.