Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Producing valid HTML5 from details/summary blocks #715

Open
pdmosses opened this issue Apr 29, 2021 · 0 comments
Open

Producing valid HTML5 from details/summary blocks #715

pdmosses opened this issue Apr 29, 2021 · 0 comments

Comments

@pdmosses
Copy link

pdmosses commented Apr 29, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant