@troshab/slidev-theme-troshab 0.1.0

package/components_base/CodeHighlight.vue

@@ -0,0 +1,364 @@
+<script setup lang="ts">
+/**
+ * CodeHighlight - code block with syntax highlighting, line numbers, filename header.
+ *
+ * Standalone:
+ *   <CodeHighlight code="const x = 1;" lang="typescript" />
+ *   <CodeHighlight filename="app.ts" lang="typescript">
+ *     const x: number = 1;
+ *   </CodeHighlight>
+ *
+ * Inside CodeDiff (inherits diff lines + showLineNumbers):
+ *   <CodeDiff mode="split">
+ *     <template #before>
+ *       <CodeHighlight filename="old.js" lang="javascript">...</CodeHighlight>
+ *     </template>
+ *     <template #after>
+ *       <CodeHighlight filename="new.ts" lang="typescript">...</CodeHighlight>
+ *     </template>
+ *   </CodeDiff>
+ */
+
+import { ref, computed, inject, onMounted, useSlots } from 'vue'
+import type { Ref, VNode } from 'vue'
+import type { SemanticColor, CodeLine } from '../composables/useColors'
+
+interface CodeDiffContext {
+  register(code: string): number                    // returns index (0=before, 1=after)
+  getDiffLines(index: number): Ref<CodeLine[]>
+  showLineNumbers: Ref<boolean>
+}
+
+const props = withDefaults(defineProps<{
+  code?: string
+  lines?: CodeLine[]
+  filename?: string
+  lang?: string
+  showLineNumbers?: boolean       // undefined = inherit from CodeDiff or default true
+  startLine?: number
+  highlights?: number[]
+  highlightColor?: SemanticColor
+}>(), {
+  startLine: 1,
+  highlightColor: 'primary',
+})
+
+const slots = useSlots()
+const rootEl = ref<HTMLElement | null>(null)
+
+// --- Raw code: prop > slot > empty ---
+
+function extractSlotText(vnodes: VNode[]): string {
+  return vnodes.map(vnode => {
+    if (typeof vnode.children === 'string') return vnode.children
+    if (Array.isArray(vnode.children)) return extractSlotText(vnode.children as VNode[])
+    return ''
+  }).join('')
+}
+
+function dedent(text: string): string {
+  const lines = text.split('\n')
+  while (lines.length && lines[0].trim() === '') lines.shift()
+  while (lines.length && lines[lines.length - 1].trim() === '') lines.pop()
+  const minIndent = lines
+    .filter(l => l.trim().length > 0)
+    .reduce((min, l) => Math.min(min, (l.match(/^(\s*)/)?.[1].length ?? 0)), Infinity)
+  if (minIndent === Infinity || minIndent === 0) return lines.join('\n')
+  return lines.map(l => l.slice(minIndent)).join('\n')
+}
+
+const rawCode = computed(() => {
+  if (props.code) return props.code
+  if (slots.default) return dedent(extractSlotText(slots.default()))
+  return ''
+})
+
+// --- CodeDiff integration ---
+
+const diffContext = inject<CodeDiffContext | null>('codeDiffContext', null)
+const myIndex = ref(-1)
+
+onMounted(() => {
+  console.log('[CodeHighlight] onMounted', { diffContext: !!diffContext, rawCode: rawCode.value?.substring(0, 50), filename: props.filename })
+  if (diffContext) {
+    myIndex.value = diffContext.register(rawCode.value)
+    console.log('[CodeHighlight] registered as index', myIndex.value)
+  }
+})
+
+const diffLines = computed(() => {
+  if (diffContext && myIndex.value >= 0) return diffContext.getDiffLines(myIndex.value).value
+  return null
+})
+
+// --- Resolved lines ---
+
+const resolvedLines = computed<CodeLine[]>(() => {
+  if (diffLines.value) return diffLines.value
+  if (props.lines) return props.lines
+  if (!rawCode.value) return []
+  return rawCode.value.split('\n').map((text, i) => ({
+    text,
+    num: props.startLine + i,
+    type: 'unchanged' as const,
+  }))
+})
+
+const resolvedShowLineNumbers = computed(() => {
+  if (props.showLineNumbers !== undefined) return props.showLineNumbers
+  if (diffContext) return diffContext.showLineNumbers.value
+  return true
+})
+
+const highlightSet = computed(() => new Set(props.highlights ?? []))
+
+// --- Syntax tokenizer ---
+
+const KEYWORDS = new Set([
+  'function', 'return', 'const', 'let', 'var', 'if', 'else', 'for', 'while', 'do',
+  'switch', 'case', 'break', 'continue', 'new', 'delete', 'typeof', 'instanceof',
+  'class', 'extends', 'implements', 'interface', 'type', 'enum', 'import', 'export',
+  'from', 'default', 'async', 'await', 'try', 'catch', 'finally', 'throw', 'yield',
+  'in', 'of', 'as', 'is', 'keyof', 'readonly', 'declare', 'abstract',
+  'public', 'private', 'protected', 'static', 'override', 'get', 'set',
+])
+const LITERALS = new Set([
+  'number', 'string', 'boolean', 'void', 'null', 'undefined', 'any', 'never',
+  'unknown', 'object', 'symbol', 'bigint', 'true', 'false', 'this', 'super',
+])
+
+function wordClass(word: string): string | null {
+  if (KEYWORDS.has(word)) return 'hl-keyword'
+  if (LITERALS.has(word)) return 'hl-constant'
+  return null
+}
+
+function esc(s: string): string {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+}
+
+function tokenize(text: string): string {
+  if (!props.lang || props.lang === 'text') return esc(text)
+
+  let result = ''
+  let i = 0
+
+  while (i < text.length) {
+    // Strings
+    if (text[i] === '"' || text[i] === "'" || text[i] === '`') {
+      const q = text[i]
+      let j = i + 1
+      while (j < text.length && text[j] !== q) { if (text[j] === '\\') j++; j++ }
+      j++
+      result += `<span class="hl-string">${esc(text.slice(i, j))}</span>`
+      i = j
+      continue
+    }
+
+    // Line comments
+    if (text[i] === '/' && text[i + 1] === '/') {
+      result += `<span class="hl-comment">${esc(text.slice(i))}</span>`
+      break
+    }
+
+    // Block comments
+    if (text[i] === '/' && text[i + 1] === '*') {
+      const end = text.indexOf('*/', i + 2)
+      const j = end >= 0 ? end + 2 : text.length
+      result += `<span class="hl-comment">${esc(text.slice(i, j))}</span>`
+      i = j
+      continue
+    }
+
+    // Words
+    if (/[a-zA-Z_$]/.test(text[i])) {
+      let j = i
+      while (j < text.length && /[a-zA-Z0-9_$]/.test(text[j])) j++
+      const word = text.slice(i, j)
+      const cls = wordClass(word)
+      result += cls ? `<span class="${cls}">${esc(word)}</span>` : esc(word)
+      i = j
+      continue
+    }
+
+    // Numbers
+    if (/\d/.test(text[i])) {
+      let j = i
+      while (j < text.length && /[\d.xXa-fA-F_]/.test(text[j])) j++
+      result += `<span class="hl-constant">${esc(text.slice(i, j))}</span>`
+      i = j
+      continue
+    }
+
+    // Arrow =>
+    if (text[i] === '=' && text[i + 1] === '>') {
+      result += '<span class="hl-keyword">=&gt;</span>'
+      i += 2
+      continue
+    }
+
+    // Punctuation
+    if (/[{}()\[\];:,=<>+\-*\/&|!?.@#%^~]/.test(text[i])) {
+      result += `<span class="hl-punctuation">${esc(text[i])}</span>`
+      i++
+      continue
+    }
+
+    result += esc(text[i])
+    i++
+  }
+
+  return result
+}
+</script>
+
+<template>
+  <div ref="rootEl" class="code-hl">
+    <div v-if="$slots.header || filename || lang" class="code-hl-header">
+      <slot name="header">
+        <span v-if="filename" class="code-hl-filename">{{ filename }}</span>
+        <span v-if="lang" class="code-hl-lang">{{ lang }}</span>
+      </slot>
+    </div>
+    <pre class="code-hl-content"><code><template v-for="(line, idx) in resolvedLines" :key="idx"><span
+          class="code-hl-line"
+          :class="[
+            line.type && line.type !== 'unchanged' ? `code-hl-line-${line.type}` : '',
+            highlightSet.has(line.num ?? idx + startLine) ? `code-hl-line-highlight code-hl-highlight-${highlightColor}` : '',
+          ]"
+        ><span v-if="resolvedShowLineNumbers" class="code-hl-linenum">{{ line.num ?? '' }}</span><span v-if="line.prefix !== undefined" class="code-hl-prefix" :class="line.type ? `code-hl-prefix-${line.type}` : ''">{{ line.prefix }}</span><span class="code-hl-text" v-html="tokenize(line.text)"></span>
+</span></template></code></pre>
+  </div>
+</template>
+
+<style>
+.code-hl {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-code);
+  border-radius: 0.5rem;
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+  background-color: var(--color-bg-muted);
+}
+
+/* Header */
+.code-hl-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-xs) var(--space-sm);
+  border-bottom: 1px solid var(--color-border);
+  background-color: var(--color-bg-muted);
+}
+
+.code-hl-filename {
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text);
+}
+
+.code-hl-lang {
+  font-size: 0.75em;
+  color: var(--color-text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* Content */
+.code-hl-content {
+  margin: 0;
+  padding: var(--space-xs) 0;
+  overflow: auto;
+}
+
+.code-hl-content code {
+  display: block;
+}
+
+/* Line */
+.code-hl-line {
+  display: flex;
+  min-height: 1.4em;
+}
+
+/* Line numbers */
+.code-hl-linenum {
+  width: 2.5em;
+  text-align: right;
+  padding-right: 0.75em;
+  color: var(--color-text-tertiary);
+  user-select: none;
+  flex-shrink: 0;
+}
+
+/* Diff prefix (+/-/space) */
+.code-hl-prefix {
+  width: 1.5em;
+  text-align: center;
+  flex-shrink: 0;
+  user-select: none;
+}
+
+.code-hl-prefix-removed {
+  color: var(--color-danger);
+  font-weight: var(--font-weight-bold);
+}
+
+.code-hl-prefix-added {
+  color: var(--color-success);
+  font-weight: var(--font-weight-bold);
+}
+
+.code-hl-prefix-modified {
+  color: var(--color-warning);
+  font-weight: var(--font-weight-bold);
+}
+
+/* Code text */
+.code-hl-text {
+  flex: 1;
+  white-space: pre;
+  color: var(--shiki-color-text, var(--color-text));
+}
+
+/* Diff line backgrounds */
+.code-hl-line-removed {
+  background-color: var(--color-danger-tint);
+}
+
+.code-hl-line-added {
+  background-color: var(--color-success-tint);
+}
+
+.code-hl-line-modified {
+  background-color: var(--color-warning-tint);
+}
+
+/* Highlight backgrounds */
+.code-hl-line-highlight.code-hl-highlight-primary {
+  background-color: var(--color-primary-tint);
+}
+
+.code-hl-line-highlight.code-hl-highlight-success {
+  background-color: var(--color-success-tint);
+}
+
+.code-hl-line-highlight.code-hl-highlight-warning {
+  background-color: var(--color-warning-tint);
+}
+
+.code-hl-line-highlight.code-hl-highlight-danger {
+  background-color: var(--color-danger-tint);
+}
+
+.code-hl-line-highlight.code-hl-highlight-info {
+  background-color: var(--color-info-tint);
+}
+
+/* Syntax highlighting tokens (mapped to Shiki CSS vars) */
+.hl-keyword { color: var(--shiki-token-keyword); }
+.hl-string { color: var(--shiki-token-string); }
+.hl-comment { color: var(--shiki-token-comment); font-style: italic; }
+.hl-constant { color: var(--shiki-token-constant); }
+.hl-punctuation { color: var(--shiki-token-punctuation); }
+</style>

package/composables/useColors.ts

@@ -0,0 +1,101 @@
+/**
+ * Shared color type system — single source of truth for all color-related
+ * types and CSS variable mappings used across components.
+ */
+
+import { ref, onMounted } from 'vue'
+
+// === READ-ONLY DARK MODE DETECTION ===
+
+/**
+ * Observes the `dark` class on <html> without writing to it.
+ * Unlike VueUse's useDark(), this does NOT modify the DOM
+ * and won't conflict with Slidev's colorSchema setting.
+ */
+export function useIsDark() {
+  const isDark = ref(false)
+
+  function update() {
+    if (typeof document !== 'undefined') {
+      isDark.value = document.documentElement.classList.contains('dark')
+    }
+  }
+
+  onMounted(() => {
+    update()
+    const observer = new MutationObserver(update)
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class'],
+    })
+  })
+
+  return isDark
+}
+
+// === TYPE DEFINITIONS ===
+
+/** Core 5 semantic colors (have background + foreground pairs) */
+export type SemanticColor = 'primary' | 'success' | 'warning' | 'danger' | 'info'
+
+/** Extended with secondary/accent */
+export type ExtendedColor = SemanticColor | 'secondary' | 'accent'
+
+/** For text/icon components that also accept 'inherit' */
+export type ColorWithInherit = 'inherit' | SemanticColor
+
+/** Full text palette (text components can use text-* vars too) */
+export type TextColor = 'inherit' | 'secondary' | 'tertiary' | 'accent' | SemanticColor
+
+/** Background semantic colors (includes non-semantic bg variants) */
+export type BgColor = SemanticColor | 'soft' | 'muted'
+
+// === CODE LINE TYPE (for CodeHighlight / CodeDiff) ===
+
+export interface CodeLine {
+  text: string
+  html?: string
+  num?: number
+  type?: 'added' | 'removed' | 'modified' | 'unchanged'
+  prefix?: string
+}
+
+// === CSS VAR MAPS ===
+
+export const semanticColorVar: Record<SemanticColor, string> = {
+  primary: 'var(--color-primary)',
+  success: 'var(--color-success)',
+  warning: 'var(--color-warning)',
+  danger:  'var(--color-danger)',
+  info:    'var(--color-info)',
+}
+
+export const semanticForegroundVar: Record<SemanticColor, string> = {
+  primary: 'var(--color-primary-foreground)',
+  success: 'var(--color-success-foreground)',
+  warning: 'var(--color-warning-foreground)',
+  danger:  'var(--color-danger-foreground)',
+  info:    'var(--color-info-foreground)',
+}
+
+export const gradientVar: Record<ExtendedColor, string> = {
+  primary:   'var(--gradient-primary)',
+  success:   'var(--gradient-success)',
+  warning:   'var(--gradient-warning)',
+  danger:    'var(--gradient-danger)',
+  info:      'var(--gradient-info)',
+  accent:    'var(--gradient-accent)',
+  secondary: 'var(--gradient-primary)',
+}
+
+export const textColorVar: Record<TextColor, string> = {
+  inherit:   'inherit',
+  secondary: 'var(--color-text-secondary)',
+  tertiary:  'var(--color-text-tertiary)',
+  accent:    'var(--color-accent)',
+  primary:   'var(--color-primary)',
+  success:   'var(--color-success)',
+  warning:   'var(--color-warning)',
+  danger:    'var(--color-danger)',
+  info:      'var(--color-info)',
+}

