[Feature proposal] Numbered titles in MD preview pane?

Features
1

I was wondering if it was ever considered to give an option to put numbers in front of titles in the MD preview pane?

In other words, for this MD:

## First title
### First subtitle
### Second subtitle
## Second title
### Third subtitle

To get something like:
1. First title
1.1 First subtitle
1.2 Second subtitle
2. Second title
2.1 Third subtitle

thanks for reading this message!

(edit: I removed the h1 title for clarity)

1 Like
2

You mean like a table of contents? Joplin has a TOC plugin That can be enabled but it doesn’t have the numbers, I think that can be adjusted on your end though. I’m pretty sure you can find someone who has done it by searching the forum.

3

I think the “steps” are:

  • Type a header or subheader without numbering.
  • Joplin adds autonumbers.
  • a ToC scans the document for autonumbered headers.

But if Markdown doesnt have “autonumber” markup, Joplin must know of this in the raw format where it saves text? (Newbie sorry)

Without autonumbering it just relies on typing a number. And by adding a header later on, you have to manually renumber the rest of the document.

4

@CalebJohn No I don’t mean a TOC, I mean having automatic numbering of the section titles in the view pane. Basically, I would like that “## First title” gets shown as “1. First title”.

(actually I should have avoided using h1 headers in my example in the first post, I will edit that)

I made this mockup to show what I mean:
mockup

@joeldebruijn I am not sut to get what you are saying. Do you mean there is already a way to enable this behavior?

5

I googled “CSS auto number headers” and it looks like there are actually some cool CSS tricks to do this!
Take a look at this example. I think you can basically just copy that CSS into your userstyle.css file to achieve the effect.

3 Likes
6

Thanks for the suggestion! I ended up combining and writing bits of CSS in order to get numbering to work both in the titles and in the TOC. Here is my ~/.config/joplin-desktop/userstyle.css:

/* Implement counters and numbering for h1-h6 titles */

body {
  counter-reset: h2;
}

h2 {
  counter-reset: h3;
}

h3 {
  counter-reset: h4;
}

h4 {
  counter-reset: h5;
}

h5 {
  counter-reset: h6;
}

h2:before {
  content: counter(h2, decimal) ". ";
  counter-increment: h2;
}

h3:before {
  content: counter(h2, decimal) "." counter(h3, decimal) ". ";
  counter-increment: h3;
}

h4:before {
  content: counter(h2, decimal) "." counter(h3, decimal) "." counter(h4, decimal) ". ";
  counter-increment: h4;
}

h5:before {
  content: counter(h2, decimal) "." counter(h3, decimal) "." counter(h4, decimal) "." counter(h5, decimal) ". ";
  counter-increment: h5;
}

h6:before {
  content: counter(h2, decimal) "." counter(h3, decimal) "." counter(h4, decimal) "." counter(h5, decimal) "."
    counter(h6, decimal) ". ";
  counter-increment: h6;
}

/* Implement similar counters and numbering in the TOC  */

nav.table-of-contents li ul {
  counter-reset: toc-counter;
}
nav.table-of-contents li {
  display: block;
}
nav.table-of-contents :not(li) ul li:before {
  content: counters(toc-counter, ".") " ";
  counter-increment: toc-counter;
}

I still believe it would be a nice feature to have in Joplin directly though, but if I am the only one then I suppose a custom CSS file is the most relevant solution :).

Thanks for your answers!

1 Like
7

Sorry, bit vague :innocent:
I got the impression that you meant typing "First" would lead to "1" being rendered.

But still:
Notes with Joplin autonumbering cant be exported to Markdown files and still retain the autonumbers. Maybe the numbers can be added to the title themselves, but loose the 'auto' in autonumbering.
Maybe not bad all things considered.

8

Thanks for sharing your solution! You’re right this would probably make a good plugin!

9

As far as the deployment of CSS is concerned, there’s also a connection with merlinuwe’s style sheet.

1 Like