Vertical Header Lines

Plugins ideas
1

Use case or problem

I’d like to see vertical lines that go from header to header, similar to code.

Examples:
image

# Header 1
|  text text 
|  ## Header 2
|  |  text text
|  |  text text
|  |  ### Header 3
|  |  | etc.
# Header 1

I tried searching but couldn’t find anything.

2

hey, have you solved the problem? i think this is a very important feature for me too.

3

I don’t recall if I did anything, but they are there now.

image

I didn’t see any css snippets that were related, so may be it was added by a plugin?

FWIW I had to actually tab (or space) the to indent the lines to get them to show. It was not just automatic for headers, which is more what I was looking for.

4

hey, nice idea! I have a hard time distinguishing headers visually and thought about this too but sadly my CSS skills are too weak at the moment. Does anyone have a working solution? :slight_smile:

5

Not for headers, just indented text. Example:

image

6

My current solution for better visual distinction is to indent the headings a bit based on their level (starting with H2 15 pixels). Additionally, starting with H2 I put one additional “>” in front of the heading for every level

image

CSS:

.cm-header-2{
    margin-left: 0px !important;
}

.cm-header-3{
    margin-left: 15px !important;
    before: "> ";
}

.cm-header-4{
    margin-left: 30px !important;
}

.cm-header-5{
    margin-left: 45px !important;
}

.cm-header-6{
    margin-left: 60px !important;
}

.cm-header-3:before{
    content: "> ";
}

.cm-header-4:before{
    content: ">> ";
}

.cm-header-5:before{
    content: ">>> ";
}

.cm-header-6:before{
    content: ">>>> ";
}

This can probably be minified but I am by no means a CSS wizzard