Pluto - Is possible to Auto Numbering for Headings?

Tooling Pluto
,
1

Is it possible that Pluto or PlutoUI automatically number the headings?

I tried something like this post AutoNumbering, but only work is all text is in one cell.

Thank you in advance for the help!
Eduardo

4 Likes
2

I tried playing around a bit with this and it is indeed a bit tricky.

I think the problem with how the example in the link you posted is structured is in the scope of CSS counters.
You can see this issue pointed out in some stackverflow answers like this one

Using the following style code in a pluto cell, I was able to get the functionality you are after.
The trick was really to initialize the first time all counters in the main style.
Leaving only h1 set there, I would not be able to get properly working numbers for headings other than h1

html"""
<style>
/** initialize css counter */
main {
    counter-reset: h1 h2 h3 h4 h5 h6;
}

pluto-notebook h1 {
    counter-reset: h2;
}

pluto-notebook h2 {
    counter-reset: h3;
}

pluto-notebook h3 {
    counter-reset: h4;
}

pluto-notebook h4 {
    counter-reset: h5;
}

pluto-notebook h5 {
    counter-reset: h6;
}

/** put counter result into headings */
pluto-notebook h1 {
    counter-increment: h1;
}
pluto-notebook h1::before {
    content: counter(h1) ". ";
}

pluto-notebook h2::before {
    counter-increment: h2;
    content: counter(h1) "." counter(h2) ". "
}

pluto-notebook h3::before {
    counter-increment: h3;
    content: counter(h1) "." counter(h2) "." counter(h3) ". ";
}

pluto-notebook h4::before {
    counter-increment: h4;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". ";
}

pluto-notebook h5::before {
    counter-increment: h5;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". ";
}

pluto-notebook h6::before {
    counter-increment: h6;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". ";
}
</style>
"""

Here is the then properly working notebook screenshot:

image
image1096×1056 28.4 KB

5 Likes
3

Thank you, that is really helpful.

Do you know how it can reset when the same header appears? In the picture below, 1.2.4 should be 1.2.1, and 1.2.5 should be 1.2.2, etc.

auto-numbering
auto-numbering103×561 7.47 KB

4

I think this is still an issue with scoping of CSS counters.
Even the H2 level does not get reset when adding a new H1 header…

Edit: You could probably achieve this with a javascript and some MutationObservers as I did here to count references to latex equations but I am afraid a CSS only solution is not possible if you want to have consistent numbering with headers defined in different cells.

1 Like
5

Thank you for the help! I will give it a try.