slidev-theme-tud-db 0.0.6 → 0.0.8

package/README.md

@@ -29,7 +29,7 @@ pnpm dev
 
 No `addons:` line needed — the theme enables `slidev-addon-gsap` via its
 defaults, so `import { useTl } from 'slidev-addon-gsap'` works in any slide. The
-theme also sets `canvasWidth: 960` (1px == 1pt), Noto Sans, light scheme, and
+theme also sets `canvasWidth: 960` (the 720pt PowerPoint slide, so 1pt == 4/3 px), Noto Sans, light scheme, and
 Comark on; override any in your own headmatter.
 
 ## Example
@@ -55,5 +55,7 @@ cp -r node_modules/slidev-theme-db/skills/slidev-theme-db .claude/skills/
 - `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).
 - Link the theme with `link:` (not `file:`), and **restart** the dev server after
   editing theme files (Vite doesn't hot-reload `node_modules`).

package/components/DbFrame.vue

@@ -11,7 +11,8 @@ const props = defineProps({
     class="slidev-layout default db-default relative"
     :style="props.codeSize ? { '--slidev-code-font-size': props.codeSize } : undefined"
   >
-    <div class="db-default__body px-[30px] py-[33.5px]">
+    <!-- top padding puts the title's baseline at 41.9pt, as in the template -->
+    <div class="db-default__body px-[30px] pt-[26.5px] pb-[33.5px]">
       <slot />
     </div>
   </div>

package/global-bottom.vue

@@ -42,7 +42,7 @@ const logos = computed(() => slideLogos[$nav.value.currentPage] ?? {})
       class="db-footer absolute inset-x-0 bottom-0 h-[40px] px-[30px] flex items-center justify-between bg-[var(--db-footer-bg)] pointer-events-auto transition-opacity duration-500"
     >
       <img class="h-[25px]" :src="tudBlack" alt="TU Dresden" />
-      <span class="text-[12px] text-[var(--db-text)]">
+      <span class="db-footer__page">
         <span class="font-bold">{{ $nav.currentPage }}</span>
         <template v-if="$nav.clicksTotal > 0">
           <span class="text-[0.7em]">.{{ $nav.clicks + 1 }}</span>

package/layouts/cover.vue

@@ -21,12 +21,12 @@ useLogo({ ddrg: 'white', tud: true })
 
 <style scoped>
 .db-cover__title :deep(h1) {
-  @apply text-4xl! font-700;
+  @apply font-700 leading-10;
+  font-size: var(--db-fs-cover-title) !important;
 }
 .db-cover__title :deep(p) {
-  @apply absolute top-[95px] m-0 text-md;
-  /* margin: 16px 0 0; */
-  /* font-size: 15px; */
+  @apply absolute top-[95px] m-0;
+  font-size: var(--db-fs-subtitle);
   color: var(--db-text-soft);
 }
 </style>

package/layouts/section-num.vue

@@ -60,10 +60,12 @@ const num = computed(() => {
 
 <style scoped>
 .db-cover__title :deep(h1) {
-  @apply text-4xl! font-700 text-[var(--db-heading-blue)];
+  @apply font-700 leading-10 text-[var(--db-heading-blue)];
+  font-size: var(--db-fs-cover-title) !important;
 }
 .db-cover__title :deep(p) {
-  @apply absolute top-[95px] m-0 text-md;
+  @apply absolute top-[95px] m-0;
+  font-size: var(--db-fs-subtitle);
   color: var(--db-text-soft);
 }
 </style>

package/layouts/section.vue

@@ -21,12 +21,12 @@ useLogo({ ddrg: 'color', footer: true })
 
 <style scoped>
 .db-cover__title :deep(h1) {
-  @apply text-4xl! font-700 text-[var(--db-heading-blue)];
+  @apply font-700 leading-10 text-[var(--db-heading-blue)];
+  font-size: var(--db-fs-section-title) !important;
 }
 .db-cover__title :deep(p) {
-  @apply absolute top-[95px] m-0 text-md;
-  /* margin: 16px 0 0; */
-  /* font-size: 15px; */
+  @apply absolute top-[95px] m-0;
+  font-size: var(--db-fs-subtitle);
   color: var(--db-text-soft);
 }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-theme-tud-db",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "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

@@ -5,9 +5,179 @@
 // 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.
+
+// 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
+// markers are removed and `text` is wrapped in <span class="code-mark mark-name">.
+//
+//   WHERE salary > ⟦paren:(⟧
+//
+// A mark looks like the code around it until something recolours it, typically
+// a gsap timeline at a click. A mark can span several syntax-coloured tokens,
+// so recolour the tokens inside it too:
+//
+//   tl.to('.mark-paren, .mark-paren span', { color: '#f9c611' })
+//
+// A mark must stay within one line. Magic-move blocks don't run Shiki
+// transformers, so marks only work in plain fenced blocks.
+const MARK = /⟦([\w-]+):([^⟧\n]*)⟧/g
+
+interface Decoration { start: number, end: number, properties: Record<string, string> }
+
+export const codeMarks = {
+  name: 'tud-db:code-marks',
+  preprocess(code: string, options: { decorations?: Decoration[] }) {
+    if (!code.includes('⟦'))
+      return
+    const marks: Decoration[] = []
+    let out = ''
+    let last = 0
+    for (const m of code.matchAll(MARK)) {
+      out += code.slice(last, m.index)
+      const start = out.length
+      out += m[2]
+      marks.push({ start, end: out.length, properties: { class: `code-mark mark-${m[1]}` } })
+      last = m.index! + m[0].length
+    }
+    out += code.slice(last)
+    // Shiki reads the decorations from these options when it renders
+    options.decorations = [...(options.decorations ?? []), ...marks]
+    return out
+  },
+}
+
+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
+        }
+
+        // 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
+        }
+
+        // 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
+        }
+
+        newTokens.push(token)
+      }
+      lines[l] = newTokens
+    }
+  },
+}
+
 export default () => ({
   themes: {
     light: 'catppuccin-latte',
     dark: 'catppuccin-mocha',
   },
+  transformers: [codeMarks, sqlKeywords],
 })

package/styles/db-theme.css

@@ -20,6 +20,21 @@
   --db-table-stripe: #dbdbdb; /* zebra-striped table rows */
   --db-table-rule: #b9b9b9;   /* table header/footer rule lines */
 
+  /* Type scale, in PowerPoint points. The template slide is 720×405pt but the
+     theme renders it on Slidev's 960×540px canvas, so 1pt == 4/3 px — never
+     write a pt value as px. Sizes measured from resource/template.pdf. */
+  --db-pt: calc(4px / 3);
+  --db-fs-cover-title: calc(28 * var(--db-pt));   /* cover / section-num title */
+  --db-fs-section-title: calc(24 * var(--db-pt)); /* section title */
+  --db-fs-subtitle: calc(14 * var(--db-pt));      /* cover / section subtitle */
+  --db-fs-title: calc(22 * var(--db-pt));         /* content slide title (h1) */
+  --db-fs-heading: calc(15 * var(--db-pt));       /* blue sub-header (h2/h3) */
+  --db-fs-body: calc(13 * var(--db-pt));          /* body text, 1st-level bullets */
+  --db-fs-small: calc(12 * var(--db-pt));         /* 2nd-level bullets, page number */
+  --db-fs-code: calc(11 * var(--db-pt));          /* code blocks */
+  --db-fs-caption: calc(11 * var(--db-pt));       /* table / code captions */
+  --db-fs-table: calc(10 * var(--db-pt));         /* table cells */
+
   /* Slidev theme variables */
   --slidev-theme-primary: var(--db-accent3);
 }
@@ -43,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;
 }
@@ -59,27 +81,36 @@
   color: var(--db-accent3);
 }
 
-/* Content slides ("Titel und Inhalt").
- * Canvas is 720px wide (== 720pt real slide), so px values below equal PowerPoint pt. */
+/* Content slides ("Titel und Inhalt"). Font sizes come from the pt type scale
+ * on :root; spacing below is in canvas px, chosen so the baselines land where
+ * resource/template.pdf has them: title 41.9pt, first sub-header 92.5pt, then
+ * bullets every 18pt, and 27.9pt from a bullet to the next sub-header. (Noto
+ * Sans puts the baseline 0.388em below the middle of its line box.) */
 .slidev-layout.db-default {
-  @apply text-md p-0;
+  font-size: var(--db-fs-body);
+  padding: 0;
 }
 .slidev-layout.db-default h1 {
   color: var(--db-text-soft); /* black/gray page heading */
-  @apply text-3xl mb-[46px]; /* gap to first sub-header (~46pt in template) */
+  font-size: var(--db-fs-title);
+  line-height: 2.25rem;
+  margin-bottom: 39px;        /* gap to first sub-header (baseline at 92.5pt) */
 }
 .slidev-layout.db-default h2,
 .slidev-layout.db-default h3 {
   color: var(--db-heading-blue); /* blue sub-headers */
-  @apply text-xl mt-[45px]; /* space ABOVE a sub-header, whatever precedes it
-                              (bullet list, code block, paragraph, …) */
+  font-size: var(--db-fs-heading);
+  line-height: 1.75rem;
+  margin-top: 11px;              /* space ABOVE a sub-header, whatever precedes it
+                                    (bullet list, code block, paragraph, …);
+                                    27.9pt baseline-to-baseline after a bullet */
 }
 /* …except a sub-header that is the FIRST content of its area (right under the
    page title, or the top of a column / grid cell) — the title's margin-bottom
    or the grid gap already provides that separation.
    This is wrap-proof: a section wrapped in a <div> (e.g. a GSAP animation
    anchor) is still treated as "top" when its wrapper is the first child, but a
-   wrapped section that FOLLOWS other content keeps the 24px gap. So adding a
+   wrapped section that FOLLOWS other content keeps its top gap. So adding a
    wrapper div later does NOT collapse the spacing. (default layout: h1 is a
    sibling of the content; two-cols-header: .db-grid__col; two-cols-grid:
    .db-rowgrid cells.) */
@@ -105,7 +136,7 @@
 .slidev-layout.db-default ul ul,
 .slidev-layout.db-default ol ol {
   margin-left: 0;        /* 2nd-level marker aligns with 1st-level text (no extra indent) */
-  font-size: 12px;       /* 2nd-level text a touch smaller (12pt vs 13pt) */
+  font-size: var(--db-fs-small); /* 2nd-level text a touch smaller (12pt vs 13pt) */
 }
 .slidev-layout.db-default ul ul { list-style-type: square; }
 /* Tight vertical rhythm (theme defaults to ~1.8 line-height) */
@@ -175,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.
@@ -192,24 +223,39 @@
 .slidev-layout.db-default .with-bg pre.slidev-code {
   background: rgba(0, 0, 0, 0.03) !important;
 }
-/* Code sizing (Slidev defaults: 12px / 18px / 8px). Slightly smaller font and
-   tighter vertical padding so the box hugs the code top and bottom. */
+/* Code sizing (Slidev defaults: 12px / 18px / 8px). 11pt like the template's
+   listings, with tighter vertical padding so the box hugs the code top and bottom.
+   No left padding: without a background box, the code text lines up with the
+   text, captions and tables around it, as in the template. A .with-bg box gets
+   its inset back. */
 .slidev-layout.db-default {
-  --slidev-code-font-size: 11px;
+  --slidev-code-font-size: var(--db-fs-code);
   --slidev-code-line-height: 1.3;
+  --slidev-code-padding: 4px 10px 4px 0;
+}
+.slidev-layout.db-default .with-bg {
   --slidev-code-padding: 4px 10px;
 }
+/* No programming ligatures: Fira Code would draw <> as a diamond and <=, >=,
+   != as ≤, ≥, ≠, which readers then can't type. Code shows the characters
+   as written. (The theme's --> arrows in prose are a text replacement, not a
+   ligature, so they are unaffected.) */
+.slidev-layout code,
+.slidev-layout pre {
+  font-variant-ligatures: none;
+}
 
 /* Line numbers (```lang {lines:true}```): tighten the gutter. Slidev's defaults
    are a wide 24px gap between the number and the code, plus the block's 10px
    left padding before the number. Both are scoped to line-numbered blocks so
    plain code blocks keep their normal padding. */
 .slidev-layout.db-default .slidev-code-line-numbers .slidev-code,
-.slidev-layout.db-default .shiki-magic-move-container.slidev-code {
+.slidev-layout.db-default .shiki-magic-move-container.slidev-code:has(.shiki-magic-move-line-number) {
   /* override the padding *variable* (Slidev applies padding via it, which beats
      a plain padding-left here). top right bottom left — only the left shrinks.
      The Magic Move container isn't wrapped in .slidev-code-line-numbers, so it
-     needs the same override to keep its gutter rule aligned with plain blocks. */
+     needs the same override to keep its gutter rule aligned with plain blocks;
+     one without line numbers keeps the plain blocks' zero inset. */
   --slidev-code-padding: 4px 10px 4px 6px;   /* less space left of the numbers (was 10px) */
 }
 .slidev-layout.db-default .slidev-code-line-numbers .slidev-code code .line::before {
@@ -251,13 +297,16 @@
 /* Optional caption above a code block.
    Authoring:  ```python [What this snippet does]  */
 .slidev-layout.db-default .slidev-code-block-title {
-  padding: 3px 10px;
+  padding: 3px 0;                 /* flush with the code text below (see above) */
   background: transparent;        /* drop Slidev's heavy gray title bar */
-  font-size: 11px;
+  font-size: var(--db-fs-caption);
   font-style: italic;
   color: var(--db-text);
   opacity: 0.85;
 }
