17

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?

Andy Huang
  • 199
  • 1
  • 1
  • 8
  • Possible duplicate with some workaround solution: http://stackoverflow.com/questions/29368902/how-can-i-wrap-my-markdown-in-an-html-div – bendtherules Jun 03 '15 at 04:05
  • You may get away with not using HTML. See [the plugin header-sections](https://www.npmjs.com/package/markdown-it-header-sections) which wraps content in sections, based on the level of the headline. – arve0 Nov 23 '16 at 22:58

4 Answers4

6

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.

arve0
  • 3,424
  • 26
  • 33
  • 1
    Thank you for the update on the old question! For those that are in PHP land, it is worthwhile to note that [ThePHPLeague/CommonMark](https://github.com/thephpleague/commonmark) also implements CommonMark to spec, so it should behave as intended. – Andy Huang Jul 16 '15 at 17:55
  • 2
    Oh my! That format will be so easy for people to break by accident! :) – akauppi Dec 31 '15 at 12:28
4

You can use Pandoc's markdown, which by default interprets code between <div> tags as markdown text.

$ pandoc input.md -o output.html

(See the markdown_in_html_blocks section of Pandoc's markdown doc for details.)

andrew-e
  • 724
  • 7
  • 10
3

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.

SleepyCal
  • 5,739
  • 5
  • 33
  • 47
ultranaut
  • 2,132
  • 1
  • 17
  • 22
  • That is very interesting actually. My original plan is to write the page contents in mark down and paste into my content management system, so it will automatically populate everything. I suppose I could use the php markdown extra thing to just make it parse my markdown. Though, it would be more resources intensive for each request, unless I do some sort of caching. Will leave the question open for a bit more, if there are no better response, I will mark this as the best response. Thanks for the tip! – Andy Huang Sep 26 '12 at 05:07
  • Obviously I don't know all the particulars of your situation, but it sounds like you're doing a lot of extra work just to avoid using a few html tags? But maybe there's more to it than that... – ultranaut Sep 26 '12 at 15:35
  • Well, I am both lazy and stubborn. Since the site I am working on is on a relatively weak server, I'd rather not rob the server resources by running a potentially insecure or resources expensive CMS such as WordPress or Drupal, with all their bells and whistles. At the same time, because there are fair bit of contents to be managed between myself and non-tech-savvy people, I figured markdown is simple enough to write in, and generate HTML for me to paste in a simple custom CMS I've made. I'd much rather not have to manually edit the generated HTML, so that's why :) Thanks for your help! – Andy Huang Sep 26 '12 at 19:22
  • adding a markdown="1" attribute to the HTML tag has been mentioned elsewhere in SO. However, it is not standard and my use case (gitbook) does not support it. – akauppi Dec 31 '15 at 12:26
  • Maybe try to replace replace the `&` character with `&amp`, the `<` character with `&lt`, the `>` character with `>` - at least it works for me in mkdocs – Karolína Vyskočilová Aug 13 '16 at 15:42
0

Some implementations may be case sensitive.

It turns out that markdownsharp will use a real div if you capitalize the <DIV> tag, but not if you use <div>.

So this may give you what you want

<DIV class="video-panel">
   ![Review][1]
   ![Review][2]
</DIV>

Even stackoverflow's markdown still differentiates between the two, although it strips out the DIV itself. For a public website this is probably a good thing though!

this will be bold

**this will not be bold**
Simon_Weaver
  • 140,023
  • 84
  • 646
  • 689