Mermaid diagrams are not rendered inside HTML tags
![Screen_Shot_2020-06-02_at_18.18.55](/uploads/b36d607568e48897c6fbbf825c2eb64d/Screen_Shot_2020-06-02_at_18.18.55.png) So, it seems that [our implementation](https://gitlab.com/gitlab-org/gitlab_kramdown/-/blob/5314e0bff59fd314ff8517a178147aa65a02d674/lib/gitlab_kramdown/converter/gitlab_html.rb#L27-45) in the `gitlab_kramdown` side contradicts with Kramdown's way to render markdown inside HTML tags. # Reproduce By trying all options listed in https://kramdown.gettalong.org/syntax.html#html-blocks, create an HTML file from the Markdown doc: ```shell cat index.md | kramdown >! index.html ``` ## `markdown="1"` > If an HTML tag has an attribute `markdown="1"`, then the default mechanism for parsing syntax in this tag is used. Markdown: ````md <details markdown="1"><summary>Click to view the graph</summary> Reference pipeline: <https://gitlab.com/gitlab-org/gitlab/pipelines/135236627> ```mermaid graph LR subgraph "No needed jobs"; 1-1["danger-review (3.5 minutes)"]; click 1-1 "https://app.periscopedata.com/app/gitlab/652085/Engineering-Productivity---Pipeline-Build-Durations?widget=8100542&udv=0" 1-50["docs lint (6.75 minutes)"]; click 1-50 "https://app.periscopedata.com/app/gitlab/652085/Engineering-Productivity---Pipeline-Build-Durations?widget=8356757&udv=0" end ``` </details> ```` HTML: ```html <details> <summary>Click to view the graph</summary> <p>Reference pipeline: <a href="https://gitlab.com/gitlab-org/gitlab/pipelines/135236627">https://gitlab.com/gitlab-org/gitlab/pipelines/135236627</a></p> <p><code>mermaid graph LR subgraph "No needed jobs"; 1-1["danger-review (3.5 minutes)"]; click 1-1 "https://app.periscopedata.com/app/gitlab/652085/Engineering-Productivity---Pipeline-Build-Durations?widget=8100542&amp;udv=0" 1-50["docs lint (6.75 minutes)"]; click 1-50 "https://app.periscopedata.com/app/gitlab/652085/Engineering-Productivity---Pipeline-Build-Durations?widget=8356757&amp;udv=0" end </code></p> </details> ``` ## `markdown="block"` > If an HTML tag has an attribute `markdown="block"`, then the content of the tag is parsed as block level elements. Markdown: ````md <details markdown="block"><summary>Click to view the graph</summary> Reference pipeline: <https://gitlab.com/gitlab-org/gitlab/pipelines/135236627> ```mermaid graph LR subgraph "No needed jobs"; 1-1["danger-review (3.5 minutes)"]; click 1-1 "https://app.periscopedata.com/app/gitlab/652085/Engineering-Productivity---Pipeline-Build-Durations?widget=8100542&udv=0" 1-50["docs lint (6.75 minutes)"]; click 1-50 "https://app.periscopedata.com/app/gitlab/652085/Engineering-Productivity---Pipeline-Build-Durations?widget=8356757&udv=0" end ``` </details> ```` HTML: ```html <details> <summary>Click to view the graph</summary> <p>Reference pipeline: <a href="https://gitlab.com/gitlab-org/gitlab/pipelines/135236627">https://gitlab.com/gitlab-org/gitlab/pipelines/135236627</a></p> <p><code>mermaid graph LR subgraph "No needed jobs"; 1-1["danger-review (3.5 minutes)"]; click 1-1 "https://app.periscopedata.com/app/gitlab/652085/Engineering-Productivity---Pipeline-Build-Durations?widget=8100542&amp;udv=0" 1-50["docs lint (6.75 minutes)"]; click 1-50 "https://app.periscopedata.com/app/gitlab/652085/Engineering-Productivity---Pipeline-Build-Durations?widget=8356757&amp;udv=0" end </code></p> </details> ``` ## `markdown="span"` > If an HTML tag has an attribute `markdown="span"`, then the default mechanism for parsing syntax in this tag is used. Markdown: ````md <details markdown="span"><summary>Click to view the graph</summary> Reference pipeline: <https://gitlab.com/gitlab-org/gitlab/pipelines/135236627> ```mermaid graph LR subgraph "No needed jobs"; 1-1["danger-review (3.5 minutes)"]; click 1-1 "https://app.periscopedata.com/app/gitlab/652085/Engineering-Productivity---Pipeline-Build-Durations?widget=8100542&udv=0" 1-50["docs lint (6.75 minutes)"]; click 1-50 "https://app.periscopedata.com/app/gitlab/652085/Engineering-Productivity---Pipeline-Build-Durations?widget=8356757&udv=0" end ``` </details> ```` HTML: ```html <details>&lt;summary&gt;Click to view the graph&lt;/summary&gt; Reference pipeline: <a href="https://gitlab.com/gitlab-org/gitlab/pipelines/135236627">https://gitlab.com/gitlab-org/gitlab/pipelines/135236627</a> <code>mermaid graph LR subgraph "No needed jobs"; 1-1["danger-review (3.5 minutes)"]; click 1-1 "https://app.periscopedata.com/app/gitlab/652085/Engineering-Productivity---Pipeline-Build-Durations?widget=8100542&amp;udv=0" 1-50["docs lint (6.75 minutes)"]; click 1-50 "https://app.periscopedata.com/app/gitlab/652085/Engineering-Productivity---Pipeline-Build-Durations?widget=8356757&amp;udv=0" end </code> </details> ```
issue