Is it possible to mix mermaid and code block highlighting in the same file?

[aneksteind]

I have a simple page.headHtml:

  headHtml: |
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism-tomorrow.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/combine/npm/[email protected]/prism.min.js,npm/[email protected]/plugins/autoloader/prism-autoloader.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    <script>
      mermaid.initialize({startOnLoad:false});
      mermaid.init(undefined,document.querySelectorAll(".mermaid"));
    </script>

    <script>
      window.MathJax = {
        startup: {
          ready: () => {
            MathJax.startup.defaultReady();
          }
        }
      };
    </script>
    <script async="" id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

What I'm finding when including both the mermaid example from the tips page and some python code is that the prism script conflicts with the mermaid script.

[srid]

There apparently is a way to tell Prism not to highlight certain blocks: PrismJS/prism#2074 (comment)

But I cannot figure out how to make Mermaid play correctly with it. If you are able, let me know - we can modify the default snippet accordingly.

[srid]

Note: adding a custom class to markdown code blocks would be like this:

[aneksteind]

I gave up -- it looks like prism strips HTML, and I think that's the root of the problem. I decided to go with highlight.js instead and was able to get that to work:

js:
  # Syntax highlighting using highlight.js
  syntax: |
    <link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/hybrid.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/languages/haskell.min.js"></script>
    <script>hljs.highlightAll();</script>

[srid]

Does highlight.js have autoloading of language JS (like prism does), or do you have to manually specifying them?

[aneksteind]

I believe they autoload a limited subset which you can see on their download page, and for languages like Haskell it needs to be manually specified.