Fix highlighting with Shiki

minijinja/base.jinja

@@ -24,7 +24,6 @@
       <link rel='stylesheet' href='/static/css/syntect.css?v={{ GIT_REVISION }}'>
       <link rel='alternate' href='/feeds.atom' type='application/atom+xml' title='QuanWeb Atom feeds'>
       <link rel='alternate' href='/feeds.json' type='application/feed+json' title='QuanWeb JSONs feeds'>
-      <link rel='preload' href='/static/js/edgeql.json' as='script'>
       <style>
         [x-cloak] {
           display: none;

static/css/custom.css

@@ -84,3 +84,7 @@ article .entry-content.front h2 {
   font-size: 0.75rem;
   line-height: 1rem;
 }
+
+.q-need-highlight .shiki {
+  overflow-y: scroll;
+}

static/js/highlight-app.js

@@ -1,5 +1,31 @@
 import { createHighlighter } from 'https://esm.sh/[email protected]'
 
+var edgeQlGrammar = null
+
+fetch('/static/js/edgeql.json').then(res => res.json()).then(o => {
+  edgeQlGrammar = o
+})
+
+const LANGS = [
+  'html', 'css', 'js', 'typescript', 'vue', 'vue-html',
+  'python', 'rust', 'shellscript', 'shellsession', 
+  'c', 'cpp', 'go', 'latex', 'lua', 'json', 'plsql', 'sql', 
+  'desktop', 'docker', 'regexp', 'rst', 'md',  'toml', 'fluent', 'jinja',
+  'ssh-config', 'nginx', 'systemd',
+]
+
+const taskShiki = createHighlighter({
+  langs: LANGS,
+  langAlias: {
+    edgeql: 'EdgeQL',
+  },
+  themes: ['one-dark-pro']
+})
+
+function delay() {
+  return new Promise(resolve => setTimeout(resolve, 100))
+}
+
 
 // Our old <code> element will be replaced by the one created by Shiki,
 // we need to keep old class names and copy to the new one.
@@ -47,18 +73,20 @@ document.addEventListener('alpine:init', () => {
       const lang = this.lang
       const classes = this.origClasses
       const opts = getShikiOpt(lang, classes, this.startLine)
-      const highlighter = await createHighlighter({
-        langs: ['html', 'css', 'js', 'typescript', 'python', 'rust'],
-        langAlias: {
-          elm: 'EdgeQL',
-        },
-        themes: ['one-dark-pro']
-      })
-
-      const raw = await fetch('/static/js/edgeql.json')
-      const edgeQl = await raw.json()
-
-      await highlighter.loadLanguage(edgeQl)
+      const highlighter = await taskShiki
+      if (!edgeQlGrammar) {
+        for (let i = 0; i < 5; i++) {
+          await delay()
+          if (edgeQlGrammar) {
+            break
+          }
+        }        
+      }
+      if (edgeQlGrammar) {
+        await highlighter.loadLanguage(edgeQlGrammar)
+      } else {
+        console.warn('EdgeQL grammar is not available!')
+      }
       const html = await highlighter.codeToHtml(this.code, opts)
       return html
     }