Markdown is broken

I have a lot of scraps of markdown engine oddities that I’ve collected over the years. What you see below is slightly messy, but it’s what I’ve managed to cobble together to illustrate the differences between markdown engines, and why, if there ever is a markdown specification, it has to be absolutely thorough. There are a lot more of these little differences I have documented elsewhere. I know I will find them lingering on my disk one day, but until then, I’ll continue to add whatever strange nonsensical things I find.

Some of these examples may only mention a particular engine compared to marked. However, the examples with markdown.pl could easily be swapped out for discount, upskirt, or markdown.js, and you would very easily see even more inconsistencies.

A lot of this was written when I was very unsatisfied with the inconsistencies between markdown engines. Please excuse the frustration noticeable in my writing.

Examples of markdown’s “stupid” list parsing

  1. $ markdown.pl
  2. * item1
  3. * item2
  4. text
  5. ^D
  6. <ul>
  7. <li><p>item1</p>
  8. <ul>
  9. <li>item2</li>
  10. </ul>
  11. <p><p>text</p></li>
  12. </ul></p>
  1. $ marked
  2. * item1
  3. * item2
  4. text
  5. ^D
  6. <ul>
  7. <li><p>item1</p>
  8. <ul>
  9. <li>item2</li>
  10. </ul>
  11. <p>text</p>
  12. </li>
  13. </ul>

Which looks correct to you?


  1. $ markdown.pl
  2. * hello
  3. > world
  4. ^D
  5. <p><ul>
  6. <li>hello</p>
  7. <blockquote>
  8. <p>world</li>
  9. </ul></p>
  10. </blockquote>
  1. $ marked
  2. * hello
  3. > world
  4. ^D
  5. <ul>
  6. <li>hello<blockquote>
  7. <p>world</p>
  8. </blockquote>
  9. </li>
  10. </ul>

Again, which looks correct to you?


EXAMPLE:

  1. $ markdown.pl
  2. * hello
  3. * world
  4. * hi
  5. code
  6. ^D
  7. <ul>
  8. <li>hello
  9. <ul>
  10. <li>world</li>
  11. <li>hi
  12. code</li>
  13. </ul></li>
  14. </ul>

The code isn’t a code block even though it’s after the bullet margin. I know, lets give it two more spaces, effectively making it 8 spaces past the bullet.

  1. $ markdown.pl
  2. * hello
  3. * world
  4. * hi
  5. code
  6. ^D
  7. <ul>
  8. <li>hello
  9. <ul>
  10. <li>world</li>
  11. <li>hi
  12. code</li>
  13. </ul></li>
  14. </ul>

And, it’s still not a code block. Did you also notice that the 3rd item isn’t even its own list? Markdown screws that up too because of its indentation unaware parsing.


Let’s look at some more examples of markdown’s list parsing:

  1. $ markdown.pl
  2. * item1
  3. * item2
  4. text
  5. ^D
  6. <ul>
  7. <li><p>item1</p>
  8. <ul>
  9. <li>item2</li>
  10. </ul>
  11. <p><p>text</p></li>
  12. </ul></p>

Misnested tags.

  1. $ marked
  2. * item1
  3. * item2
  4. text
  5. ^D
  6. <ul>
  7. <li><p>item1</p>
  8. <ul>
  9. <li>item2</li>
  10. </ul>
  11. <p>text</p>
  12. </li>
  13. </ul>

Which looks correct to you?


  1. $ markdown.pl
  2. * hello
  3. > world
  4. ^D
  5. <p><ul>
  6. <li>hello</p>
  7. <blockquote>
  8. <p>world</li>
  9. </ul></p>
  10. </blockquote>

More misnested tags.

  1. $ marked
  2. * hello
  3. > world
  4. ^D
  5. <ul>
  6. <li>hello<blockquote>
  7. <p>world</p>
  8. </blockquote>
  9. </li>
  10. </ul>

Again, which looks correct to you?


Why quality matters - Part 2

  1. $ markdown.pl
  2. * hello
  3. > world
  4. ^D
  5. <p><ul>
  6. <li>hello</p>
  7. <blockquote>
  8. <p>world</li>
  9. </ul></p>
  10. </blockquote>
  1. $ sundown # upskirt
  2. * hello
  3. > world
  4. ^D
  5. <ul>
  6. <li>hello
  7. &gt; world</li>
  8. </ul>
  1. $ marked
  2. * hello
  3. > world
  4. ^D
  5. <ul><li>hello <blockquote><p>world</p></blockquote></li></ul>

Which looks correct to you?


See: https://github.com/evilstreak/markdown-js/issues/23

  1. $ markdown.pl # upskirt/markdown.js/discount
  2. * hello
  3. var a = 1;
  4. * world
  5. ^D
  6. <ul>
  7. <li>hello
  8. var a = 1;</li>
  9. <li>world</li>
  10. </ul>
  1. $ marked
  2. * hello
  3. var a = 1;
  4. * world
  5. ^D
  6. <ul><li>hello
  7. <pre>code>var a = 1;</code></pre></li>
  8. <li>world</li></ul>

Which looks more reasonable? Why shouldn’t code blocks be able to appear in list items in a sane way?


  1. $ markdown.js
  2. <div>hello</div>
  3. <span>hello</span>
  4. ^D
  5. <p>&lt;div&gt;hello&lt;/div&gt;</p>
  6. <p>&lt;span&gt;hello&lt;/span&gt;</p>
  1. $ marked
  2. <div>hello</div>
  3. <span>hello</span>
  4. ^D
  5. <div>hello</div>
  6. <p><span>hello</span>
  7. </p>

See: https://github.com/evilstreak/markdown-js/issues/27

  1. $ markdown.js
  2. [![an image](/image)](/link)
  3. ^D
  4. <p><a href="/image)](/link">![an image</a></p>
  1. $ marked
  2. [![an image](/image)](/link)
  3. ^D
  4. <p><a href="/link"><img src="/image" alt="an image"></a>
  5. </p>

See: https://github.com/evilstreak/markdown-js/issues/24

  1. $ markdown.js
  2. > a
  3. > b
  4. > c
  5. ^D
  6. <blockquote><p>a</p><p>bundefined&gt; c</p></blockquote>
  1. $ marked
  2. > a
  3. > b
  4. > c
  5. ^D
  6. <blockquote><p>a
  7. </p></blockquote>
  8. <blockquote><p>b
  9. </p></blockquote>
  10. <blockquote><p>c
  11. </p></blockquote>

  1. $ markdown.pl
  2. * hello
  3. * world
  4. how
  5. are
  6. you
  7. * today
  8. * hi
  9. ^D
  10. <ul>
  11. <li><p>hello</p>
  12. <ul>
  13. <li>world
  14. how</li>
  15. </ul>
  16. <p>are
  17. you</p>
  18. <ul>
  19. <li>today</li>
  20. </ul></li>
  21. <li>hi</li>
  22. </ul>
  1. $ marked
  2. * hello
  3. * world
  4. how
  5. are
  6. you
  7. * today
  8. * hi
  9. ^D
  10. <ul>
  11. <li><p>hello</p>
  12. <ul>
  13. <li><p>world
  14. how</p>
  15. <p>are
  16. you</p>
  17. </li>
  18. <li><p>today</p>
  19. </li>
  20. </ul>
  21. </li>
  22. <li>hi</li>
  23. </ul>