Mermaid diagrams are not rendered inside HTML tags

Screen_Shot_2020-06-02_at_18.18.55

So, it seems that our implementation 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:

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:

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

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

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

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

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

<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>
Edited by Achilleas Pipinellis