Your challenge is that HTML headings are block-level elements, i.e. they are rendered discretely in the vertical plane (page), but you want them displayed inline.
Unstated, but a further expectation is likely that the input text will have the heading and following body text on discreet lines, e.g.
This is an H4.
This is a normal paragraph
giving HTML
<h4>This is an H4.</h4>
<p>This is a normal paragraph</p>
but you want the web-rendered output to be on one line,
This is an H4. This is a normal paragraph`
The basic fix is to tell the block-level heading elements to use the CSS style display:inline; but you then face the problem that paragraphs (i.e. <p> tags) are also block level. But, you only want the first paragraph after the heading.
The latter is possible by using the p:nth-of-type(1) CSS selector:
h4, p:nth-of-type(1) {display: inline;}
However, that only works in a small test. If there are multiple H4s in the document, the above only targets the first one (not what I initially expected, but CSS are like regex—very precise!). Thus you need a wrapper div to give context (N.B. the div is not rendered visibly):
<div class="apa">
<h4>A level 4 Title.</h4>
Some text.
More text.
</div>
<div class="apa">
<h4>Another level 4 Title.</h4>
Stuff about H4s.
More stuff
</div>
With the CSS of:
.apa h4, h5, p:nth-of-type(1) {display: inline !important;}
You may not need !important† but it is worth knowing about.
This gives us:
Test file is here: inline-heading.tbx (96.1 KB)
Note each discrete inline heading needs the wrapper to contextualise p:nth-of-type(1). I suspect this shifts your problem to how you shim your headings with <div> elements. I’d simply put it in the $Text or template, even if working—as you do—with Markdown. As some point the look of you writing space ($text), in terms of being ‘code’-free, has to compromise as your ouptut style demands become more precise/niche.
Above I’ve used a CSS class apa as I suspect you might want to parameterise the class name based on the citation style you are using in any given document re-using existing ‘code’. This you might have different CSS for .apa and chicago ready-baked in your CSS but only the correct one invoked by the actual content.—or none, as a <div> is by default an invisible structural HTML element.
†. This overrides this—and only this—CSS style command in any style set close to the element in the inheritance chain, e.g. via an ID vs. a class. See CSS !important Property.
