Bug: Markdown renderer messes with embedded HTML

[halfdan]

Issue Summary

Markdown supports HTML and should just print it out as is. The showdown renderer seems to add additional <br />s after certain tags, causing them to break.

Steps to Reproduce

Enter the following text into the markdown editor:

Test

<table class="test">
  <tr>
    <td>Foo</td>
  </tr>
  <tr>
    <td>Bar</td>
  </tr>
</table>

<audio class="podcastplayer" controls>
    <source src="foobar.mp3" type="audio/mp3" preload="none"></source>
    <source src="foobar.off" type="audio/ogg" preload="none"></source>
</audio>

Test

Result:

<p>Test</p>

<table>  
  <tr>    
      <td>Foo</td>
  </tr>
  <tr>    
      <td>Bar</td>
  </tr>
</table>

<p><audio class=“podcastplayer” controls> <br />
    <source src="foobar.mp3" type="audio/mp3" preload="none"></source>
    <source src="foobar.off" type="audio/ogg" preload="none"></source>
</audio></p>

<p>Test</p>

Note that the table renders just fine without additional elements added. The audio tag however is surrounded by a <p> and has an additional <br /> added inside causing the element to break in Chrome (at least for me).

Note that the rendered markdown also contains fancy quotation marks (which is probably related to #1795).

Technical details

• Ghost Version: master - latest commit: b84c8a4
• Browser: Chrome 33

[halfdan]

Most likely caused by the incomplete list of block tags in https://github.com/coreyti/showdown/blob/master/src/showdown.js#L328

[brianchirls]

@halfdan Thanks for filing this. But I don't think the problem is in the block tag list.

The problem appears to be in showdown_typeography, which is doing the actual work of replacing the quotes. Disabling the extension fixes inline HTML rendering.

showdown_typeography attempts to parse out exceptions to quotable text, such as inline code blocks, but it does not consider inline HTML. Foolproof parsing of HTML cannot be done with a regular expression and requires a true parser, but one can use a regex to find opening tags that may contain attributes. The following code in typeography.js seems to address the issue (a little clean-up and testing wouldn't hurt):

    // Extract html blocks
    text = text.replace(/<([a-z][a-z0-9\-]*)\s+([a-z][a-z0-9\-]*(="[^"]*")\s*)*\/?>/ig, function (match) {
            i += 1;
            iCodeblocks[i] = match;
            return "{typog-icb-" + i + "}";
        });

There are some additional scenarios where inappropriate fancy quotes remain, such as inside of a <textarea>, but I think a more thorough investigation into how that is typically handled in code like smartypants warrants its own ticket.

I suggest patching this as soon as possible and filing another issue for a more thorough refactor of showdown_typeography for improved performance (regex fewer passes), to replace the potentially colliding {typog-icb-" + i + "} and for improved fancy quote exceptions.

I hope this bug does not have to wait until Q3 2014, since it is already causing problems with the sample post that ships with Ghost and breaks any imports from Wordpress, which are encoded as HTML.

[halfdan]

@brianchirls I am talking about two different issues. The first is most certainly caused by the block tag list. With the latter you're probably right in that the typography extension causes this.

[brianchirls]

Ah yes, you're right @halfdan. But I think they both fall under "messes with embedded HTML", so hopefully they'll be patched soon.

[ErisDS]

The typography issue is reasonably easy to fix. I believe I have a fix for the showdown block HTML issue as well but it's pretty involved.