WGLMakie.jl in quarto doesn't show any images

[jbrea]

I tried naively to create some WGLMakie plots in a quarto document, but they don't show up in the output.
I don't know if this is an issue of quarto or WGLMakie (or if it is just me failing to use those great tools together).
I ping also Makie authors here, in case they can provide some insight @SimonDanisch, @jkrumbiegel

Here is a screenshot of the top of the output

Attached are the mwe.qmd file and the output of quarto render mwe.qmd.
mwe.zip

[SimonDanisch]

Does Quarto have an HTML output? Looks like the page is simply printed instead of calling show(io, ::MIME"text/html", page::Page)

[jbrea]

Thanks! I think this is indeed the problem.

[jbrea]

I hoped something like the following would work, but it doesn't...

#| output: asis
using JSServe, WGLMakie, Markdown
WGLMakie.activate!()
show(stdout, MIME"text/html"(), Page(exportable=true, offline=true))
show(stdout, MIME"text/html"(), scatter(1:4, color=1:4))

@quarto-devs: is there a possibility to add something like #| output: html to make this work?

[SimonDanisch]

When I look at quarto, it seems like you may want to use CairoMakie instead of WGLMakie?

[cscheid]

Does WGLMakie call back to Julia in interactive sessions or does it compile everything to JS?

If it's the former, then it cannot possibly work as it exists with quarto, since the resulting HTML needs to be able to talk to a server. If it's the latter, then it might one day work, but I don't think we currently have support for it.

[SimonDanisch]

It's both: https://docs.makie.org/v0.18.2/documentation/backends/wglmakie/index.html...
but since we don't compile any julia to JS, it's pretty restricted what can be done...

[jbrea]

Does WGLMakie call back to Julia in interactive sessions or does it compile everything to JS?

In the example above I use WGLMakie with exportable=true, offline=true, which has the effect of inlining all data & js dependencies, so that everything could be loaded in a single HTML object.

[cscheid]

@SimonDanisch Oh, I'm sorry, I should have checked that you're the Makie developer. Good to see you around here! I'd love to one day figure out a good graphics/vis solution for quarto+julia. If you have the time and willingness to offer suggestions, feedback, and Julia expertise, would you mind if I contacted you in the future about this?

[SimonDanisch]

Yeah let me know :)

[cscheid]

(@jbrea Starting a new thread about the specifics here.) I'm looking through your MWE example, thanks for sharing that. Is there a reason you're using the knitr engine? Essentially all of our julia examples go through jupyter and IJulia.

I'm also having a hard time getting your example to work even on Jupyter itself. Do you have a working example to compare against the quarto failure you're getting?

[jbrea]

Thanks for looking at this, @cscheid!

I am using knitr, because I want to use it in a multi-language document. My goal is to provide teaching material for a programming language agnostic machine learning course, i.e. students can choose if they want to see code examples and exercises in julia, python or R, using tabset-panels. Currently the course material is written purely in julia (with Pluto). So far I haven't found a simple way to use python and R code cells in Pluto, which is why I started looking into quarto.

To get my mwe running, open a julia REPL in the folder where you saved mwe.qmd (I assume you have julia 1.8.2 installed) and run

using Pkg; Pkg.activate(".")
Pkg.add(["JSServe", "WGLMakie", "Observables", "Markdown"])

and then run quarto render mwe.qmd.

The WGLMakie code in my mwe is taken from the WGLMakie docs.

[agerlach]

@jbrea Did you ever find a solution to this?

[epfl-bio322]

Not within quarto; I didn't further investigate. But I found a rather easy and flexible way to write multilang documents in Pluto (see here).

[kescobo]

Hope this isn't considered a necropost - I'm also wondering if there has been any progress here, especially given the julia-native engine (not going through IJulia anymore). I naively tried

---
title: "WGLMakie and Quarto test"
format:
  html:
    code-fold: false
engine: julia
---

```{julia}
using WGLMakie

fig, ax, sc = scatter(rand(5), rand(5))
fig
```

```{julia}
display(fig)
```

And I get an output, but both attempts to display just have spinning wheels