package/composables/useShiki.ts

@@ -0,0 +1,81 @@
+/**
+ * useShiki - singleton Shiki highlighter for CodeHighlight / CodeDiff.
+ *
+ * Uses the same CSS-variables theme as setup/shiki.ts, so tokens
+ * auto-adapt to light/dark via --shiki-token-* vars from colors.css.
+ * JS regex engine (no WASM) for fast, lightweight initialization.
+ */
+
+import { shallowRef } from 'vue'
+import { createHighlighterCore, createCssVariablesTheme } from 'shiki/core'
+import { createJavaScriptRegexEngine } from 'shiki/engine/javascript'
+import type { HighlighterCore } from 'shiki/core'
+
+const theme = createCssVariablesTheme({
+  name: 'troshab',
+  variablePrefix: '--shiki-',
+  variableDefaults: {},
+  fontStyle: true,
+})
+
+let initPromise: Promise<HighlighterCore> | null = null
+
+async function init(): Promise<HighlighterCore> {
+  return createHighlighterCore({
+    themes: [theme],
+    langs: [
+      import('shiki/langs/javascript.mjs'),
+      import('shiki/langs/typescript.mjs'),
+      import('shiki/langs/html.mjs'),
+      import('shiki/langs/css.mjs'),
+      import('shiki/langs/vue.mjs'),
+      import('shiki/langs/json.mjs'),
+      import('shiki/langs/yaml.mjs'),
+      import('shiki/langs/bash.mjs'),
+      import('shiki/langs/shell.mjs'),
+      import('shiki/langs/python.mjs'),
+      import('shiki/langs/markdown.mjs'),
+      import('shiki/langs/sql.mjs'),
+      import('shiki/langs/go.mjs'),
+      import('shiki/langs/rust.mjs'),
+    ],
+    engine: createJavaScriptRegexEngine(),
+  })
+}
+
+function esc(s: string): string {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+}
+
+/**
+ * Returns a shared Shiki highlighter instance.
+ * Initialization is async; `tokenizeCode` returns null until ready.
+ */
+export function useShiki() {
+  const highlighter = shallowRef<HighlighterCore | null>(null)
+
+  if (!initPromise) initPromise = init()
+  initPromise.then(hl => { highlighter.value = hl }).catch(() => {})
+
+  /**
+   * Tokenize a full code block. Returns per-line HTML strings,
+   * or null if Shiki isn't ready / lang unsupported.
+   */
+  function tokenizeCode(code: string, lang: string): string[] | null {
+    const hl = highlighter.value
+    if (!hl || !lang || lang === 'text') return null
+    try {
+      const result = hl.codeToTokens(code, { lang, theme: 'troshab' })
+      return result.tokens.map(line =>
+        line.map(t => {
+          const escaped = esc(t.content)
+          return t.color ? `<span style="color:${t.color}">${escaped}</span>` : escaped
+        }).join('')
+      )
+    } catch {
+      return null
+    }
+  }
+
+  return { highlighter, tokenizeCode }
+}