+.slidev-layout.db-default .with-bg .slidev-code-block-title {
+  padding-inline: 10px;           /* match the boxed code's inset */
+}
 
 /* Optional table captions (need Comark, enabled by this theme).
    ABOVE the table:  [Title]{.table-caption}     -> black, non-italic
@@ -270,7 +319,7 @@
 .slidev-layout.db-default p:has(.table-caption),
 .slidev-layout.db-default .table-footer,
 .slidev-layout.db-default p:has(.table-footer) {
-  font-size: 11px;
+  font-size: var(--db-fs-caption);
   background: transparent !important;
 }
 .slidev-layout.db-default .table-caption,
@@ -310,7 +359,7 @@
 .slidev-layout.db-default table {
   border-collapse: collapse;
   width: auto;                    /* default: hug content */
-  font-size: 10px;                /* 10pt (canvas 720 => px == pt) */
+  font-size: var(--db-fs-table);  /* 10pt */
 }
 /* Width control: tables hug content by default. To pin a width, wrap in
    <div class="table-w" style="width: …"> — the table then fills that box, so
@@ -349,6 +398,7 @@
   border: none;                   /* no vertical/cell borders */
   padding: 2px 8px 4px;           /* tight padding; bottom>top optically centers
                                      single-line text (nudges it up) */
