HTML card content corrupted after publishing

Hi Kevin,

Thanks for looking into this.

I’ve now found a solution which is to use ``` code blocks with language “mermaid” and some custom code to resolve conflicts between Prism and Mermaid. It’s a bit messy but works, and actually presents the mermaid code more cleanly in the editor.

Brad

<script>
// Prevent Prism auto highlighting
window.Prism = window.Prism || {};
Prism.manual = true;
</script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/prism.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/components/prism-css.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/components/prism-csharp.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/components/prism-markup.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/components/prism-javascript.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/components/prism-vhdl.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.7.0/mermaid.js"></script>
<script>
// Initialize mermaid and run on code blocks with language 'mermaid'
mermaid.initialize({  
    startOnLoad:false,
});
mermaid.run({
  nodes: document.querySelectorAll('.language-mermaid'),
});

// Apply syntax highlighting to all non-mermaid language blocks
let codeBlocks = document.querySelectorAll("[class^='language-']");
for (let cb of codeBlocks)
{
  if (!cb.matches(".language-mermaid"))
    Prism.highlightElement(cb);
}
   
</script>

Brad

Read full topic