Prevent Jekyll from splitting paragraphs when including an HTML container

Question

On a markdown page I would like to {% include %} a piece of template into a paragraph, which contains an HTML container.

Markdown

Lorem ipsum dolor sit amet, consetetur {% include myContainer.html %} sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

myContainer.html

<div>
hello
</div>

There should actually be an additional first and blank line in the file (which unfortunately doesn't get displayed here).

output:

<p>Lorem ipsum dolor sit amet, consetetur</p>
<div>
  <p>hello</p>
</div>
<p>sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

Jekyll automatically splits the text into two paragraphs.

desired output:

<p>Lorem ipsum dolor sit amet, consetetur <div>
  <p>hello</p>
</div> sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

_config.yml

markdown: kramdown

kramdown:
  parse_block_html: true
  input: GFM

How can I include the container as child of the text's paragraph without splitting it in two?

Thanks a lot!

<div> elements should not be nested inside <p> elements. What I assume is happening is that the parser is seeing the open <div> tag and closing the open <p> tag for you to stay within the HTML spec. — Bryan Schuetz
@BryanSchuetz Thanks, I see! My problem becomes a lot more complicated then, I guess. I would like to inject multiple additional information blocks to a very long text, which should be shown next to the corresponding text (while not breaking the text flow) and also be close to the corresponding text in the code. I guess that's a whole new topic. — Js.

Waylan Waylan · Accepted Answer · 2015-11-25T19:22:03

A <div> tag is a block level element. You cannot have block level elements inside a <p> tag. Therefore, (as mentioned in a comment) the parser is seeing the <div> and breaking your paragraph into two. By the way, even if the Markdown parser did not do that, the Browser would actually see it that way. Any block level element automatically closes an open <p> tag. Of course, the second paragraph would not be opened with a <p> tag in that scenario, so the browser could behave unpredictably. In other words, be glad the Markdown parser does the right thing here.

If you want to include information blocks in a paragraph without breaking the text flow, then you want the inline equivalent; the <span>. If you want any specific styling, you can create some CSS to apply to <span>s. You might even want to assign a class to each span for more fine grained control.