+  line-height: 1.4;               /* rows every 19.2pt (25.6px), as in the template */
   vertical-align: middle;         /* center cell text vertically */
   text-align: center;             /* center by default; :--/--: in markdown override */
 }
@@ -372,6 +422,12 @@
 .slidev-layout.db-default tbody tr:last-child td {
   border-bottom: 1px solid var(--db-table-rule);
 }
+/* Footer page number (global-bottom.vue): 12pt like the template. */
+.db-footer__page {
+  font-size: var(--db-fs-small);
+  color: var(--db-text);
+}
+
 /* Inline code inside tables AND headings: keep the syntax colors but drop the
    gray "pill" background/padding so it reads like plain text. */
 .slidev-layout.db-default th code,
@@ -382,3 +438,20 @@
   background: transparent;
   padding: 0;
 }
+/* In a heading, code takes the heading's size and weight (the template's
+   "1.1 DISTINCT" is bold mono), not the light, smaller inline-code style. */
+.slidev-layout.db-default :is(h1, h2, h3) code {
+  font-size: 1em;
+  font-weight: inherit;
+}
+
+/* Inline math: KaTeX's default 1.21em makes capitals 15% taller than Noto
+   Sans ones, and its 1.2 line height stretches the bullet it sits in. At 1.05em
+   the capitals match; line-height 1 keeps a formula's bullet within 0.5px of its
+   neighbours. (Not 0: that misplaces overlays such as the slash of \notin.) */
+.slidev-layout.db-default .katex {
+  font-size: 1.05em;
+}
+.slidev-layout.db-default :not(.katex-display) > .katex {
+  line-height: 1;
+}

