super fences configuration prevents loading additional icon packs

[mgrubb]

I'm trying to get Mermaid's new architecture-beta diagram type working along with loading additional icon resources shown (here)[https://mermaid.js.org/syntax/architecture.html#icons].

I've created a javascript file to be used with the extra_javascript key in the mkdocs.yml file that calls the mermaid.registerIconPacks function from the Mermaid documentation referenced above.

When I have the superfences configuration set as referenced by the mermaid2 documentation as (here)[https://github.com/fralau/mkdocs-mermaid2-plugin?tab=readme-ov-file#additional-settings-for-the-material-theme] the icon packs won't load. When I remove the superfences configuration then the icon packs load as expected, but of course syntax highlighting breaks.

I've tried adding the registerIconPacks call directly in the plugin to have it in the same script block but that doesn't seem to make a difference. I've also tried explicitly calling initialize in my extra_javascript file while having the superfences config enabled but that didn't seem to make a difference. Though when using the superfences configuration it doesn't appear as though mermaid.initialize() is called at all. I could not find any reference to window.mermaidConfig being used after it is set by the script tag created by the plugin when using superfences, so I'm not clear how that works.

Any advice on how to get this to work with superfences enabled?

[github-actions[bot]]

Thank you for your contribution! This is very appreciated.

[fralau]

The problem seems to be, here, in the Javascript code, possibly in relation to the HTML tags that enclose the javascript (<pre><code> versus <div>) 🤔

It is important to keep in mind that the plugin does not do any Javascript, except for inserting calls to the library and initialization sequences.

1. First (just to make sure) are you using the custom fence recommended?
2. Secondly, I would confirm that the same version of the Javascript library is being used in all test cases.
3. If that doesn't solve, I would get the MkDocs-Mermaid2 plugin out of the equation. You could look at the HTML/Javascript pages produced, and try to reduce the issue to a mininum reproducible case. You might want to tweak it around, with the eye firmly on the Mermaid documentation.
4. If that doesn't solve you could submit to Mermaid team as a question, asking "what is this HTML/Javascript code doing incorrectly"?
5. It could be that the diagnosis would help you solve your problem. But if it appears that the plugin could or should be corrected, then you could put forward the diagnosis in this issue, showing what the HTML code is, and what it should have been.

[mgrubb]

So the problem doesn't appear to be with Mermaid or this plugin. It looks like Material theme for Mkdocs has added support for Mermaid since v8.2.0. Their implementation seems to be interfering with this plugin. I switched to the Cinder theme and was able to use this plugin and load the custom icon packs without any issues.

[fralau]

Thanks, and it's good that you got it working.

If you still wish to use Material, you could try to use its own recommended custom fence (just in case, to see what happens)?

If all else fails, you might want to open a discussion on Material's github repo?

I'm interested in that issue, since I am in the process of impletementing test cases for Superfences on the Mermaid2 plugin, using Mkdocs-Test.

(I'm putting @squidfunk in copy, just in case.)

[squidfunk]

You don't need to use our integration, which is targeted towards more consistent look and feel but might make more advanced Mermaid.js functionality harder to use. You can always use a custom integration, just don't add the mermaid CSS class in your custom fence, which is what Material is looking for.

We currently have no plans to add further functionality to our Mermaid integration.