Left border for nested <H> sections

This is not so much of a feature request, but a question regarding custom CSS.

I’ve seen the header counters in some of your code (share your CSS), pretty neat.
But I was wondering…
Is there any way to add a left border to the header/section blocks?
Something like the nested comments on Reddit.

So a border would span from the first H1 to the next, inside this a line would span from the first H2 to the next and so on…

I know how to style the H tag itself, but not how to define the space between them.

You’d need a div to wrap around the headers, I can’t think of anything else…

Unfortunately I checked but that is not implemented, there is just one main div for the content

O well, then the reddit like reply chain may be impossible to make without tinkering with the code.

Which code do you mean? The note itself? It can be done that way:

<div class="L">

# 1st level
Text...

<div class="L">

## 2nd level
More text...

<div class="L">

### 3rd level
And so on...
</div>
</div>
</div>

<style>
.L {
  margin-left: 4px;
  border-left: 2px solid gray;
  padding-left: 4px;
}
</style>

Giving:

Snap 2020-05-31 at 22.08.50

Not very convenient, I’m afraid.

1 Like

That exactly what I was looking for, but indeed not very convenient… it would be nice to have those divs added automatically… the same way the TOC has the automatic indents for each level.

And for making it automatic you will need to tinker with the code of Joplin