Mermaid-js and other pymdownx.superfences not working

datoslabs commented 1 year ago

Hi,

I have recently installed MarkdownPreview in Sublime Text 3; I am not sure if additional configuration is needed to render mermaid-js diagrams in preview. I have tried the example file and everything in the UML Flow Charts section and below does not seem to work, ie the fenced block just renders as a regular code block. I have also tried to update the example file's mermaid-js js path to no avail.

Relevant setup: Sublime Text 3.2.1 Build 3207 Windows 10 Chrome

facelessuser commented 1 year ago

I may have hastily edited the example file, but if you are following the documentation, it should work for you.

You'll want to add only the Mermaid UML support, not the old legacy flowchart sequence diagram support. Here's the basics for Mermaid and MathJax.

    "js": {
        "markdown": [
            "default",
            // Mermaid library
            "https://unpkg.com/mermaid@8.8.4/dist/mermaid.min.js",
            // User configuration, should be loaded before the loader
            "res://MarkdownPreview/js/mermaid_config.js",
            // Mermaid loader
            "res://MarkdownPreview/js/mermaid.js",
        ],

You'll want to run the markdown parser, not github.

It should work fine:

datoslabs commented 1 year ago

Thank you very much for the quick response, I misunderstood the documentation, the settings override works for me now!

However, when the MathJax support doesn't seem to work. I tested with 2 scenarios:

A:

    "js": {
        "markdown": [
          "https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js",
          "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js",
          "https://cdnjs.cloudflare.com/ajax/libs/js-sequence-diagrams/1.0.6/sequence-diagram-min.js",
          "https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.6.5/flowchart.min.js",
          "https://unpkg.com/mermaid@8.8.4/dist/mermaid.min.js",
          "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js",
          "res://MarkdownPreview/js/uml.js",
          "res://MarkdownPreview/js/math_config.js",
          "res://MarkdownPreview/js/mermaid_config.js",
          "res://MarkdownPreview/js/mermaid.js"
        ]
    }

Both UML and Mermaid-js render correctly, and Math section appears as regular text.

B:

    "js": {
        "markdown": [
          "https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js",
          "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js",
          "https://cdnjs.cloudflare.com/ajax/libs/js-sequence-diagrams/1.0.6/sequence-diagram-min.js",
          "https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.6.5/flowchart.min.js",
          "https://unpkg.com/mermaid@8.8.4/dist/mermaid.min.js",
          "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js",
          "res://MarkdownPreview/js/uml.js",
          "res://MarkdownPreview/js/math_config.js",
          "res://MarkdownPreview/js/mermaid_config.js",
          "res://MarkdownPreview/js/mermaid.js"
        ]
    },
  "markdown_extensions": [
    {
      "pymdownx.arithmatex":{
        "generic": true
      }
    }
  ]

With Arithmatex Math section renders correctly but Mermaid-js, UML, and several other sections render incorrectly. Please advise.

facelessuser commented 1 year ago

In your second example, you are only loading the arithmatex extension. So fence logic is probably no longer loaded. When you override markdown.extensions, remember that it is not additive, it completely overrides your entire list of extensions, so copy any defaults over and then modify them.

datoslabs commented 1 year ago

Awesome, that works perfectly, thank you again!!

facelessuser / MarkdownPreview

Mermaid-js and other pymdownx.superfences not working #159