slidev-theme-tud-db 0.0.8 → 0.0.9

package/README.md

@@ -53,9 +53,11 @@ cp -r node_modules/slidev-theme-db/skills/slidev-theme-db .claude/skills/
 - `components/DbFrame.vue` — shared chrome (logo, footer, padding).
 - `layouts/` — `cover`, `default`, `two-cols-header`, `two-cols-grid` (wrap `DbFrame`).
 - `styles/db-theme.css` — tokens, typography, lists, tables (keyed on `.db-default`).
-- `setup/shiki.ts` (fenced) and the `THEME` in `vite.config.ts` (inline `{lang}`) —
-  the **two** highlighters; keep them in sync (both `catppuccin-latte`).
-  `setup/shiki.ts` also holds the transformer behind `⟦name:text⟧` code marks
-  (spans a slide's timeline can recolour).
+- `setup/shiki.ts` — code highlighting: the SQL grammar (Shiki's, plus a few
+  rules) and the colour themes (catppuccin, upright, with SQL tweaks), built by
+  `highlighting()`. Fenced code uses them through Slidev; `vite.config.ts` uses
+  the same `highlighting()` for inline `{lang}` code, so the two never drift.
+  It also holds the transformer behind `⟦name:text⟧` code marks (spans a
+  slide's timeline can recolour).
 - Link the theme with `link:` (not `file:`), and **restart** the dev server after
   editing theme files (Vite doesn't hot-reload `node_modules`).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-theme-tud-db",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "type": "module",
   "description": "Slidev theme cloning the TU Dresden / Dresden Database Research Group PowerPoint template",
   "license": "GPL-3.0-or-later",

package/setup/shiki.ts

@@ -1,10 +1,12 @@
-// Default Shiki color scheme for fenced code blocks (```lang ... ```).
-// Matches the inline-code highlighter (see vite.config.ts) and the chair's
-// template, so inline and fenced code look the same.
+// Shiki setup for fenced code blocks (```lang ... ```) and magic-move blocks.
+// vite.config.ts highlights inline code with the same grammar and colours (see
+// `highlighting()` below), so inline and fenced code look the same.
 //
 // NB: no `import { defineShikiSetup } from '@slidev/types'` on purpose — it's
 // only a type helper, and Slidev calls this default export as `setup(ctx)`.
-// catppuccin-latte / -mocha are bundled with Shiki, so no extra deps needed.
+// The grammar and the colour themes are Shiki's own bundled ones, adjusted
+// below, so no extra deps are needed.
+import { bundledLanguages, bundledThemes } from 'shiki'
 
 // Code marks: wrap exact character ranges of a fenced block so a slide can
 // recolour that text, e.g. at a click. Inside the code, write ⟦name:text⟧: the
@@ -46,138 +48,82 @@ export const codeMarks = {
   },
 }
 
-const SQL_FUNCS = /^(COUNT|AVG|SUM|MIN|MAX|COALESCE|ROUND|ABS|CEIL|FLOOR|LENGTH|SUBSTRING|TRIM|UPPER|LOWER|CONCAT|NOW|DATE)$/i
-const SQL_CONSTANTS = /^(TRUE|FALSE|UNKNOWN|NULL)$/i
-const SQL_KEYWORDS = /^(EXPLAIN|ANALYZE)$/i
-const SQL_ALL = /^(TRUE|FALSE|UNKNOWN|NULL|EXPLAIN|ANALYZE|COUNT|AVG|SUM|MIN|MAX|COALESCE|ROUND|ABS|CEIL|FLOOR|LENGTH|SUBSTRING|TRIM|UPPER|LOWER|CONCAT|NOW|DATE)$/i
-const SQL_SPLIT = /\b(TRUE|FALSE|UNKNOWN|NULL|EXPLAIN|ANALYZE|COUNT|AVG|SUM|MIN|MAX|COALESCE|ROUND|ABS|CEIL|FLOOR|LENGTH|SUBSTRING|TRIM|UPPER|LOWER|CONCAT|NOW|DATE)\b/i
-
-function getSqlStyle(w: string) {
-  if (SQL_FUNCS.test(w)) return { color: '#1E66F5', light: '#1E66F5', dark: '#89B4FA' }
-  if (SQL_CONSTANTS.test(w)) return { color: '#FE640B', light: '#FE640B', dark: '#FAB387' }
-  return { color: '#8839EF', light: '#8839EF', dark: '#CBA6F7' }
-}
-
-export const sqlKeywords = {
-  name: 'tud-db:sql-keywords',
-  tokens(lines: any[]) {
-    if ((this as any).options?.lang !== 'sql') return
-    for (let l = 0; l < lines.length; l++) {
-      const line = lines[l]
-      const newTokens: any[] = []
-      for (const token of line) {
-        const trimmed = token.content.trim()
-        const upper = trimmed.toUpperCase()
-
-        // 0. Intercept numeric tokens -> light emerald green (#059669)
-        if (/^\d+(\.\d+)?$/.test(trimmed)) {
-          const leading = token.content.slice(0, token.content.indexOf(trimmed))
-          const trailing = token.content.slice(token.content.indexOf(trimmed) + trimmed.length)
-          if (leading) newTokens.push({ ...token, content: leading, fontStyle: 0, htmlStyle: { color: '#4C4F69', '--shiki-light': '#4C4F69', '--shiki-dark': '#CDD6F4' } })
-          newTokens.push({
-            ...token,
-            content: trimmed,
-            color: '#059669',
-            fontStyle: 0,
-            htmlStyle: { color: '#059669', '--shiki-light': '#059669', '--shiki-dark': '#34D399' },
-          })
-          if (trailing) newTokens.push({ ...token, content: trailing, fontStyle: 0, htmlStyle: { color: '#4C4F69', '--shiki-light': '#4C4F69', '--shiki-dark': '#CDD6F4' } })
-          continue
-        }
-
-        // 1. Intercept NULL if Shiki tagged it as keyword purple (including combined tokens like "IS NOT NULL")
-        if (/\bNULL\b/i.test(token.content)) {
-          const s = getSqlStyle('NULL')
-          const parts = token.content.split(/\b(NULL)\b/i)
-          let currOffset = token.offset
-          for (const part of parts) {
-            if (!part) continue
-            if (/^NULL$/i.test(part)) {
-              newTokens.push({
-                ...token,
-                content: part,
-                offset: currOffset,
-                color: s.color,
-                fontStyle: 0,
-                htmlStyle: { color: s.color, '--shiki-light': s.light, '--shiki-dark': s.dark },
-              })
-            }
-            else {
-              newTokens.push({ ...token, content: part, offset: currOffset })
-            }
-            currOffset += part.length
-          }
-          continue
-        }
+// SQL: Shiki's grammar, with a few rules added. Being grammar rules, they
+// apply only where SQL code is parsed, never inside comments or strings.
+//  - NULL, TRUE, FALSE and UNKNOWN are constants (the grammar knows only NULL,
+//    as a keyword, and reads `IS NOT NULL` as a single keyword: here the
+//    keyword part and the constant are told apart).
+//  - EXPLAIN and ANALYZE are keywords.
+//  - A name right before `(` is a function call: `ceil(x)`, `jsonb_agg(…)`;
+//    so are common function names on their own, as in an inline `AVG` (the
+//    grammar knows functions only before `(`).
+//    These rules come last, so the grammar's own reading of a word, such as
+//    the keyword in `IN (` or the type in `DECIMAL(10, 2)`, takes precedence.
+const CONSTANTS = 'NULL|TRUE|FALSE|UNKNOWN'
+const FUNCTIONS = 'COUNT|AVG|SUM|MIN|MAX|COALESCE|ROUND|ABS|CEIL|FLOOR|SUBSTRING|TRIM|UPPER|LOWER|CONCAT'
+const SQL_RULES_FIRST = [
+  {
+    match: `(?i:\\b(IS(?:\\s+NOT)?|NOT)\\s+(${CONSTANTS})\\b)`,
+    captures: { 1: { name: 'keyword.other.sql' }, 2: { name: 'constant.language.sql' } },
+  },
+  { match: `(?i:\\b(?:${CONSTANTS})\\b)`, name: 'constant.language.sql' },
+  { match: '(?i:\\b(?:EXPLAIN|ANALYZE)\\b)', name: 'keyword.other.sql' },
+]
+const SQL_RULES_LAST = [
+  { match: '\\b[A-Za-z_][A-Za-z0-9_]*(?=\\()', name: 'support.function.sql' },
+  { match: `(?i:\\b(?:${FUNCTIONS})\\b)`, name: 'support.function.sql' },
+]
 
-        // 2. Intercept function tokens (AVG, COUNT, COALESCE, etc.) -> upright blue
-        // and normalize misclassified identifiers (e.g. `movies` in `CREATE TABLE movies`) -> plain text upright
-        const hasItalic = token.fontStyle === 1
-          || token.htmlStyle?.['--shiki-light-font-style'] === 'italic'
-          || token.htmlStyle?.['--shiki-dark-font-style'] === 'italic'
-        const isBlue = (token.color?.toLowerCase() === '#1e66f5' || token.htmlStyle?.['--shiki-light']?.toLowerCase() === '#1e66f5')
-        if (hasItalic && isBlue) {
-          const s = SQL_ALL.test(trimmed)
-            ? getSqlStyle(trimmed)
-            : { color: '#4C4F69', light: '#4C4F69', dark: '#CDD6F4' }
-          const leading = token.content.slice(0, token.content.indexOf(trimmed))
-          const trailing = token.content.slice(token.content.indexOf(trimmed) + trimmed.length)
-          if (leading) newTokens.push({ ...token, content: leading, fontStyle: 0, htmlStyle: { color: '#4C4F69', '--shiki-light': '#4C4F69', '--shiki-dark': '#CDD6F4' } })
-          newTokens.push({
-            ...token,
-            content: trimmed,
-            color: s.color,
-            fontStyle: 0,
-            htmlStyle: { color: s.color, '--shiki-light': s.light, '--shiki-dark': s.dark },
-          })
-          if (trailing) newTokens.push({ ...token, content: trailing, fontStyle: 0, htmlStyle: { color: '#4C4F69', '--shiki-light': '#4C4F69', '--shiki-dark': '#CDD6F4' } })
-          continue
-        }
+// Colours: catppuccin-latte (light) and -mocha (dark), upright throughout (the
+// template's code has no italics; Shiki's catppuccin sets some, e.g. on
+// function names), with two SQL changes: numbers green, so that they differ
+// from the orange constants (catppuccin colours both orange); and the table
+// name after CREATE TABLE plain text, not a blue function name.
+interface ThemeRule { scope?: string | string[], settings: { foreground?: string, fontStyle?: string } }
+interface Theme { name: string, tokenColors?: ThemeRule[], [key: string]: unknown }
 
-        // 3. Intercept plain text tokens containing SQL words (TRUE, FALSE, UNKNOWN, EXPLAIN, ANALYZE, functions, etc.)
-        const lightColor = token.htmlStyle?.['--shiki-light'] || token.htmlStyle?.color || token.color
-        const isPlain = !lightColor || lightColor.toLowerCase() === '#4c4f69'
-        if (isPlain && SQL_SPLIT.test(token.content)) {
-          const parts = token.content.split(SQL_SPLIT)
-          let currOffset = token.offset
-          for (const part of parts) {
-            if (!part) continue
-            if (SQL_ALL.test(part)) {
-              const s = getSqlStyle(part)
-              newTokens.push({
-                ...token,
-                content: part,
-                offset: currOffset,
-                color: s.color,
-                fontStyle: 0,
-                htmlStyle: { color: s.color, '--shiki-light': s.light, '--shiki-dark': s.dark },
-              })
-            }
-            else {
-              newTokens.push({
-                ...token,
-                content: part,
-                offset: currOffset,
-                fontStyle: 0,
-                htmlStyle: { color: '#4C4F69', '--shiki-light': '#4C4F69', '--shiki-dark': '#CDD6F4' },
-              })
-            }
-            currOffset += part.length
-          }
-          continue
-        }
+function variant(base: Theme, name: string, c: { constant: string, number: string, text: string }): Theme {
+  const upright = (base.tokenColors ?? []).map((rule) => {
+    const style = rule.settings.fontStyle
+    if (!style?.includes('italic'))
+      return rule
+    return { ...rule, settings: { ...rule.settings, fontStyle: style.replace('italic', '').trim() } }
+  })
+  return {
+    ...base,
+    name,
+    tokenColors: [
+      ...upright,
+      { scope: 'constant.language.sql', settings: { foreground: c.constant } },
+      { scope: 'constant.numeric.sql', settings: { foreground: c.number } },
+      { scope: 'entity.name.function.sql', settings: { foreground: c.text } },
+    ],
+  }
+}
 
-        newTokens.push(token)
-      }
-      lines[l] = newTokens
+/** The theme's SQL grammar and its light and dark code colours (loaded once). */
+export const highlighting = (() => {
+  let loaded: Promise<{ sql: any, light: Theme, dark: Theme }> | undefined
+  return () => loaded ??= (async () => {
+    const [[sql], latte, mocha] = await Promise.all([
+      bundledLanguages.sql().then(m => m.default as any[]),
+      bundledThemes['catppuccin-latte']().then(m => m.default as unknown as Theme),
+      bundledThemes['catppuccin-mocha']().then(m => m.default as unknown as Theme),
+    ])
+    return {
+      sql: { ...sql, patterns: [...SQL_RULES_FIRST, ...sql.patterns, ...SQL_RULES_LAST] },
+      light: variant(latte, 'tud-db-light', { constant: '#fe640b', number: '#059669', text: '#4c4f69' }),
+      dark: variant(mocha, 'tud-db-dark', { constant: '#fab387', number: '#34d399', text: '#cdd6f4' }),
     }
-  },
-}
+  })()
+})()
 
-export default () => ({
-  themes: {
-    light: 'catppuccin-latte',
-    dark: 'catppuccin-mocha',
-  },
-  transformers: [codeMarks, sqlKeywords],
-})
+export default async () => {
+  const { sql, light, dark } = await highlighting()
+  return {
+    themes: { light, dark },
+    // replaces Shiki's `sql` with the extended grammar above
+    langs: [sql],
+    transformers: [codeMarks],
+  }
+}

package/styles/db-theme.css

@@ -215,6 +215,14 @@ code.db-inline-code.with-bg {
   width: fit-content;
   max-width: 100%;
 }
+/* Code that morphs to the next slide (data-morph, from the gsap addon): while
+   the morph animates its box from the other slide's size, the code can be
+   wider than the box for a moment, and Slidev's `overflow: auto` on code
+   blocks would flash a scrollbar. Let it overflow instead; it fits again once
+   the morph ends. */
+.slidev-layout [data-morph] .slidev-code {
+  overflow: visible;
+}
 /* Default to transparent background for multi-line blocks, overriding Shiki */
 .slidev-layout.db-default pre.slidev-code {
   background: transparent !important;

package/vite.config.ts

@@ -1,6 +1,6 @@
 import { createHighlighter } from 'shiki'
 import { setupTableCaptions } from './markdown.ts'
-import { sqlKeywords } from './setup/shiki.ts'
+import { highlighting } from './setup/shiki.ts'
 
 // Shipped WITH the theme: Slidev merges vite.config from every root (theme +
 // addons + deck), so installing this theme is enough — no need to copy a file.
@@ -8,26 +8,40 @@ import { sqlKeywords } from './setup/shiki.ts'
 // Inline code syntax highlighting. Write inline code as:  `{lang} the code`
 //   e.g.  `{json} {"a": 1}`
 // The leading `{lang}` token selects the language; everything after the first
-// space is highlighted with Shiki and rendered inside a normal inline <code>.
+// space is highlighted with Shiki and rendered inside a normal inline <code>,
+// with the same SQL grammar and colours as fenced code (setup/shiki.ts).
 //
-// Common SQL keywords/constants/functions (e.g. `NULL`, `TRUE`, `COUNT`) are
-// automatically detected and highlighted with the theme's SQL grammar.
+// Untagged inline code is highlighted too when it is clearly one of:
+//  - SQL: it has an UPPERCASE SQL word (`NULL`, `GROUP BY`, `TRUE AND UNKNOWN`)
+//    or is a lone comparison operator (`<>`, `<=>`). Uppercase only, so that
+//    code from other languages (`std::set`, `end()`, `{lines:true}`) stays plain.
+//  - a function call, `next()` or `child.next()`: the name in function blue.
 //
-// A deck can still override THEME, LANGS, or the rule by defining its own
+// A deck can still override LANGS or the rule by defining its own
 // vite.config.ts (the deck's config merges last and wins).
-const THEME = 'catppuccin-latte'
-const LANGS = ['json', 'yaml', 'sql', 'c', 'cpp', 'python']
+const LANGS = ['json', 'yaml', 'c', 'cpp', 'python']
 
-const AUTO_SQL = /\b(TRUE|FALSE|UNKNOWN|NULL|EXPLAIN|ANALYZE|COUNT|AVG|SUM|MIN|MAX|COALESCE|SELECT|FROM|WHERE|HAVING|GROUP\s+BY|ORDER\s+BY|JOIN|LEFT|RIGHT|INNER|OUTER|FULL|CROSS|ON|USING|LIMIT|OFFSET|UNION|INSERT|UPDATE|DELETE|CREATE|DROP|ALTER|TABLE|INTO|VALUES|SET|BETWEEN|IN|NOT|AND|OR|IS|LIKE|ILIKE|AS|CASE|WHEN|THEN|ELSE|END)\b/i
+const AUTO_SQL = /\b(?:TRUE|FALSE|UNKNOWN|NULL|EXPLAIN|ANALYZE|COUNT|AVG|SUM|MIN|MAX|COALESCE|SELECT|FROM|WHERE|HAVING|GROUP\s+BY|ORDER\s+BY|JOIN|LEFT|RIGHT|INNER|OUTER|FULL|CROSS|ON|USING|LIMIT|OFFSET|UNION|INSERT|UPDATE|DELETE|CREATE|DROP|ALTER|TABLE|INTO|VALUES|SET|BETWEEN|IN|NOT|AND|OR|IS|LIKE|ILIKE|AS|CASE|WHEN|THEN|ELSE|END)\b/
 const AUTO_SQL_OPS = /^(?:<=>|<>|<=|>=|!=|=|<|>)$/
+const CALL = /^((?:[a-z_]\w*\.)*)([a-z_]\w*)(\s*\(.*\))$/i
 
-function isAutoSql(code: string): boolean {
-  const trimmed = code.trim()
-  return AUTO_SQL_OPS.test(trimmed) || AUTO_SQL.test(trimmed)
+const escapeHtml = (s: string) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+
+// Vue compiles each slide as a template and condenses whitespace: it drops a
+// text node that is only spaces at the start or end of an element (Shiki's
+// span for a lone space), and shrinks runs of spaces to one. Protect exactly
+// those spaces with &nbsp;; every other space stays a normal one, so long
+// inline code can still wrap.
+function keepSpaces(html: string): string {
+  return html
+    .replace(/>( +)</g, (_m, sp: string) => `>${'&nbsp;'.repeat(sp.length)}<`)
+    .replace(/ {2,}/g, sp => `${'&nbsp;'.repeat(sp.length - 1)} `)
 }
 
 export default async () => {
-  const highlighter = await createHighlighter({ themes: [THEME], langs: LANGS })
+  const { sql, light } = await highlighting()
+  const highlighter = await createHighlighter({ themes: [light], langs: [...LANGS, sql] })
+  const THEME = light.name
 
   return {
     slidev: {
@@ -39,45 +53,34 @@ export default async () => {
           md.renderer.rules.code_inline = (tokens: any[], idx: number, options: any, env: any, self: any) => {
             const raw = String(tokens[idx].content)
             const m = raw.match(/^\{([\w-]+)\}\s+([\s\S]+)$/)
-            let lang = m ? m[1] : null
-            let code = m ? m[2] : raw
-
-            // Auto-detect common SQL keywords/constants when untagged
-            if (!lang && isAutoSql(code)) {
-              lang = 'sql'
-            }
+            const code = m ? m[2] : raw
+            const bare = code.trim()
+            const lang = m ? m[1] : (AUTO_SQL_OPS.test(bare) || AUTO_SQL.test(bare)) ? 'sql' : null
 
-            // Auto-detect function calls like `next()` or `child.next()` when untagged -> blue upright
-            const fnMatch = !lang && code.trim().match(/^((?:[a-zA-Z_]\w*\.)*)([a-zA-Z_]\w*)\s*(\(.*?\))$/)
-            if (fnMatch) {
-              const prefix = fnMatch[1]
-              const fnName = fnMatch[2]
-              const rest = fnMatch[3].replace(/ /g, '&nbsp;')
-              let inner = ''
-              if (prefix) {
-                inner += `<span style="color:#4C4F69;--shiki-light:#4C4F69;--shiki-dark:#CDD6F4">${prefix}</span>`
-              }
-              inner += `<span style="color:#1E66F5;--shiki-light:#1E66F5;--shiki-dark:#89B4FA">${fnName}</span>`
-              inner += `<span style="color:#7C7F93;--shiki-light:#7C7F93;--shiki-dark:#9399B2">${rest}</span>`
-              return `<code class="db-inline-code">${inner}</code>`
+            // untagged function call: the name in function blue, the rest in
+            // the colour of punctuation (as Shiki colours `()` in code)
+            const call = !lang && bare.match(CALL)
+            if (call) {
+              const [, prefix, name, rest] = call
+              const span = (color: string, text: string) => text ? `<span style="color:${color}">${escapeHtml(text)}</span>` : ''
+              const inner = span('#4C4F69', prefix) + span('#1E66F5', name) + span('#7C7F93', rest)
+              return `<code class="db-inline-code">${keepSpaces(inner)}</code>`
             }
 
             if (lang && highlighter.getLoadedLanguages().includes(lang)) {
-              let inner = highlighter
-                .codeToHtml(code, { lang, theme: THEME, transformers: [sqlKeywords] })
+              const inner = highlighter
+                .codeToHtml(code, { lang, theme: THEME })
                 .replace(/^<pre[^>]*><code[^>]*>/, '')
                 .replace(/<\/code><\/pre>\s*$/, '')
-
-              // Preserve all spaces across tokens so Vue's template compiler never condenses/strips them
-              inner = inner.replace(/<span([^>]*)>([^<]*)<\/span>/g, (_m, attrs, text) => {
-                return `<span${attrs}>${text.replace(/ /g, '&nbsp;')}</span>`
-              })
-
-              return `<code class="db-inline-code">${inner}</code>`
+              return `<code class="db-inline-code">${keepSpaces(inner)}</code>`
             }
-            return fallback
+            // plain inline code: unhighlighted, but its spaces kept too. (Slidev
+            // renders markdown asynchronously, so the default rule may return
+            // a promise of the HTML.)
+            const plain = fallback
               ? fallback(tokens, idx, options, env, self)
               : self.renderToken(tokens, idx, options)
+            return typeof plain === 'string' ? keepSpaces(plain) : Promise.resolve(plain).then(keepSpaces)
           }
 
           // ASCII arrows -> unicode, in plain TEXT only. Code spans/blocks are