How can I wrap my markdown in an HTML div?
I am using MarkEd which implements GitHub flavoured markdown.
I have some working markdown:
## Test heading
a paragraph.
## second heading
another paragraph
Which creates:
<h2 id="test-heading">Test heading</h2>
<p>a paragraph.</p>
<h2 id="second-heading">second heading</h2>
<p>another paragraph</p>
I would like to wrap that markdown section in a div, eg:
<div class="blog-post">
## Test heading
a paragraph.
## second heading
another paragraph
</div>
However this returns the following HTML:
<div class="blog-post">
## Test heading
a paragraph.
## second heading
another paragraph
</div>
Eg, no markdown, literally '## Test heading' appears in the HTML.
How can I properly wrap my markdown in a div?
I have found the following workaround, however it is ugly and not an actual fix:
<div class="blog-post">
<div></div>
## Test heading
a paragraph.
## second heading
another paragraph
</div>
Answer
Markdown
For Markdown, This is by design. From the Inline HTML section of the Markdown reference:
Note that Markdown formatting syntax is not processed within block-level HTML tags. E.g., you can’t use Markdown-style emphasis inside an HTML block.
But it is explicitly allowed for span-level tags:
Unlike block-level HTML tags, Markdown syntax is processed within span-level tags.
So, depending on your use-case, you might get away with using a span instead of a div.
CommonMark
If the library you use implements CommonMark, you are lucky. Example 108 and 109 of the spec show that if you keep an empty line in between the HTML block and the markdown code, the contents will be parsed as Markdown:
<div>
*Emphasized* text.
</div>
should work, while the following shouldn't:
<div>
*Emphasized* text.
</div>
And, again according to the same section in the reference, some implementations recognize an additional markdown=1 attribute on the HTML tag to enable parsing of Markdown inside it.
Though it doesn't seem to work in StackOverflow yet:
Testing **Markdown** inside a red-background div.