We switched to a manual approval system for registration on this forum, as this makes it easier to keep bots out of the forum. We'll approve everybody who doesn't look like a bot!

How to move header markers to the left in custom css

edited April 21 in Customisation

I would like to move the hx (H1, h2, h3 ...) markers to the left from the text on the margin,
so o aligned over the text is only the content of the headers

I want to get a similar effect like Bear editor.

Edit: Apparently ::marker pseudo-element could do that, but how exactly redefine 'h1' element?
I have only rudimentary css knowledge from long ago.

Redefinition

h1 {
  display: list-item;
}

h1::marker {
  content: "H1";
}

doesn't work.

Also, I want to get the same effect with list item markers :

#prev-sheet
        { list-style: outside ;}

doesn't seem to have an effect

Tagged:

Comments

  • There is no way to do so using custom CSS, as there are no <h1> or <li>-tags within the editor. Syntax highlighting is quite different from actual rendering. We'd need some custom plugins for that to work, which would require quite a significant amount of work to make sure cursor positions and text insertions etc. pp. still work as expected.

  • You can align the headers in two ways (though these are kind of workarounds):

    First, you can use the display element on the .heading-tag class, which would give the following:

    #editor .heading-tag{
      display:none;
    }
    

    The heading-tag will disappear. Then with the margin-left element, you will need to re-align the header itself.

    #editor .size-header-1{
      margin-left: -0.2em;
    }
    

    You will have to do this for .size-header-2, .size-header-3, etc. as well. Depending on the text size of your headers you will need to change the -0.2em value. I experimented a bit with the values and -0.2em works well for me.

    Second, you can do something similar and change the display element to the color element and as its value you put the same color as your background. This, of course, is a pretty dirty workaround.. But it get's the job done. I am using the first option though.

    The only clunky part of these workarounds is that when you select a header all the way from the left, there's still a space from the heading-tag (though you can't see it). This can feel a bit awkward when changing the headers etc. But for me that's a small trade-off to get the headers and text aligned.

Sign In or Register to comment.