Async code block remains stuck in a loading state

Feedback
1

https://observablehq.com/@pearmini/genuary-2026-11

In this notebook, the first code block runs successfully in the old version of Observable, but remains stuck in a loading state in the new version until I explicitly click the Run button. I’m wondering what might be causing this. Thanks!

2

Hmm. It seems to be stuck inside await shiki.codeToHtml.

Shiki recommends you break this into two steps. An async part to create the highlighter, and then a sync part to use the highlighter. You can declare the highlighter in another cell like so:

highlighter = shiki.createHighlighter({
  langs: ["js"],
  themes: ["one-dark-pro"]
})

Then you can change your pre function to be synchronous by using highlighter.codeToHtml instead of the shorthand shiki.codeToHtml:

function pre(code) {
  const h = highlighter.codeToHtml(code, {
    lang: "js",
    theme: "one-dark-pro"
  });
  return html`<div style="display:flex;justify-content:center;background:#000;font-family:${f.family};font-size:20px;line-height:1em">${h}</div>`;
}

Fork: https://observablehq.com/d/a689c1c18ef23b3b