kramdown icon indicating copy to clipboard operation
kramdown copied to clipboard

Producing valid HTML5 from details/summary blocks

Open pdmosses opened this issue 3 years ago • 0 comments

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>
Screenshot

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.

pdmosses avatar Apr 29 '21 08:04 pdmosses