Markdown-To-PDF indentation via CSS (in obsidian)

177 views Asked by At

I use Obsidian (Markdown Editor), where one can export markdown to pdf. For this CSS Snippets can be supplied to be applied in the convertion.

I want to indent all headers and following paragraphs based on the header level (for example:)

h1 Heading
paragraph
  h2 Heading
  paragraph
  paragraph
      h4 Heading
      paragraph
    h3 Heading
    paragraph

Sadly (as far as I know) CSS-classes cannot easily be used in this case (=obsidian). (It would be a pain to manually apply)

My current solution (crafted from tutorials, snippeds and, ofc, stackoverflow);

h6,
h6 ~ *{
  margin-left: 100px;
}

h5,
h5 ~ *:not(h6,h6 ~ *){
  margin-left:  80px;
}

h4,
h4 ~ *:not(h6,h6 ~ *):not(h5,h5 ~ *){
  margin-left:  60px;
}

h3,
h3 ~ *:not(h6,h6 ~ *):not(h5,h5 ~ *):not(h4,h4 ~ *){
  margin-left:  40px;
}

h2,
h2 ~ *:not(h6,h6 ~ *):not(h5,h5 ~ *):not(h4,h4 ~ *):not(h3,h3 ~ *){
  margin-left:  20px;
}

h1,
h1 ~ *:not(h6,h6 ~ *):not(h5,h5 ~ *):not(h4,h4 ~ *):not(h3,h3 ~ *):not(h2,h2 ~ *){
  margin-left:  0px;
}

The problem with this: It only kinda works, because it indents correctly as long as there isnt a higher level heading after a lower level heading (for example: this is what my code would wrongly produce)

h1
  h2
    h3
    h2 <- Error

I do know why my code does not work, but sadly i do not really know how to fix it


One of my already discarded solutions was

.HyperMD-header-1 ~ .cm-line, /* Editing View */
.el-h1 ~ * /* Reading View */
{
    text-indent: 1.5em;
}

.HyperMD-header-2 ~ .cm-line, /* Editing View */
.el-h2 ~ * /* Reading View */
{
    text-indent: 3em;
}

.HyperMD-header-3 ~ .cm-line, /* Editing View */
.el-h3 ~ * /* Reading View */
{
    text-indent: 4.5em;
}

.HyperMD-header-4 ~ .cm-line, /* Editing View */
.el-h4 ~ * /* Reading View */
{
    text-indent: 6em;
}

.HyperMD-header-5 ~ .cm-line, /* Editing View */
.el-h5 ~ * /* Reading View */
{
    text-indent: 7.5em;
}

But this only worked in obsidians editing view, and i could not figure out what exactly the code does sooo... i discarded it (idk eventually it helps)


I really appreciate any help, thank you!

0

There are 0 answers