Syntax Error Due to Incorrect Generated HTML File

Not sure if this issue is being faced by me or others as well. Mermaid diagrams won’t render for me no matter what - I checked my formatting, syntax, etc, but kept getting the Syntax Error image.

After checking the generated HTML files, I saw the HTML code was generated as follows.

<pre><code class="mermaid">graph TD
  A[Client] --&gt; B[Load Balancer]
  B --&gt; C[Server01]
  B --&gt; D[Server02]
</code></pre>

As you can see, it shows up as <code> ... </code>. I manually changed it to <div>...</div> and the diagrams generated just fine.

<pre><div class="mermaid">graph TD
  A[Client] --&gt; B[Load Balancer]
  B --&gt; C[Server01]
  B --&gt; D[Server02]
</div></pre>

Running mkdocs build reverts it back to code and so syntax errors start occurring again.

Attaching my yml file for reference:

site_name: My Documentation
nav:
  - Home: index.md
  - Modules: modules.md
theme: readthedocs
plugins:
  - search
  - mermaid2
extra_javascript:
  - https://unpkg.com/mermaid/dist/mermaid.min.js
markdown_extensions:
  - admonition

[mrRobot62]

@kerrerain I checked it with YOUR code - and - bam - error

checked MkDocs.yml file tataaa: found the problem

try this:

site_name: Issue 11 of mkdocs-mermaid2-plugin
site_author: kerrerain
copyright: Copyright kerrerain, © 2020

theme:
   name: material
nav:
  - Home: index.md

plugins:
  - search
  - mermaid2:
      version: 8.7.0

IMPORTANT Your have to install before: pip install mkdocs-material

and than :

[fralau]

This is understood: I will close this issue because the immediate concern (“bug”) was solved by a workaround (use superfences + custom fences).

I opened an new issue (#16) for the enhancement request (to make the default configuration work with most themes).