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

Markdown inside <summary> and <details> not being processed #155

Closed
cheloizaguirre opened this Issue Aug 8, 2014 · 15 comments

Comments

Projects
None yet
3 participants
@cheloizaguirre

cheloizaguirre commented Aug 8, 2014

I'm trying to use the

and

HTML tags, but any markdown inside of them that I used is ignored. Here's a sample of what I'm trying to do:

<details>
<summary>
## My test!
</summary>

* Elem1
* Elem 2
</details>

The output of that ends up being:

"<summary>\n\n## My test!\n\n</summary>\n<details>\n\n* Elem1\n* Elem 2\n</details>\n"

I've tried using the parse_block_html option and adding markdown="1" or markdown="span" to the HTML tags, but the text inside there just gets ignored.
I looked in https://github.com/gettalong/kramdown/blob/master/lib/kramdown/parser/html.rb#L57 and it seems like

should be working as expected, though

is not there, so it might be getting ignored alltogether.

I'm totally willing to look into it myself if you can point me in the direction of a good place to start. Thanks!

@gettalong gettalong self-assigned this Aug 9, 2014

@gettalong gettalong added question and removed question labels Aug 9, 2014

@gettalong

This comment has been minimized.

Owner

gettalong commented Aug 9, 2014

The HTML elements "details" and "summary" are part of HTML5 which kramdown only supports partially. I have looked at the spec and a fully correct implementation is not possible for "summary" since it supports two different content models.

This will be fixed in the next version so that both elements are recognized as having a block content model.

@gettalong

This comment has been minimized.

Owner

gettalong commented Sep 9, 2014

@cheloizaguirre Please keep in mind that you will still have (i.e. after fixing this in kramdown) to use the parse_block_html option or that you need to a "markdown" attribute to the <summary> and <details> elements!

@gettalong gettalong closed this Sep 9, 2014

gettalong added a commit that referenced this issue Sep 9, 2014

Added <details> and <summary> tags to list of HTML elements with bloc…
…k content model (fixes #155)

Note that the <summary> element was using the span content model
prior to this change but the block content model is better
suited (both are allowed by the HTML5 spec).
@eneko

This comment has been minimized.

eneko commented Oct 25, 2017

Hello there. Seems like it's been a while since this issue was closed. It is not clear to me, however, if Kramdown supports Markdown inside <details> for collapsible blocks.

While testing this last night, I found GitHub rendered the markdown inside properly when browsing the repo in GitHub.com, but it renders as plain test when browsing the same file on GitHub Pages.

Browsing at GitHub.com:
screenshot 2017-10-25 08 40 09

Browsing on rendered GitHub Pages:
screenshot 2017-10-25 08 40 17

If Kramdown supports Markdown inside <details>, what do I need to do for it to render properly?

@gettalong

This comment has been minimized.

Owner

gettalong commented Oct 25, 2017

@eneko Just so that you know pictures are quite worthless when it comes to determining problems. Better show the input, the false output and the expected output as text.

As for your question: As written in #155 (comment) you need to enable the 'parse_block_html' option.

@eneko

This comment has been minimized.

eneko commented Oct 25, 2017

Thanks! Yeah, I thought of pasting some code examples, but too much escaping to show the issue. Took the lazy path :)

Thanks, if I understand it properly, the _config.yml should look something like this, correct?

markdown: kramdown
kramdown:
  parse_block_html: true

I assume there is no other way to get this working on GitHub pages that do not have a config file, correct?

@gettalong

This comment has been minimized.

Owner

gettalong commented Oct 25, 2017

For Jekyll related questions please ask on some Jekyll forum or something similar since I don't use Jekyll as my static website generator.

@eneko

This comment has been minimized.

eneko commented Oct 26, 2017

@gettalong sorry to bother you again. Do you have any examples of this feature working with Kramdown, whether is with Jekyll or not? I am failing to get it to work, not sure what I'm missing.