html output

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head>

<meta charset="utf-8">
<meta name="generator" content="quarto-1.9.37">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">


<title>WGLMakie and Quarto test</title>
<style>
/* Default styles provided by pandoc.
** See https://pandoc.org/MANUAL.html#variables-for-html for config info.
*/
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
ul.task-list li input[type="checkbox"] {
  width: 0.8em;
  margin: 0 0.8em 0.2em -1em; /* quarto-specific, see https://github.com/quarto-dev/quarto-cli/issues/4556 */ 
  vertical-align: middle;
}
/* CSS for syntax highlighting */
html { -webkit-text-size-adjust: 100%; }
pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
  { counter-reset: source-line 0; }
pre.numberSource code > span
  { position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
  { content: counter(source-line);
    position: relative; left: -1em; text-align: right; vertical-align: baseline;
    border: none; display: inline-block;
    -webkit-touch-callout: none; -webkit-user-select: none;
    -khtml-user-select: none; -moz-user-select: none;
    -ms-user-select: none; user-select: none;
    padding: 0 4px; width: 4em;
  }
pre.numberSource { margin-left: 3em;  padding-left: 4px; }
div.sourceCode
  {   }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
</style>


<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2" crossorigin="anonymous"></script><script src="wgl_test_files/libs/clipboard/clipboard.min.js"></script>
<script src="wgl_test_files/libs/quarto-html/quarto.js" type="module"></script>
<script src="wgl_test_files/libs/quarto-html/tabsets/tabsets.js" type="module"></script>
<script src="wgl_test_files/libs/quarto-html/popper.min.js"></script>
<script src="wgl_test_files/libs/quarto-html/tippy.umd.min.js"></script>
<script src="wgl_test_files/libs/quarto-html/anchor.min.js"></script>
<link href="wgl_test_files/libs/quarto-html/tippy.css" rel="stylesheet">
<link href="wgl_test_files/libs/quarto-html/quarto-syntax-highlighting-7f8f88aac4f3542376d5c11b86a4c14d.css" rel="stylesheet" id="quarto-text-highlighting-styles">
<script src="wgl_test_files/libs/bootstrap/bootstrap.min.js"></script>
<link href="wgl_test_files/libs/bootstrap/bootstrap-icons.css" rel="stylesheet">
<link href="wgl_test_files/libs/bootstrap/bootstrap-efbb37e9afcc02144ebbc7afd12a776f.min.css" rel="stylesheet" append-hash="true" id="quarto-bootstrap" data-mode="light">
<script src="https://cdn.jsdelivr.net/npm/requirejs@2.3.6/require.min.js" integrity="sha384-c9c+LnTbwQ3aujuU7ULEPVvgLs+Fn6fJUvIGTsuu1ZcCf11fiEubah0ttpca4ntM sha384-6V1/AdqZRWk1KAlWbKBlGhN7VG4iE/yAZcO6NZPMF8od0vukrvr0tg4qY6NSrItx" crossorigin="anonymous"></script>

<script type="application/javascript">define('jquery', [],function() {return window.jQuery;})</script>


</head>

<body class="fullcontent quarto-light">

<div id="quarto-content" class="page-columns page-rows-contents page-layout-article">

<main class="content" id="quarto-document-content">

<header id="title-block-header" class="quarto-title-block default">
<div class="quarto-title">
<h1 class="title">WGLMakie and Quarto test</h1>
</div>



<div class="quarto-title-meta">

    
  
    
  </div>
  


</header>


<div id="2" class="cell" data-execution_count="1">
<div class="code-copy-outer-scaffold"><div class="sourceCode cell-code" id="cb1"><pre class="sourceCode julia code-with-copy"><code class="sourceCode julia"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="im">using</span> <span class="bu">WGLMakie</span></span>
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a><span class="co">#show(stdout, MIME"text/html"(), Page(exportable=true, offline=true))</span></span>
<span id="cb1-4"><a href="#cb1-4" aria-hidden="true" tabindex="-1"></a><span class="co">#show(stdout, MIME"text/html"(), scatter(1:4, color=1:4))</span></span></code></pre></div><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></div>
<div class="cell-output cell-output-stdout">
<div class="ansi-escaped-output">
<pre><span class="ansi-green-fg ansi-bold">Precompiling</span> packages...
   1460.7 ms<span class="ansi-green-fg">  ✓ </span>QuartoNotebookWorkerTablesExt<span class="ansi-bright-black-fg"> (serial)</span>
  1 dependency successfully precompiled in 1 seconds
<span class="ansi-green-fg ansi-bold">Precompiling</span> packages...
    913.7 ms<span class="ansi-green-fg">  ✓ </span>QuartoNotebookWorkerJSONExt<span class="ansi-bright-black-fg"> (serial)</span>
  1 dependency successfully precompiled in 1 seconds
<span class="ansi-green-fg ansi-bold">Precompiling</span> packages...
    872.8 ms<span class="ansi-green-fg">  ✓ </span>QuartoNotebookWorkerLaTeXStringsExt<span class="ansi-bright-black-fg"> (serial)</span>
  1 dependency successfully precompiled in 1 seconds
<span class="ansi-green-fg ansi-bold">Precompiling</span> packages...
   4556.4 ms<span class="ansi-green-fg">  ✓ </span>QuartoNotebookWorkerMakieExt<span class="ansi-bright-black-fg"> (serial)</span>
  1 dependency successfully precompiled in 5 seconds
</pre>
</div>
</div>
</div>
<div id="4" class="cell" data-execution_count="1">
<div class="code-copy-outer-scaffold"><div class="sourceCode cell-code" id="cb2"><pre class="sourceCode julia code-with-copy"><code class="sourceCode julia"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a>fig, ax, sc <span class="op">=</span> <span class="fu">scatter</span>(<span class="fu">rand</span>(<span class="fl">5</span>), <span class="fu">rand</span>(<span class="fl">5</span>))</span>
<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a>fig</span></code></pre></div><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></div>
<div class="cell-output cell-output-display" data-execution_count="1">
<div class="bonito-fragment" id="46f9130f-617e-4c4e-bd28-f9d6a85b583f" data-jscall-id="root"><div><script src="http://localhost:9386/assets/509e910e23e001fe222ed4e6318c744dfd644a9d-Bonito.bundled.js?b4727ff9068f2529964cc80da8155a625f39abb5" type="module"></script><style></style><style>.wglmakie-spinner {
  left: 50%;
  z-index: 1000;
  height: 40px;
  position: absolute;
  border-radius: 50%;
  border: 4px solid rgba(0, 0, 0, 0.1);
  animation: wglmakie-spin 1.0s linear infinite;
  top: 50%;
  border-top: 4px solid currentColor;
  width: 40px;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
@keyframes wglmakie-spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
</style></div><div><script type="module">Bonito.init_session("46f9130f-617e-4c4e-bd28-f9d6a85b583f", Bonito.fetch_binary('http://localhost:9386/assets/df8e972cffa5b1f7979dbef47245d6527bd987da-8049154498100066710.bin'), "root", false);
</script><div style="width: 100%; height: 100%; position: relative;" data-jscall-id="1"><canvas height="480px" data-jp-suppress-context-menu="" style="display: block" data-jscall-id="2" data-lm-suppress-shortcuts="true" width="672px" tabindex="0"></canvas><div class="wglmakie-spinner" data-jscall-id="3"></div></div></div></div>
</div>
</div>
<div id="6" class="cell" data-execution_count="1">
<div class="code-copy-outer-scaffold"><div class="sourceCode cell-code" id="cb3"><pre class="sourceCode julia code-with-copy"><code class="sourceCode julia"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="fu">display</span>(fig)</span></code></pre></div><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></div>
<div class="cell-output cell-output-display">
<div class="bonito-fragment" id="3ab2a6d4-9667-40e8-8897-027017f13007" data-jscall-id="root"><div><script src="http://localhost:9386/assets/509e910e23e001fe222ed4e6318c744dfd644a9d-Bonito.bundled.js?b4727ff9068f2529964cc80da8155a625f39abb5" type="module"></script><style></style><style>.wglmakie-spinner {
  left: 50%;
  z-index: 1000;
  height: 40px;
  position: absolute;
  border-radius: 50%;
  border: 4px solid rgba(0, 0, 0, 0.1);
  animation: wglmakie-spin 1.0s linear infinite;
  top: 50%;
  border-top: 4px solid currentColor;
  width: 40px;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
@keyframes wglmakie-spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
</style></div><div><script type="module">Bonito.init_session("3ab2a6d4-9667-40e8-8897-027017f13007", Bonito.fetch_binary('http://localhost:9386/assets/bec6411b40ebdaafe1bcc2df3282a6c910f922d8-6080782400399013847.bin'), "root", false);
</script><div style="width: 100%; height: 100%; position: relative;" data-jscall-id="1"><canvas height="480px" data-jp-suppress-context-menu="" style="display: block" data-jscall-id="2" data-lm-suppress-shortcuts="true" width="672px" tabindex="0"></canvas><div class="wglmakie-spinner" data-jscall-id="3"></div></div></div></div>
</div>
<div class="cell-output cell-output-display" data-execution_count="1">
<pre><code>WGLMakie.Screen(
    framerate = 30.0,
    resize_to = nothing,
    px_per_unit = automatic,
    scalefactor = automatic,
    session = false,
    three = Channel{Any}(1) (empty),
    scene = Scene(1 children, 0 plots),
)</code></pre>
</div>
</div>

</main>
<!-- /main column -->
<script id="quarto-html-after-body" type="application/javascript">
  window.document.addEventListener("DOMContentLoaded", function (event) {
    const icon = "";
    const anchorJS = new window.AnchorJS();
    anchorJS.options = {
      placement: 'right',
      icon: icon
    };
    anchorJS.add('.anchored');
    const isCodeAnnotation = (el) => {
      for (const clz of el.classList) {
        if (clz.startsWith('code-annotation-')) {                     
          return true;
        }
      }
      return false;
    }
    const onCopySuccess = function(e) {
      // button target
      const button = e.trigger;
      // don't keep focus
      button.blur();
      // flash "checked"
      button.classList.add('code-copy-button-checked');
      var currentTitle = button.getAttribute("title");
      button.setAttribute("title", "Copied!");
      let tooltip;
      if (window.bootstrap) {
        button.setAttribute("data-bs-toggle", "tooltip");
        button.setAttribute("data-bs-placement", "left");
        button.setAttribute("data-bs-title", "Copied!");
        tooltip = new bootstrap.Tooltip(button, 
          { trigger: "manual", 
            customClass: "code-copy-button-tooltip",
            offset: [0, -8]});
        tooltip.show();    
      }
      setTimeout(function() {
        if (tooltip) {
          tooltip.hide();
          button.removeAttribute("data-bs-title");
          button.removeAttribute("data-bs-toggle");
          button.removeAttribute("data-bs-placement");
        }
        button.setAttribute("title", currentTitle);
        button.classList.remove('code-copy-button-checked');
      }, 1000);
      // clear code selection
      e.clearSelection();
    }
    const getTextToCopy = function(trigger) {
      const outerScaffold = trigger.parentElement.cloneNode(true);
      const codeEl = outerScaffold.querySelector('code');
      for (const childEl of codeEl.children) {
        if (isCodeAnnotation(childEl)) {
          childEl.remove();
        }
      }
      return codeEl.innerText;
    }
    const clipboard = new window.ClipboardJS('.code-copy-button:not([data-in-quarto-modal])', {
      text: getTextToCopy
    });
    clipboard.on('success', onCopySuccess);
    if (window.document.getElementById('quarto-embedded-source-code-modal')) {
      const clipboardModal = new window.ClipboardJS('.code-copy-button[data-in-quarto-modal]', {
        text: getTextToCopy,
        container: window.document.getElementById('quarto-embedded-source-code-modal')
      });
      clipboardModal.on('success', onCopySuccess);
    }
      var localhostRegex = new RegExp(/^(?:http|https):\/\/localhost\:?[0-9]*\//);
      var mailtoRegex = new RegExp(/^mailto:/);
        var filterRegex = new RegExp('/' + window.location.host + '/');
      var isInternal = (href) => {
          return filterRegex.test(href) || localhostRegex.test(href) || mailtoRegex.test(href);
      }
      // Inspect non-navigation links and adorn them if external
     var links = window.document.querySelectorAll('a[href]:not(.nav-link):not(.navbar-brand):not(.toc-action):not(.sidebar-link):not(.sidebar-item-toggle):not(.pagination-link):not(.no-external):not([aria-hidden]):not(.dropdown-item):not(.quarto-navigation-tool):not(.about-link)');
      for (var i=0; i<links.length; i++) {
        const link = links[i];
        if (!isInternal(link.href)) {
          // undo the damage that might have been done by quarto-nav.js in the case of
          // links that we want to consider external
          if (link.dataset.originalHref !== undefined) {
            link.href = link.dataset.originalHref;
          }
        }
      }
    function tippyHover(el, contentFn, onTriggerFn, onUntriggerFn) {
      const config = {
        allowHTML: true,
        maxWidth: 500,
        delay: 100,
        arrow: false,
        appendTo: function(el) {
            return el.parentElement;
        },
        interactive: true,
        interactiveBorder: 10,
        theme: 'quarto',
        placement: 'bottom-start',
      };
      if (contentFn) {
        config.content = contentFn;
      }
      if (onTriggerFn) {
        config.onTrigger = onTriggerFn;
      }
      if (onUntriggerFn) {
        config.onUntrigger = onUntriggerFn;
      }
      window.tippy(el, config); 
    }
    const noterefs = window.document.querySelectorAll('a[role="doc-noteref"]');
    for (var i=0; i<noterefs.length; i++) {
      const ref = noterefs[i];
      tippyHover(ref, function() {
        // use id or data attribute instead here
        let href = ref.getAttribute('data-footnote-href') || ref.getAttribute('href');
        try { href = new URL(href).hash; } catch {}
        const id = href.replace(/^#\/?/, "");
        const note = window.document.getElementById(id);
        if (note) {
          return note.innerHTML;
        } else {
          return "";
        }
      });
    }
    const xrefs = window.document.querySelectorAll('a.quarto-xref');
    const processXRef = (id, note) => {
      // Strip column container classes
      const stripColumnClz = (el) => {
        el.classList.remove("page-full", "page-columns");
        if (el.children) {
          for (const child of el.children) {
            stripColumnClz(child);
          }
        }
      }
      stripColumnClz(note)
      if (id === null || id.startsWith('sec-')) {
        // Special case sections, only their first couple elements
        const container = document.createElement("div");
        if (note.children && note.children.length > 2) {
          container.appendChild(note.children[0].cloneNode(true));
          for (let i = 1; i < note.children.length; i++) {
            const child = note.children[i];
            if (child.tagName === "P" && child.innerText === "") {
              continue;
            } else {
              container.appendChild(child.cloneNode(true));
              break;
            }
          }
          if (window.Quarto?.typesetMath) {
            window.Quarto.typesetMath(container);
          }
          return container.innerHTML
        } else {
          if (window.Quarto?.typesetMath) {
            window.Quarto.typesetMath(note);
          }
          return note.innerHTML;
        }
      } else {
        // Remove any anchor links if they are present
        const anchorLink = note.querySelector('a.anchorjs-link');
        if (anchorLink) {
          anchorLink.remove();
        }
        if (window.Quarto?.typesetMath) {
          window.Quarto.typesetMath(note);
        }
        if (note.classList.contains("callout")) {
          return note.outerHTML;
        } else {
          return note.innerHTML;
        }
      }
    }
    for (var i=0; i<xrefs.length; i++) {
      const xref = xrefs[i];
      tippyHover(xref, undefined, function(instance) {
        instance.disable();
        let url = xref.getAttribute('href');
        let hash = undefined; 
        if (url.startsWith('#')) {
          hash = url;
        } else {
          try { hash = new URL(url).hash; } catch {}
        }
        if (hash) {
          const id = hash.replace(/^#\/?/, "");
          const note = window.document.getElementById(id);
          if (note !== null) {
            try {
              const html = processXRef(id, note.cloneNode(true));
              instance.setContent(html);
            } finally {
              instance.enable();
              instance.show();
            }
          } else {
            // See if we can fetch this
            fetch(url.split('#')[0])
            .then(res => res.text())
            .then(html => {
              const parser = new DOMParser();
              const htmlDoc = parser.parseFromString(html, "text/html");
              const note = htmlDoc.getElementById(id);
              if (note !== null) {
                const html = processXRef(id, note);
                instance.setContent(html);
              } 
            }).finally(() => {
              instance.enable();
              instance.show();
            });
          }
        } else {
          // See if we can fetch a full url (with no hash to target)
          // This is a special case and we should probably do some content thinning / targeting
          fetch(url)
          .then(res => res.text())
          .then(html => {
            const parser = new DOMParser();
            const htmlDoc = parser.parseFromString(html, "text/html");
            const note = htmlDoc.querySelector('main.content');
            if (note !== null) {
              // This should only happen for chapter cross references
              // (since there is no id in the URL)
              // remove the first header
              if (note.children.length > 0 && note.children[0].tagName === "HEADER") {
                note.children[0].remove();
              }
              const html = processXRef(null, note);
              instance.setContent(html);
            } 
          }).finally(() => {
            instance.enable();
            instance.show();
          });
        }
      }, function(instance) {
      });
    }
        let selectedAnnoteEl;
        const selectorForAnnotation = ( cell, annotation) => {
          let cellAttr = 'data-code-cell="' + cell + '"';
          let lineAttr = 'data-code-annotation="' +  annotation + '"';
          const selector = 'span[' + cellAttr + '][' + lineAttr + ']';
          return selector;
        }
        const selectCodeLines = (annoteEl) => {
          const doc = window.document;
          const targetCell = annoteEl.getAttribute("data-target-cell");
          const targetAnnotation = annoteEl.getAttribute("data-target-annotation");
          const annoteSpan = window.document.querySelector(selectorForAnnotation(targetCell, targetAnnotation));
          const lines = annoteSpan.getAttribute("data-code-lines").split(",");
          const lineIds = lines.map((line) => {
            return targetCell + "-" + line;
          })
          let top = null;
          let height = null;
          let parent = null;
          if (lineIds.length > 0) {
              //compute the position of the single el (top and bottom and make a div)
              const el = window.document.getElementById(lineIds[0]);
              top = el.offsetTop;
              height = el.offsetHeight;
              parent = el.parentElement.parentElement;
            if (lineIds.length > 1) {
              const lastEl = window.document.getElementById(lineIds[lineIds.length - 1]);
              const bottom = lastEl.offsetTop + lastEl.offsetHeight;
              height = bottom - top;
            }
            if (top !== null && height !== null && parent !== null) {
              // cook up a div (if necessary) and position it 
              let div = window.document.getElementById("code-annotation-line-highlight");
              if (div === null) {
                div = window.document.createElement("div");
                div.setAttribute("id", "code-annotation-line-highlight");
                div.style.position = 'absolute';
                parent.appendChild(div);
              }
              div.style.top = top - 2 + "px";
              div.style.height = height + 4 + "px";
              div.style.left = 0;
              let gutterDiv = window.document.getElementById("code-annotation-line-highlight-gutter");
              if (gutterDiv === null) {
                gutterDiv = window.document.createElement("div");
                gutterDiv.setAttribute("id", "code-annotation-line-highlight-gutter");
                gutterDiv.style.position = 'absolute';
                const codeCell = window.document.getElementById(targetCell);
                const gutter = codeCell.querySelector('.code-annotation-gutter');
                gutter.appendChild(gutterDiv);
              }
              gutterDiv.style.top = top - 2 + "px";
              gutterDiv.style.height = height + 4 + "px";
            }
            selectedAnnoteEl = annoteEl;
          }
        };
        const unselectCodeLines = () => {
          const elementsIds = ["code-annotation-line-highlight", "code-annotation-line-highlight-gutter"];
          elementsIds.forEach((elId) => {
            const div = window.document.getElementById(elId);
            if (div) {
              div.remove();
            }
          });
          selectedAnnoteEl = undefined;
        };
          // Handle positioning of the toggle
      window.addEventListener(
        "resize",
        throttle(() => {
          elRect = undefined;
          if (selectedAnnoteEl) {
            selectCodeLines(selectedAnnoteEl);
          }
        }, 10)
      );
      function throttle(fn, ms) {
      let throttle = false;
      let timer;
        return (...args) => {
          if(!throttle) { // first call gets through
              fn.apply(this, args);
              throttle = true;
          } else { // all the others get throttled
              if(timer) clearTimeout(timer); // cancel #2
              timer = setTimeout(() => {
                fn.apply(this, args);
                timer = throttle = false;
              }, ms);
          }
        };
      }
        // Attach click handler to the DT
        const annoteDls = window.document.querySelectorAll('dt[data-target-cell]');
        for (const annoteDlNode of annoteDls) {
          annoteDlNode.addEventListener('click', (event) => {
            const clickedEl = event.target;
            if (clickedEl !== selectedAnnoteEl) {
              unselectCodeLines();
              const activeEl = window.document.querySelector('dt[data-target-cell].code-annotation-active');
              if (activeEl) {
                activeEl.classList.remove('code-annotation-active');
              }
              selectCodeLines(clickedEl);
              clickedEl.classList.add('code-annotation-active');
            } else {
              // Unselect the line
              unselectCodeLines();
              clickedEl.classList.remove('code-annotation-active');
            }
          });
        }
    const findCites = (el) => {
      const parentEl = el.parentElement;
      if (parentEl) {
        const cites = parentEl.dataset.cites;
        if (cites) {
          return {
            el,
            cites: cites.split(' ')
          };
        } else {
          return findCites(el.parentElement)
        }
      } else {
        return undefined;
      }
    };
    var bibliorefs = window.document.querySelectorAll('a[role="doc-biblioref"]');
    for (var i=0; i<bibliorefs.length; i++) {
      const ref = bibliorefs[i];
      const citeInfo = findCites(ref);
      if (citeInfo) {
        tippyHover(citeInfo.el, function() {
          var popup = window.document.createElement('div');
          citeInfo.cites.forEach(function(cite) {
            var citeDiv = window.document.createElement('div');
            citeDiv.classList.add('hanging-indent');
            citeDiv.classList.add('csl-entry');
            var biblioDiv = window.document.getElementById('ref-' + cite);
            if (biblioDiv) {
              citeDiv.innerHTML = biblioDiv.innerHTML;
            }
            popup.appendChild(citeDiv);
          });
          return popup.innerHTML;
        });
      }
    }
  });
  </script>
</div> <!-- /content -->




</body></html>

[mcanouil]

WGLMakie needs a running Julia server to render the figure and uses "Bonito" by default as documented.
Julia worker is closed upon rendering, so you need to change your Makie configuration to inline the figure instead of relying on a server.

• https://docs.makie.org/stable/explanations/backends/wglmakie.html

edit: One way of doing the above

---
title: "WGLMakie and Quarto test"
format: html
engine: julia
---

```{julia}
using Pkg
Pkg.add("WGLMakie")
Pkg.add("Bonito")
using WGLMakie, Bonito
Page(exportable=true, offline=true)

fig, ax, sc = scatter(rand(5), rand(5))
fig
```

```{julia}
display(fig)
```

[kescobo]

Oh yeah, that works! Could maybe be marked as the answer I think? This was what the OP tried originally and it didn't work at the time, but I can confirm it seems to work now

[mcanouil]

@kescobo

Important

Accessibility: To improve accessibility, please add alternative text to your screenshots. This helps all users, including those using screen readers, to understand the context of the images. A brief description can make a big difference! See Good Alt Text, Bad Alt Text — Making Your Content Perceivable.