Search code examples
htmlscopemarkdown

Markdown scoping with <section> and <div> blocks?

I've noticed that block level things are not really markdown friendly. Imagine the following segment (Yes, I am intending to output for twitter bootstrap):

<section id="loremipsum">
    <div class="page-header">
    # Heading 1 #
    </div>

    Lorem ipsum, blah blah blah, yada yada yada.
</section>

The expected output should be:

<section id="loremipsum">
    <div class="page-header">
    <h1>Heading 1</h1>
    </div>
    <p>Lorem ipsum, blah blah blah, yada yada yada.</p>
</section>

Instead, the produced output is closer to:

<p><section id="loremipsum"></p>
<div class="page-header">
# Heading 1 #
</div>
<p>Lorem ipsum, blah blah blah, yada yada yada.</section></p>

There are two problems here:

  1. As per suggested by Daring Fireball, Markdown should be smart enough to not put in un-wanted

    tags around block level elements such as section tag.

  2. Heading 1 is not parsed as a heading, but instead left unparsed.

Both of these problems actually happens also in Dingus, the official parser, so I guess this is one of those "working as intended" kind of issue. That said, are there any markdown gurus out there that knows how to work around these problems?

Solution

  • Yep, that's by design. According to Gruber:

    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.

    I'm not aware of any sort of workaround for that, but I wouldn't put myself at guru-level when it comes to Markdown.

    Edit: You might want to check out PHP Markdown Extra if you're working with PHP.