search

showdownjs / showdown

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

<details> block-level element is wrapped in <p> but shouldn't #787

Closed henrahmagix closed 2 years ago

henrahmagix commented 4 years ago

Thanks for your great library btw! I really love using it to make my own admin interface for a Jekyll site =) Anyway onto the issue:

It's mentioned in https://github.com/showdownjs/showdown/issues/588#issuecomment-425278067 that

Showdown differentiates between block and inline HTML elements. Block elements are encoded as soon as possible while inline elements are "left alone".

<details> is a block-level element (at least in latest Safari and Chrome), so it's not allowed inside <p>, but Showdown still wraps it in <p>.

The following example shows how the browsers "fix" the structure of the HTML emitted by Showdown:

const s = new showdown.Converter();
const html = s.makeHtml('<details></details>');
// <p><details></details></p>
const div = document.createElement('div');
div.innerHTML = html;
const browserHTML = div.innerHTML;
// <p></p><details></details><p></p>
// can't use browserHTML :'(