slidev-theme-tud-db 0.0.7 → 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.7",
+  "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
@@ -24,7 +26,7 @@ const MARK = /⟦([\w-]+):([^⟧\n]*)⟧/g
 
 interface Decoration { start: number, end: number, properties: Record<string, string> }
 
-const codeMarks = {
+export const codeMarks = {
   name: 'tud-db:code-marks',
   preprocess(code: string, options: { decorations?: Decoration[] }) {
     if (!code.includes('⟦'))
@@ -46,10 +48,82 @@ const codeMarks = {
   },
 }
 
-export default () => ({
-  themes: {
-    light: 'catppuccin-latte',
-    dark: 'catppuccin-mocha',
+// 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' } },
   },
-  transformers: [codeMarks],
-})
+  { 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' },
+]
+
+// 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 }
+
+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 } },
+    ],
+  }
+}
+
+/** 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 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

@@ -58,14 +58,21 @@
 
 /* Inline code "pills": slimmer so they don't bloat line height in bullets.
    (Slidev default is ~2px 6px / 0.9em.) Fenced code (pre > code) is untouched. */
-.slidev-layout.db-default :not(pre) > code {
+.slidev-layout.db-default :not(pre) > code,
+.slidev-layout :not(pre) > code,
+code.db-inline-code {
   padding: 1px 0;     /* no horizontal padding by default so it sits flush with text */
   font-size: 0.85em;
+  font-weight: 400;   /* regular weight — override Slidev's thin 300 default */
   line-height: 1;
   background: transparent !important; /* transparent by default */
+  font-variant-ligatures: none;
+  white-space: pre-wrap;
 }
 /* Opt-in faint background for inline code */
-.slidev-layout.db-default :not(pre) > code.with-bg {
+.slidev-layout.db-default :not(pre) > code.with-bg,
+.slidev-layout :not(pre) > code.with-bg,
+code.db-inline-code.with-bg {
   padding: 1px 4px;   /* add horizontal padding back for the background box */
   background: rgba(0, 0, 0, 0.03) !important;
 }
@@ -199,7 +206,7 @@
 }
 .slidev-layout.db-default .db-takeaway__body p { margin: 0; }
 .slidev-layout.db-default .db-takeaway__body strong { font-weight: 700; }
-.slidev-layout.db-default .db-takeaway__body code { font-weight: 500; }
+.slidev-layout.db-default .db-takeaway__body code { font-weight: 400; }
 
 /* Fenced code blocks: box only as wide as its content, not full slide width.
    fit-content on the WRAPPER so an optional caption + the code share one width.
@@ -208,6 +215,14 @@
   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,5 +1,6 @@
 import { createHighlighter } from 'shiki'
-import { setupTableCaptions } from './markdown'
+import { setupTableCaptions } from './markdown.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.
@@ -7,19 +8,40 @@ import { setupTableCaptions } from './markdown'
 // 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).
 //
-// A deck can still override THEME, LANGS, or the rule by defining its own
-// vite.config.ts (the deck's config merges last and wins).
+// 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.
 //
-// NB: no `import ... from 'vite'` here on purpose — `defineConfig` is only a
-// type helper, and importing it would require `vite` to be resolvable from this
-// file's location (it isn't, when the theme is loaded from its own directory).
-const THEME = 'catppuccin-latte'
-const LANGS = ['json', 'yaml', 'sql', 'c', 'cpp', 'python']
+// 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 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/
+const AUTO_SQL_OPS = /^(?:<=>|<>|<=|>=|!=|=|<|>)$/
+const CALL = /^((?:[a-z_]\w*\.)*)([a-z_]\w*)(\s*\(.*\))$/i
+
+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: {
@@ -29,17 +51,36 @@ export default async () => {
           setupTableCaptions(md)
           const fallback = md.renderer.rules.code_inline
           md.renderer.rules.code_inline = (tokens: any[], idx: number, options: any, env: any, self: any) => {
-            const m = String(tokens[idx].content).match(/^\{([\w-]+)\}\s+([\s\S]+)$/)
-            if (m && highlighter.getLoadedLanguages().includes(m[1])) {
+            const raw = String(tokens[idx].content)
+            const m = raw.match(/^\{([\w-]+)\}\s+([\s\S]+)$/)
+            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
+
+            // 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)) {
               const inner = highlighter
-                .codeToHtml(m[2], { lang: m[1], theme: THEME })
+                .codeToHtml(code, { lang, theme: THEME })
                 .replace(/^<pre[^>]*><code[^>]*>/, '')
                 .replace(/<\/code><\/pre>\s*$/, '')
-              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