How to link to external resources from quartoPub (mermaid images are invisible on quartoPub)

General
,
1

I have a quarto revealjs presentation that uses mermaid diagrams. I wanted to publish it to quartoPub. I have the following yaml header (so external dependencies are included in the published presentation):

---
title: "Does Code Quality<br>Even Matter<br>in Data Science?"
author: "Russ Hyde"
format:
  revealjs:
    embed-resources: true
    standalone: true
    theme: solarized
---

If I look at the .html file produced (when rendering locally), the mermaid library is embedded in it.
But when I look at the published presentation, the slide that should have a mermaid diagram is blank (aside from the title): https://russhyde.quarto.pub/ds-code-quality-leeds-20230328/#/what-is-code-quality

There are console errors in the browser DevTools:

DevTools failed to load source map: Could not load content for chrome-extension://cfhdojbkjhnklbpkdaibdccddilifddb/browser-polyfill.js.map: System error: net::ERR_FILE_NOT_FOUND
DevTools failed to load source map: Could not load content for https://russhyde.quarto.pub/ds-code-quality-leeds-20230328/reveal.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load source map: Could not load content for https://russhyde.quarto.pub/ds-code-quality-leeds-20230328/mermaid.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

I don't quite understand why the errors arise when the resources (mermaid, reveal etc) should be embedded in the .html

Opening the same .html file locally on the browser works though - the diagram is visible.

Is there a way to just link to external CDN for the required libraries from a revealjs/quarto document?

2

I have, however, noted that the mermaid diagrams become visible when reloading the page whenever a slide contains one.

3

I think this is because of revealjs default configuration. See

You need to change the view-distance config , which is documented in Quarto - Revealjs Options

The issues will have the details, but it is indeed a auto load feature from revealjs.

This should have been fixed though in latest version by adjusting the view distance when we find a mermaid diagram. I'll check

Hope it helps

4

Fix is still here and should apply, but it seems you document render different than expected.

What is you Quarto version ?
Can you share the content of the Qmd for the slide with the diagram ?

5

This topic was automatically closed 21 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.