Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 305
Andy Huang Avatar asked Sep 26 '12 02:09

Andy Huang


People also ask

Can you use DIV in Markdown?

There is no concept of a <div> in Markdown syntax (or most other structural HTML elements), except that Markdown supports HTML so you can just use a <div> if you want to. But as soon as you do, nothing nested inside of it can be Markdown.

Can HTML render Markdown?

You can embed Markdown in your HTML files and render it on the client, at request time. Some *embedded* Markdown which `md-block` can convert for you! It's a good idea to left-align your embedded Markdown code, without any leading indentation.

How do I put HTML code in Markdown?

in HTML will appear as <div class=Heading 1> Markdown also allows for raw HTML. There is no need to put any syntax around the code, but it needs to stand alone in the source document with no content above or below. A good example of using raw HTML in a Markdown document is when embedding a Youtube video.


1 Answers

A little late to the game, but an updated answer (as of summer 2015).

The question depends on which implementation you use, but a good reference on markdown is CommonMark. According to the HTML-blocks specification you can get the wanted result with this markdown:

<section id="loremipsum">
  <div class="page-header">

  # Heading 1 #

  </div>

  Lorem ipsum, blah blah blah, yada yada yada.

</section>

Note the empty lines, which are end conditions for HTML-blocks. Also note:

The block begins with a line that meets a start condition (after up to three spaces optional indentation).

Meaning one should be careful with indenting the start of HTML-blocks.

markdown-it implements commonmark 100% in js, perl-commonmark gives you bindings to CommonMark C library, and I guess you will find implementations of CommonMark in most programming languages.

like image 145
arve0 Avatar answered Oct 14 '22 00:10

arve0