Left border for nested <H> sections

Support
1

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.

2

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

3

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

4

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

5

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
6

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.

7

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