Display a header inline with text

Hello all,

What I’m trying to do

I am trying to have a header, say h6 to appear inline with the following text, i.e. if I have in the reading pane

###### header6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

to appear as,

header6 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

I expect that this will give me a way to number and link to subsections of text like it is in old math books without introducing additional anchors like the ones used for blocks of text, i.e. like ^saofjr , since I will link the header without something else.

Things I have tried

I have tried the obvious (?)

.cm-header-6{
    display: inline !important;
    color:#13e21e;
}


.markdown-preview-view h6{
    display: inline !important;
    color:#13e21e;
}

or even

.cm-s-obsidian .HyperMD-header-6 {
    display: inline !important;
}

without any success.

Thanks in advance

1 Like

Yup, totally possible. Here’s the result in all 3 modes (tested with a fresh Obsidian install, no theme and no plugins, so if it doesn’t work then try disabling plugins one by one or change theme):

SOURCE mode

LIVE EDIT mode

PREVIEW mode
Screenshot-25_11_2023-11.42.14

And here’s the CSS snippet I made (works only for H6 headers as instructed in your post):

/* SOURCE & LIVE EDIT mode */
.markdown-source-view .cm-line.HyperMD-header.HyperMD-header-6 {
  display: inline;

  & + .cm-line { display: inline; }
}

/* READING mode */
.markdown-reading-view div:has(> h6) {
  display: inline;

  & h6 { display: inline; }
  & + div { 
    display: inline;

    & * {
      display: inline;
      margin-left: .5em;
    }
  }
}

Excellent!
It works like a charm!
Thanks a lot!

1 Like

One additional remark. When the paragraph following the header text contains mathjax content it seems that in the Live Edit view, it is like, the following,

6.1. Computation: —

If the roots of the equations $ax^2+2hx+b=0$ and $a’x^2 + 2h’x+b’=0$ form harmonic pairs of points, show that $ab’+a’b=2hh’$.

without rendering the formulas (this is minor problem), while in Reading View (this the major problem), there is a disaster, since all the characters in the formula appear in a different line, i.e. some thing like,

6.1 Computation
a
x
2
+
etc etc!
Is there a remedy for that?
Thanks again!

OK, so replace the following part of the CSS snippet code near the end:

& * {

with:

& p {

Perfect! Thank you very much!

1 Like

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