slidev-theme-tud-db 0.0.7 → 0.0.8

package/package.json

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

@@ -24,7 +24,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 +46,138 @@ 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
+        }
+
+        // 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],
+  transformers: [codeMarks, sqlKeywords],
 })

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.

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