showdownjs / showdown

A bidirectional Markdown to HTML to Markdown converter written in Javascript
http://www.showdownjs.com/
MIT License
14.3k stars 1.57k forks source link

markdown in html is jumping outside of the html element for custom elements #643

Open RyanHow opened 5 years ago

RyanHow commented 5 years ago
<span markdown>
**test**

**test**
</span>

<div markdown>
**test**

**test**
</div>

<my-element markdown>
**test**

**test**
</my-element>

turns into

<p><span><strong>test</strong></span></p>
<p><strong>test</strong></p>
<div>
<p><strong>test</strong></p>
<p><strong>test</strong></p>
</div>
<p><span><my-element>test</strong></my-element></p>
<p><strong>test</strong></p>

So I'm assuming showdown is producing valid html, so it won't allow the block element inside the inline element.

But when I use a custom element and set it as a block element, I am still observing the same behaviour.

Is there a way to force showdown to treat it like a block element?

tivie commented 5 years ago

Humm... I've just tested your input and I got a different output:

<p><span markdown>
<strong>test</strong></p>
<p><strong>test</strong>
</span></p>

<div markdown><p><strong>test</strong></p>
<p><strong>test</strong></p>
</div>

<p><my-element markdown>
<p><strong>test</strong></p>
<p><strong>test</strong></p>
</my-element></p>

However your issue remains more or less the same (<my-element markdown> is treated as inline).

There's no easy way to force showdown to treat custom html elements as blocks since those elements are... well... custom!

However, you can work around that issue using extensions. One simple hackish way is to make an output extension that replaces <p><my-element markdown> with <my-element markdown> and </my-element></p> with <my-element markdown>.

RyanHow commented 5 years ago

Wow, did you really get output like that?. Maybe my browser was changing the output, I copied it out of the browser rendered output instead of the string output before rendering. The output you got it isn't even valid, the opening and closing tags aren't nested correctly for the p and span. Surely that is a bug? I just figured that it was trying to be smart in handling block elements inside inline elements.