Solution for offline workflow? (rendering and viewing without Internet access)

[knuesel]

Description

Is there a way to fully render a Quarto file with math while being offline?

For example rendering the following with quarto render math.qmd

---
embed-resources: true
self-contained-math: true
---

$$
x^2 = 4
$$

shows the following messages:

[WARNING] Could not fetch resource https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=es6: HttpExceptionRequest Request {
    host                 = "cdnjs.cloudflare.com"
    port                 = 443
    secure               = True
    requestHeaders       = []
    path                 = "/polyfill/v3/polyfill.min.js"
    queryString          = "?features=es6"
    method               = "GET"
    proxy                = Nothing
    rawBody              = False
    redirectCount        = 10
    responseTimeout      = ResponseTimeoutDefault
    requestVersion       = HTTP/1.1
    proxySecureMode      = ProxySecureWithConnect
  }
   (ConnectionFailure Network.Socket.getAddrInfo (called with preferred socket type/protocol: AddrInfo {addrFlags = [AI_ADDRCONFIG], addrFamily = AF_UNSPEC, addrSocketType = Stream, addrProtocol = 0, addrAddress = 0.0.0.0:0, addrCanonName = Nothing}, host name: Just "cdnjs.cloudflare.com", service name: Just "443"): does not exist (Try again))
[WARNING] Could not fetch resource https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml-full.js: HttpExceptionRequest Request {
    host                 = "cdn.jsdelivr.net"
    port                 = 443
    secure               = True
    requestHeaders       = []
    path                 = "/npm/mathjax@3/es5/tex-chtml-full.js"
    queryString          = ""
    method               = "GET"
    proxy                = Nothing
    rawBody              = False
    redirectCount        = 10
    responseTimeout      = ResponseTimeoutDefault
    requestVersion       = HTTP/1.1
    proxySecureMode      = ProxySecureWithConnect
  }
   (ConnectionFailure Network.Socket.getAddrInfo (called with preferred socket type/protocol: AddrInfo {addrFlags = [AI_ADDRCONFIG], addrFamily = AF_UNSPEC, addrSocketType = Stream, addrProtocol = 0, addrAddress = 0.0.0.0:0, addrCanonName = Nothing}, host name: Just "cdn.jsdelivr.net", service name: Just "443"): does not exist (Try again))
Output created: math.html

and opening the HTML page I see \[ x^2 = 4 \] instead of rendered math.

I'm thinking maybe a way to have quarto use a local cache for the CDN resources, that could be populated once while online and use thereafter?

[mcanouil]

WHich format are you using? And which version of Quarto?

There is a known issue for revealjs:

• self-contained-math:true in reveal.js format still require internet access #9404

[mcanouil]

Did you downloaded the file first?
I literally downloaded the CDN JS file as ./mathjax.js and used that.
I used Quarto development version but don't believe it matters here.

The JS script is properly embedded in the HTML file as it should.
For polyfill, the only options are to modify the template or use one of the other Math libraries.

quarto preview /Users/mcanouil/Projects/quarto/quarto-playground/index.qmd --no-browser --no-watch-inputs
Check file:///Users/mcanouil/Projects/quarto/quarto-cli/src/quarto.ts
pandoc 
  to: html
  output-file: index.html
  standalone: true
  embed-resources: true
  section-divs: true
  html-math-method:
    method: mathjax
    url: ./mathjax.js
  wrap: none
  default-image-extension: png
  
metadata
  document-css: false
  link-citations: true
  date-format: long
  lang: en
  
[WARNING] Could not fetch resource https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=es6: HttpExceptionRequest Request {
    host                 = "cdnjs.cloudflare.com"
    port                 = 443
    secure               = True
    requestHeaders       = []
    path                 = "/polyfill/v3/polyfill.min.js"
    queryString          = "?features=es6"
    method               = "GET"
    proxy                = Nothing
    rawBody              = False
    redirectCount        = 10
    responseTimeout      = ResponseTimeoutDefault
    requestVersion       = HTTP/1.1
    proxySecureMode      = ProxySecureWithConnect
  }
   (ConnectionFailure Network.Socket.getAddrInfo (called with preferred socket type/protocol: AddrInfo {addrFlags = [AI_ADDRCONFIG], addrFamily = AF_UNSPEC, addrSocketType = Stream, addrProtocol = 0, addrAddress = 0.0.0.0:0, addrCanonName = Nothing}, host name: Just "cdnjs.cloudflare.com", service name: Just "443"): does not exist (nodename nor servname provided, or not known))
Output created: index.html

Watching files for changes
Browse at http://localhost:6143/
  /output/chtml/fonts/woff-v2/MathJax_Zero.woff (404: Not Found)
  /output/chtml/fonts/woff-v2/MathJax_Math-Italic.woff (404: Not Found)
  /output/chtml/fonts/woff-v2/MathJax_Main-Regular.woff (404: Not Found)

The fonts not found only appears to be an issue when previewing.

[knuesel]

Sorry, please ignore the Could not fetch resource error mentioned above: I had forgotten to rename tex-chtml-full.js to mathjax.js.

I can get the MathJax rendering with url: ./mathjax.js but the math font is wrong. For example the following document

---
format: html
html-math-method:
  method: mathjax
  url: ./mathjax.js
---

$$
\mathcal{X} \in \mathbb{R}
$$

renders as

while after commenting out the url: line I get the correct rendering:

Note that this font problem can also occur when I'm not using the url: option, for example the following document also gives the wrong font:

---
format: html
embed-resources: true
self-contained-math: true
---

$$
\mathcal{X} \in \mathbb{R}
$$

[mcanouil]

Maybe related to polyfill or to the missing fonts warnings.

[cscheid]

Another option here might be to use MathML. Its support is not perfect in many browsers, but it's been improving, and it's acceptably good in Firefox.

[knuesel]

Ah yes MathML looks like a promising solution, especially now that Chrome finally supports it. I'll try and see how well it works.