kramdown
kramdown copied to clipboard
Producing valid HTML5 from details/summary blocks
When using the 'parse_block_html' option, kramdown converts <summary>
blocks to invalid HTML5:
echo "<details>\n<summary>text\n</summary>\ntext\n</details>" | kramdown --parse_block_html
produces:
<details>
<summary>
<p>text</p>
</summary>
<p>text</p>
</details>

The kramdown documentation for HTML blocks doesn't mention how <details>
and <summary>
blocks are treated. The default conversion for <summary>
should not produce invalid HTML5.
Kramdown converts the following blocks to valid HTML5 (independently of the 'parse_block_html' option):
<details markdown="1">
<summary markdown="span">
Summary *text*
</summary>
- Details
</details>
<details markdown="1">
<summary markdown="1">
# Summary *heading*
</summary>
- Details
</details>
When using the 'parse_block_html' option, kramdown converts also the following example correctly to HTML5:
<details>
<summary>
# Summary *heading*
</summary>
- Details
</details>
Details
Using kramdown 2.3.1.
Invalid HTML5
echo "<details>\n<summary>Summary *text*\n</summary>\n- Details \n</details>" | kramdown --parse_block_html
produces:
<details>
<summary>
<p>Summary <em>text</em></p>
</summary>
<ul>
<li>Details</li>
</ul>
</details>
Valid HTML5
echo "<details>\n<summary markdown='span'>Summary *text*\n</summary>\n- Details \n</details>" | kramdown --parse_block_html
and
echo "<details markdown='1'>\n<summary markdown='span'>Summary *text*\n</summary>\n- Details \n</details>" | kramdown
produce:
<details>
<summary>Summary <em>text</em>
</summary>
<ul>
<li>Details</li>
</ul>
</details>
Also
echo "<details>\n<summary>\n### Summary heading\n</summary>\n- Details \n</details>" | kramdown --parse-block-html
produces:
<details>
<summary>
<h3 id="summary-heading">Summary heading</h3>
</summary>
<ul>
<li>Details</li>
</ul>
</details>
Unparsed content
echo "<details markdown='block'>\n<summary markdown='span'>\n### Summary heading\n</summary>\n- Details \n</details>" | kramdown
produces:
<details>
<summary>
### Summary heading
</summary>
<ul>
<li>Details</li>
</ul>
</details>
Parsed content
echo "<details markdown='block'>\n<summary markdown='1'>\n### Summary heading\n</summary>\n- Details \n</details>" | kramdown
produces:
<details>
<summary>
<h3 id="summary-heading">Summary heading</h3>
</summary>
<ul>
<li>Details</li>
</ul>
</details>
When using details/summary tags on GitHub, it appears that the summary text is unparsed, and using heading tags produces poor layout. See also #155 and this gist.