@gettalong

This comment has been minimized.

Owner

gettalong commented Oct 26, 2017

@eneko You can always use the kramdown binary to check whether the problem lies with kramdown or the tool that uses kramdown, like this:

$ echo -e "<details>\n# Header\n\nPara*graph*\n\n> quote\n</details>" | kramdown --parse-block-html
<details>
  <h1 id="header">Header</h1>

  <p>Para<em>graph</em></p>

  <blockquote>
    <p>quote</p>
  </blockquote>
</details>

As you can see the kramdown markup is correctly processed within the <details> tag. Also have a look at https://kramdown.gettalong.org/syntax.html#html-blocks

@eneko

This comment has been minimized.

eneko commented Oct 26, 2017

Ok, I think I found the problem, thanks for the command line example.

The HTML <details> tag is usually paired with an embedded <summary> tag.

Looks like if a <summary> tag is present when running Kramdown with --parse-block-html, both <summary> and <details> tags are mistakenly escaped.

$ echo -e "<details><summary>Collapsed Block</summary>\n\n## Header\n</details>" | kramdown --parse-block-html
<details>
  <summary>
    <p>Collapsed Block&lt;/summary&gt;</p>

    <h2 id="header">Header</h2>
    <p>&lt;/details&gt;</p>
  </summary>
</details>
Warning: Found no end tag for 'summary' (line 1) - auto-closing it
Warning: Found no end tag for 'details' (line 1) - auto-closing it
Warning: Found invalidly used HTML closing tag for 'summary' on line 1
Warning: Found invalidly used HTML closing tag for 'details' on line 4

The nested <summary> tag is triggering the escaping issue, maybe because it is also identified as a block tag.

Nested <details> blocks, on the other hand, work as expected:

$ echo -e "<details>\nStart.\n<details>\nNested *details*.\n</details>\nEnd.\n</details>" | kramdown --parse-block-html
<details>
  <p>Start.</p>
  <details>
    <p>Nested <em>details</em>.</p>
  </details>
  <p>End.</p>
</details>
@eneko

This comment has been minimized.

eneko commented Oct 26, 2017

@gettalong, let me know if you would like me to open a new issue, if that makes things easier.

@gettalong

This comment has been minimized.

Owner

gettalong commented Oct 26, 2017

As stated in the syntax documentation, the closing tag for an HTML tag must start on a new line if the contents is parsed as block elements:

$ echo -e "<details><summary>Collapsed Block\n</summary>\n\n## Header\n</details>" | kramdown --parse-block-html
<details>
  <summary>
    <p>Collapsed Block</p>
  </summary>

  <h2 id="header">Header</h2>
</details>
@eneko

This comment has been minimized.

eneko commented Oct 26, 2017

Ok, thanks. That is pretty close to the desired output. Is there any way to prevent the <p> tag from being added inside the summary? By doing so, it renders the summary text on the next line than the details caret, instead of next to it.

@eneko

This comment has been minimized.

eneko commented Oct 26, 2017

Maybe summary shouldn't be treated as a block text, since it should be next to the expand/collapse caret "▶︎".

@gettalong

This comment has been minimized.

Owner

gettalong commented Oct 26, 2017

How elements get rendered depends on the CSS; therefore kramdown can do nothing in this regard.

If you don't want to parse the contents of an HTML tag as block elements, you should use the 'parse_block_html' option. Alternatively, you can specify markdown="span":

$ echo -e "<details><summary markdown='span'>Collapsed Block\n</summary>\n\n## Header\n</details>" | kramdown --parse-block-html
<details>
  <summary>Collapsed Block
</summary>

  <h2 id="header">Header</h2>
</details>
@eneko

This comment has been minimized.

eneko commented Oct 26, 2017

@gorelhedin gorelhedin referenced this issue Feb 13, 2018

Closed

Fraction-exercise #13

16 of 16 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment