Codeblock character ends up in HTML

[matthiasbeyer]

A picture says more than thousand words:

The markup used to generate this is:

This is an example page with a mermaid diagram.                                                                                                                                                                                                                                                                                

```mermaid                                                                                                                                                                                                                                                                                                                     
graph TD;                                                                                                                                                                                                                                                                                                                      
    A-->B;                                                                                                                                                                                                                                                                                                                     
    A-->C;                                                                                                                                                                                                                                                                                                                     
    B-->D;                                                                                                                                                                                                                                                                                                                     
    C-->D;                                                                                                                                                                                                                                                                                                                     
```

Somehow, an additional codeblock-character ends up in the HTML. I don't see why.

<p>This is an example page with a mermaid diagram.</p>
<pre class="mermaid">
graph TD;
    A--&gt;B;
    A--&gt;C;
    B--&gt;D;
    C--&gt;D;
`</pre>

[matthiasbeyer]

That issue exists in the latest release as well as with the latest master branch.

[matthiasbeyer]

I should also note that this makes the gitGraph feature of mermaid completely unusable, because the gitGraph would not render at all and mermaid only displays the "syntax error" error message for any (valid) gitGraph!

[badboy]

Works for me (and in tests) just fine. https://github.com/badboy/mdbook-mermaid/blob/5590790bfeca7598727842b8ebbb99c7d2fe3918/src/lib.rs#L116-L141

[matthiasbeyer]

Issue still exists.

[badboy]

Then please provide me with an example book I can test on.

[matthiasbeyer]

So after some deep-diving into the whole thing I found the following:

The combination of mdbook-mermaid and mdbook-graphviz produces the issue.

My book.toml:

[book]
authors = ["Max Mustermann"]
language = "en"
multilingual = false
src = "src"
title = "Example"

[preprocessor]

[preprocessor.mermaid]
command = "mdbook-mermaid"

[preprocessor.graphviz]
command = "mdbook-graphviz"
output-to-file = false

[output]

[output.html]
additional-js = ["mermaid.min.js", "mermaid-init.js"]

My src/chapter_1.md:

# Chapter 1

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

```dot process
digraph {
    "processed" -> "graph"
}
```

If I only us mdbook-mermaid, it works as expected. If I only use mdbook-graphviz, it also works as expected. Only if I use both, the additional backtick appears in the HTML and then gets rendered in the mermaid graph.

The fact that mdbook-graphviz on its own does work as expected makes me think that there might be an issue somewhere in mdbook-mermaid and not the other way round.

[badboy]

Hm, indeed. It's a bad interaction between those two things. graphviz modifies the markdown inserting code block with 4 backticks, instead of 3 (which mdbook-mermaid hard codes, instead of relying on the parser) You can work around that for now with a after = ["mermaid"] in the preprocessor.graphviz config.

I should have a patch ready today.