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!