Fix regression with mermaid.js < 10 (arguments no longer processed)

CHANGELOG.md

@@ -4,7 +4,7 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## 1.0.7, 2023-08-09
+## 1.0.8, 2023-08-09
 
 Fixed: Arguments of config file not taken into consideration,
     for mermaid.js version > 10 (#82)

mermaid2/plugin.py

@@ -23,9 +23,6 @@
 MERMAID_LIB = "https://unpkg.com/mermaid@%s/dist/mermaid.esm.min.mjs"
 
 
-MERMAID_CODE_PRE_10 = '<script src="%s">\n'
-MERMAID_CODE = '<script type="module">import mermaid from "%s"</script>\n'
-
 
 
 # Two conditions for activating custom fences:
@@ -128,15 +125,6 @@ def mermaid_lib(self) -> str:
             self._mermaid_lib = mermaid_lib
         return self._mermaid_lib
 
-    @property
-    def mermaid_script(self) -> str:
-        """
-        Provides the mermaid script to be inserted into the code
-        """
-        if self.mermaid_major_version < 10:
-            return MERMAID_CODE_PRE_10 % self.mermaid_lib
-        else:
-            return MERMAID_CODE % self.mermaid_lib
 
     @property
     def activate_custom_loader(self) -> bool:
@@ -259,6 +247,9 @@ def on_post_page(self, output_content, config, page, **kwargs):
                 if self.mermaid_major_version < 10:
                     # <script src="...">
                     new_tag['src'] = self.mermaid_lib
+                    # it's necessary to close and reopen the tag:
+                    soup.body.append(new_tag)
+                    new_tag = soup.new_tag("script")
                 else:
                     # <script type="module">
                     # import mermaid from ...

setup.py

@@ -1,7 +1,7 @@
 from setuptools import setup, find_packages
 
 
-VERSION = '1.0.7'
+VERSION = '1.0.8'
 
 # required if you want to run tests
 # pip install 'mkdocs-mermaid2-plugin[test]'

webdoc/docs/description.md

@@ -53,7 +53,7 @@ of Mermaid.js required:
     The behavior of the plugin depends of the version of Mermaid.js, because
     version 10.0.0 represents a significant change ([see changelog](https://github.com/mermaid-js/mermaid/blob/develop/CHANGELOG.md#1000)). 
 
-=== "Mermaid.js > 10.0.0"
+=== "Mermaid.js >= 10.0.0"
 
     > *From version 1.0 of mkdocs-mermaid2*
 
@@ -62,7 +62,9 @@ of Mermaid.js required:
     page e.g.:
 
     ``` html
-    <script src="https://unpkg.com/mermaid@10.0.2/dist/mermaid.esm.min.mjs" type="module">
+    <script type="module">
+    import mermaid from "https://unpkg.com/mermaid@10.0.2/dist/mermaid.esm.min.mjs"
+    mermaid.initialize()
     </script>
     ```
 
@@ -77,6 +79,7 @@ of Mermaid.js required:
 
     ``` html
     <script src="https://unpkg.com/mermaid@8.8.2/dist/mermaid.min.js">
+    mermaid.initialize()
     </script>
     ```
 
@@ -89,9 +92,6 @@ of Mermaid.js required:
 To start displaying of the diagrams, the plugin then automatically inserts 
 a separate call to initialize the Mermaid library:
 
-    <script>
-    mermaid.initialize()
-    </script>
 
 
 The user's browser will then read this code and render it on the fly.
@@ -109,9 +109,39 @@ Simply add those arguments in the config file, e.g.
 
 ```yaml
 plugins:
-    - search
-    - mermaid2:
-        arguments:
-          theme: 'dark'
+  - search
+  - mermaid2:
+      version: '10.1.0'
+      arguments:
+        theme: 'dark'
+        themeVariables:
+          primaryColor: '#BB2528'
+          primaryTextColor: '#fff'
+          primaryBorderColor: '#7C0000'
+          lineColor: '#F8B229'
+          secondaryColor: '#006100'
+          tertiaryColor: '#fff'
 ```
 
+This will translate in the following way:
+
+
+=== "Mermaid.js >= 10.0.0"
+    _As of version 1.0.8_
+
+    ```javascript
+    <script type="module">import mermaid from "https://unpkg.com/mermaid@10.1.0/dist/mermaid.esm.min.mjs";
+    mermaid.initialize({
+        theme: "dark",
+        themeVariables: {
+            primaryColor: "#BB2528",
+            primaryTextColor: "#fff",
+            primaryBorderColor: "#7C0000",
+            lineColor: "#F8B229",
+            secondaryColor: "#006100",
+            tertiaryColor: "#fff"
+        }
+    });</script>
+    ```
+
+=== "Earlier versions"

webdoc/docs/index.md

@@ -206,7 +206,7 @@ The result would be as follows, for the diagrams above:
 ![](img/custom_colors2.png)
 
 !!! Tip
-    As of mkdocs-mermaid2 version 1.0.7, this works also with versions of Mermaid.js >= 10. 
+    As of mkdocs-mermaid2 version 1.0.8, this works also with versions of Mermaid.js >= 10. 
 
 
 

webdoc/docs/troubleshooting.md

@@ -123,10 +123,10 @@ plugins:
           tertiaryColor: '#fff'
 ```
 
-Due to the change of javascript library format as of mermaid.js ***as ofs 
+Due to the change of javascript library format as of mermaid.js **as of 
 version 10.0**, this did not work any more (but it worked for lower versions).
 
-This was fixed in version 1.0.7 of the mkdocs-mermaid2 library
+This was fixed in version 1.0.8 of the mkdocs-mermaid2 library
 ([see github issue for a full description](https://github.com/mermaid-js/mermaid/issues/4672)).
 
 **Upgrade mkdocs-mermaid2 to the most recent version.**