Theme to display numbered headings

FoldingText
1

Hello,

I’m trying to work out how to create a theme that automatically shows a number for each heading—for example, type the following:

# First Heading
## First Subheading in First Section
# Second Heading
## First Subheading in Second Section

And see the following in FoldingText:

# 1. First Heading
## 1.1 First Subheading in First Section
# 2. Second Heading
## 2.1 First Subheading in Second Section

I found the following CSS snippet online, but pasting it into my user.less file didn’t work:

body {
counter-reset: h1
}

h1 {
counter-reset: h2
}

h2 {
counter-reset: h3
}

h3 {
counter-reset: h4
}

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

h2:before {
counter-increment: h2;
content: counter(h1) “.” counter(h2) ". "
}

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

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

Other themes that I have found that modify how the headings in FoldingText are displayed involve CodeMirror, and I have’t been able to work out how to do it that way. Mainly because I’m a noob at all this stuff.

Any help would be much appreciated.

2

Hey there.

You are on the right track but 2 things:

  1. you have to target the actual cm-heading levels in this case (not a standard H1, H2.
  2. I don’t believe you can successfully locate the counters AFTER the hashes as the css is not content aware of how many and where these are displayed. Typically pseudo-classes (before, after) are used to place additional content in the DOM (after HTML is written) as they suggest, before or after the HTML, not in between.

I didn’t follow through with the entire implementation of your counters but got the first to display such as:

1. # Heading One

by changing your code like this:

body {
        counter-reset: h1;
    }

    .cm-heading[cm-level="1"]:before {
        counter-increment: h1;
        content: counter(h1)"."
    }

So in a nutshell. By all means use H1, H2, etc. for your counter labels. but look for the CodeMirror classes of:

.cm-heading[cm-level="1"]
.cm-heading[cm-level="2"]

Hope that helps!

3

Thanks so much for your help!

As far as I can tell, I managed to get the numbers to display after the "#"s successfully by means of the following:

.cm-heading[cm-level=“1”] {
.cm-keyword:after {
counter-increment: h1;
content: " “counter(h1)”. "
}
}

Unfortunately, however, I think this task is beyond my capabilities. There are two main problems. The first problem is that, when I type a heading on the first line of the document, it works as desired–that is, the heading is numbered ‘1’–up until I press enter to go to a new line. At that point, the ‘1’ changes to a ‘2’. This only happens when the heading is on the first line of the document.

The second problem is about how to get the numbering working for the subheadings. When I tried this, the numbers for the subheadings did not increase. I think this must be because when you type a subheading, you type ‘#’, followed by another ‘#’. As soon as you type the first ‘#’, a level-1 heading is temporarily created, which, given how I’m trying to do the numbering, resets the counter for the level-2 headings. So creating a level-2 heading entails creating a level-1 heading, which involves resetting the level-2 heading counter. So the level-2 headings are all numbered ‘1’. I don’t know how else to do the numbering for the subheadings that would avoid this problem.

I think trying to solve this will take up too much of my time, since I am not a programmer and am learning as I go, so I might admit defeat here, although I’m certainly still interested if anyone has any ideas. Thanks again for your help, Jason!