Also, as an experiment, I just now cleared the “Style Sheet” field in Preferences > Files > Markdown. And the result is that this is now the way DT renders my mermaid code:
Something weird is happening: You activate Prism.js, but it’s not included in your HTML. Your MD is not really rendered at all, except for the heading. That makes no sense.
And in your preferences, the custom CSS (CHS_...) is not set, although it’s included in your HTML.
Either your preferences are not what you think they are or the screenshots had not been taken at the same time. Or something else is off.
Try restarting DT and/or your computer.
And try removing the indentation. For some reason, Mermaid is not processing your input. In the online examples I found, the diagram code is not indented.
You are right, the Preferences image was a later screenshot—after I emptied the Style Sheet field. I removed it just in case it was having some effect.
I’ve now tried these to no avail:
I unchecked all Extensions boxes and then re-checked Mermaid support.
I restarted my machine and now no mermaid code is being rendered.
Everything points to the Mermaid JavaScript code not being run. Which I can’t really tell you more than that. You could set breakpoints in Safari’s tool’s “Sources” tab for “load” to see what’s happening (or maybe not happening).
See here: Event Breakpoints | WebKit
Under “Security” you must have JavaScript turned on!
You could also turn off your custom CSS in DT’s preferences. And why is there an error message about a favicon.ico? It shouldn’t happen in a simple MD file. Do you have any plug-ins installed in Safari? Or something on your machine that might interfere with Safari (Adblocker, whatever)?
Very simple test with a stupid MD file:
<script>
window.addEventListener("load", e => {
window.alert("Document loaded");
})
</script>
If you switch to preview, an alert should be displayed. And if you convert that MD document to HTML and open it in Safari, the same thing should happen.
But all this is not really a DT issue, in my opinion. Something somewhere in your setup or your prefs is causing the problems. You could try to run DT as another user and see what that gives.
Hello, @chrillek, and thanks so much yet again for your frequent detailed and knowledgeable help and patience with my delays. Here is my sad update:
I’ve checked all the things you mentioned.
I pasted the script and it worked properly.
All of my intra-DT markdown files containing mermaid look great when I convert them to HTML and then open them (CMD-O) in Safari or Chrome—but not in DT.
Interestingly, I downloaded the latest DT Pro and installed it on my other computer, a Mac Mini 2018 (macOS 12.7.5) and it’s doing the same damned thing:
I’m totally, totally dumbfounded. What’s strange is that Mermaid worked inside DT Pro before, in a time that seems long, long ago. Then the names went missing, and finally all graphical rendering disappeared.
Should I manually download some kind of Javascript thing and put its path in that text field (in Preferences > Files > Markdown > JavaScript)?
Screenshots of Preferences > Web and of Preferences > Files > Markdown might be useful. Is there anything that might block network traffic (e.g. Little Snitch or your firewall settings)? Is DEVONthink 3 installed in the folder /Applications?
As @cgrunenberg stepped in, you should continue to discuss that with him. I am out of ideas anyway. It still seems that DT is not executing the JavaScript, perhaps not even loading it, in your case.
@cgrunenberg: I don’t think that Little Snitch or something like that is involved here as the script clearly loads in the browser (no error message). Little Snitch should prevent it being loaded not only in DT, but also in browsers.