language-mermaid instead of mermaid in HTML?

[fralau]

Now I get language-mermaid instead of mermaid in the default translation of a fenced code, by material. Has there been a change ?

In markdown:

## Correct

```mermaid
graph TD
A[Client] --> B[Load Balancer]
```

## Other

```mermaid
graph TD
A[Client] --> B[Load Balancer]
B --> C[Server01]
B --> D[Server02]
```

And HTML:

<h2 id="correct">Correct</h2>
<pre><code class="language-mermaid">graph TD
A[Client] --&gt; B[Load Balancer]
</code></pre>
<h2 id="other">Other</h2>
<pre><code class="language-mermaid">graph TD
  A[Client] --&gt; B[Load Balancer]
  B --&gt; C[Server01]
  B --&gt; D[Server02]
</code></pre>
``

[facelessuser]

If there was a change, I wouldn't expect it to be with MkDocs Material, it would be with pymdown-extensions, or Mermaid itself. The last version of pymdown-extensions generated the latest docs, so I don't think there is a problem on my end as it still looks fine: https://facelessuser.github.io/pymdown-extensions/extras/mermaid/#practical-diagrams.

[facelessuser]

I'll run a test on the latest pymdownx, material, and python markdown to just to double check.

[fralau]

I removed the reference to material, and the issue is still there. Perhaps a change in mkdocs itself ?

[facelessuser]

Doubtful as MkDocs doesn't control the Markdown output and rendering. It provides the site template building.

[facelessuser]

I just updated Python Markdown, MkDocs, MkDocs Material to the latest, and I'm not seeing any issues:

So I haven't changed my methodology for rendering these and they seem to work fine. IIRC, you use an extension to do all of this. I guess there could be something more subtle that is breaking your extension maybe.

For me to even begin to guess, I'd need a minimal reproducible example that breaks.

[fralau]

Indeed. It is the mermaid2 plugin that is breaking and I know what is breaking it (the element's class is language-mermaid and no longer mermaid).

Perhaps the javascript library is smart enough not to be thrown off by this change...

[fralau]

I am preparing a fix for mkdocs-mermaid2-plugin, where I am adding this new possibility. No idea where this change is coming from 🤔 .

            pre_code_tags = (soup.select("pre code.mermaid") or 
                            soup.select("pre code.language-mermaid"))

[facelessuser]

It's not coming from my extensions. Not that I'm aware of.

[facelessuser]

You can see here in my official docs, using the instructions that I lay out in my docs, that I get things just fine:

<pre class=mermaid><code>stateDiagram
    [*] --&gt; First
    First --&gt; Second
    First --&gt; Third

    state First {
        [*] --&gt; fir
        fir --&gt; [*]
    }
    state Second {
        [*] --&gt; sec
        sec --&gt; [*]
    }
    state Third {
        [*] --&gt; thi
        thi --&gt; [*]
    }</code></pre>

[facelessuser]

Granted, there is a minimizer running, so it may look a little different (stripped attribute quotes etc.).

[fralau]

Thanks to @nschoot, who found the actual source of the change, in python-markdown 3.3 (released on 25th of october).

The prefix language- is now prepended to all language classes by default on code blocks.

https://python-markdown.github.io/change_log/release-3.3/

[facelessuser]

Is SuperFences not being used? That shouldn't apply as we don't use CodeHilite.

[facelessuser]

As I mention, this does not happen to me as I use SuperFences and not CodeHilite.

[fralau]

Indeed 👍 Similarly, for the case where mkdocs-mermaid2 used a function inspired from your advice, it kept working dandy.

Hence we can declare mkdocs-material fully acquitted on any charge, and moreover praised for its virtuous behaviour. 😄 .