Heading (and text after it) indentation

Custom CSS & Theme Design
1

What I’m trying to do

I would like to indent headers and texts

# heading
text
     ## heading
     text
     text
     text
           ### heading
           text
1 Like
2

As for indenting headings you can create a custom snippet that select headers and then add the property margin left= xx px.

Regarding indenting text based on the heading above it I don’t know if it’s possibile, certainly not on live-preview view.

3

Indenting text creates a code block.

indented text
indented text1074×450 30.4 KB

4

Hi @teseracto ! :blush:

Here is the CSS code snippet I use to achieve this, maybe it will work for you too :

/* Shift left all headings in the gutter in order to make them more distinguishable from text bodies in Editing and Reading modes. */
/* NOTE : `:not(.callout-content)` is used to exclude headings contained in callout boxes */
.HyperMD, 
:not(.callout-content) > h1,
:not(.callout-content) > h2,
:not(.callout-content) > h3,
:not(.callout-content) > h4,
:not(.callout-content) > h5,
:not(.callout-content) > h6 {
  position: relative;
}
h1, .HyperMD-header-1 {
  left: -31px;
}
h2, .HyperMD-header-2 {
  left: -30px;
}
h3, .HyperMD-header-3 {
  left: -22.5px;
}
h4, .HyperMD-header-4 {
  left: -15px;
}
h5, .HyperMD-header-5 {
  left: -7.5px;
}
h6, .HyperMD-header-6 {
  left: 0px;
}
div.markdown-preview-view,
div.markdown-source-view div.cm-content { /* This is used to center note considering shifted titles */
  padding-left: 60px !important;
  padding-right: 20px !important;
}

I agree with @ironhak, I don’t think to that indenting text bodies by header is possible from plain CSS. In the past I tried to use a JS script for this, but it led to a buggy jumping effect, so I opted for that simple CSS code which is sufficient for me.

Let me know if you need further clarification,
Lila.

6 Likes
5

Thanks, I will use this. It’s a pity we can’t make it with texts, indenting text with tabs is a solution but I prefer to leave text without format.

6

Maybe you could indent text blocks using html, maybe someone will post here how to do since I don’t know much of that language.

May I ask you why you need that feature? Maybe there are other simpler solutions.

7

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.