package/vite.config.ts

@@ -1,5 +1,6 @@
 import { createHighlighter } from 'shiki'
-import { setupTableCaptions } from './markdown'
+import { setupTableCaptions } from './markdown.ts'
+import { sqlKeywords } 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.
@@ -9,15 +10,22 @@ import { setupTableCaptions } from './markdown'
 // The leading `{lang}` token selects the language; everything after the first
 // space is highlighted with Shiki and rendered inside a normal inline <code>.
 //
+// Common SQL keywords/constants/functions (e.g. `NULL`, `TRUE`, `COUNT`) are
+// automatically detected and highlighted with the theme's SQL grammar.
+//
 // 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).
-//
-// 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']
 
+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_OPS = /^(?:<=>|<>|<=|>=|!=|=|<|>)$/
+
+function isAutoSql(code: string): boolean {
+  const trimmed = code.trim()
+  return AUTO_SQL_OPS.test(trimmed) || AUTO_SQL.test(trimmed)
+}
+
 export default async () => {
   const highlighter = await createHighlighter({ themes: [THEME], langs: LANGS })
 
@@ -29,12 +37,42 @@ 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 inner = highlighter
-                .codeToHtml(m[2], { lang: m[1], theme: THEME })
+            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'
+            }
+
+            // 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>`
+            }
+
+            if (lang && highlighter.getLoadedLanguages().includes(lang)) {
+              let inner = highlighter
+                .codeToHtml(code, { lang, theme: THEME, transformers: [sqlKeywords] })
                 .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 fallback