feat(markdown): render TikZ fenced blocks to SVG

Adds a markdown-it extractor for ```tikz blocks that emits a sanitized
placeholder, plus a runTikz() that lazy-loads the obsidian-tikzjax 0.5.2
bundle from jsdelivr on first encounter, sanitizes the produced SVG with
DOMPurify, and caches it in PouchDB keyed by sha256(source) so repeat
views are instant and offline-capable.

src/components/FluxNote.vue

@@ -7,7 +7,7 @@ import SkeletonLoader from "@/components/SkeletonLoader.vue"
 import StackedNote from "@/components/StackedNote.vue"
 import { useGitHubLogin } from "@/hooks/useGitHubLogin.hook"
 import { useLinks } from "@/hooks/useLinks.hook"
-import { markdownBuilder } from "@/hooks/useMarkdown.hook"
+import { markdownBuilder, runTikz } from "@/hooks/useMarkdown.hook"
 import { useNoteView } from "@/hooks/useNoteView.hook"
 import { useResizeContainer } from "@/hooks/useResizeContainer.hook"
 import { useRouteQueryStackedNotes } from "@/hooks/useRouteQueryStackedNotes.hook"
@@ -64,6 +64,7 @@ watch(
   async () => {
     await nextTick()
     listenToClick()
+    void runTikz(".note-display .tikz")
   },
   { immediate: true }
 )

src/components/StackedNote.vue

@@ -16,6 +16,7 @@ import { useLinks } from "@/hooks/useLinks.hook"
 import {
   renderCodeFile,
   runMermaid,
+  runTikz,
   useShikiji
 } from "@/hooks/useMarkdown.hook"
 import { useNoteFreshness } from "@/hooks/useNoteFreshness.hook"
@@ -160,6 +161,10 @@ watch([content, mode], () => {
       runMermaid(`.note-${sha.value} .mermaid`)
     }
 
+    if (rawContent.value.includes("```tikz")) {
+      void runTikz(`.note-${sha.value} .tikz`)
+    }
+
     if (isMarkdown.value && rawContent.value.includes("```")) {
       useShikiji()
     }

src/components/StackedPublicNote.vue

@@ -5,7 +5,7 @@ import { useRoute } from "vue-router"
 
 import SkeletonLoader from "@/components/SkeletonLoader.vue"
 import { useATProtoLinks } from "@/hooks/useATProtoLinks.hook"
-import { markdownBuilder } from "@/hooks/useMarkdown.hook"
+import { markdownBuilder, runTikz } from "@/hooks/useMarkdown.hook"
 import { useNoteOverlay } from "@/hooks/useNoteOverlay.hook"
 import { useRouteQueryStackedNotes } from "@/hooks/useRouteQueryStackedNotes.hook"
 import { getAuthor } from "@/modules/atproto/getAuthor"
@@ -81,6 +81,7 @@ watch(
   async () => {
     await nextTick()
     listenToClick()
+    void runTikz(`.note-${classNameId.value} .tikz`)
   },
   { immediate: true }
 )

src/data/DataType.enum.ts

@@ -7,5 +7,6 @@ export enum DataType {
   RepetitionCard = "RepetitionCard",
   History = "History",
   UserSettings = "UserSettings",
-  AtprotoSession = "AtprotoSession"
+  AtprotoSession = "AtprotoSession",
+  TikzCache = "TikzCache"
 }

src/data/models/TikzCache.ts

@@ -0,0 +1,6 @@
+import { DataType } from "@/data/DataType.enum"
+import { Model } from "@/data/models/Model"
+
+export interface TikzCache extends Model<DataType.TikzCache> {
+  svg: string
+}

src/hooks/useMarkdown.hook.ts

@@ -15,11 +15,21 @@ import mermaid from "mermaid"
 import type { LanguageRegistration } from "shikiji-core"
 import { Ref, toValue } from "vue"
 
+import { data } from "@/data/data"
+import { DataType } from "@/data/DataType.enum"
+import type { TikzCache } from "@/data/models/TikzCache"
 import alloyGrammar from "@/utils/alloy.tmLanguage.json"
-import { decodeBase64ToUTF8 } from "@/utils/decodeBase64ToUTF8"
+import {
+  decodeBase64ToUTF8,
+  encodeUTF8ToBase64
+} from "@/utils/decodeBase64ToUTF8"
 import { html5Media } from "@/utils/markdown/markdown-html5-media"
 import { markdownItTablerIcons } from "@/utils/markdown/markdown-it-tabler-icons"
 
+const TIKZ_BUNDLE_URL =
+  "https://cdn.jsdelivr.net/gh/artisticat1/obsidian-tikzjax@0.5.2/tikzjax.js"
+const TIKZ_RENDER_TIMEOUT_MS = 30000
+
 const markdownItMermaidExtractor = (md: MarkdownIt) => {
   const defaultFence =
     md.renderer.rules.fence ||
@@ -51,6 +61,37 @@ const markdownItMermaidExtractor = (md: MarkdownIt) => {
   }
 }
 
+const markdownItTikzExtractor = (md: MarkdownIt) => {
+  const defaultFence =
+    md.renderer.rules.fence ||
+    function (
+      tokens: Array<Token>,
+      index: number,
+      options: Options,
+      _: unknown,
+      self: Renderer
+    ) {
+      return self.renderToken(tokens, index, options)
+    }
+
+  md.renderer.rules.fence = function (
+    tokens: Array<Token>,
+    index: number,
+    options: Options,
+    env: unknown,
+    self: Renderer
+  ) {
+    const token = tokens[index]
+
+    if (token.info.trim() === "tikz") {
+      const encoded = encodeUTF8ToBase64(token.content)
+      return `<pre class="tikz" data-tikz-source="${encoded}"><span class="tikz-loading">Rendering TikZ…</span></pre>\n`
+    }
+
+    return defaultFence(tokens, index, options, env, self)
+  }
+}
+
 const slugger = new GithubSlugger()
 
 let tabGroupCounter = 0
@@ -62,6 +103,7 @@ const md = new MarkdownIt({
   quotes: ["«\xA0", "\xA0»", "‹\xA0", "\xA0›"]
 })
   .use(markdownItMermaidExtractor)
+  .use(markdownItTikzExtractor)
   .use(html5Media)
   .use(blockEmbedPlugin, {
     youtube: {
@@ -145,6 +187,165 @@ export const runMermaid = (querySelector: string) => {
   })
 }
 
+let tikzBundlePromise: Promise<void> | null = null
+let domPurifyPromise: Promise<typeof import("dompurify")> | null = null
+
+const ensureTikzBundle = (): Promise<void> => {
+  if (tikzBundlePromise) return tikzBundlePromise
+
+  tikzBundlePromise = new Promise<void>((resolve, reject) => {
+    const existing = document.getElementById("tikzjax-bundle")
+    if (existing) {
+      resolve()
+      return
+    }
+    const script = document.createElement("script")
+    script.id = "tikzjax-bundle"
+    script.src = TIKZ_BUNDLE_URL
+    script.async = true
+    script.crossOrigin = "anonymous"
+    script.addEventListener("load", () => resolve())
+    script.addEventListener("error", () => {
+      tikzBundlePromise = null
+      reject(new Error("Failed to load TikZ engine"))
+    })
+    document.head.appendChild(script)
+  })
+
+  return tikzBundlePromise
+}
+
+const ensureDomPurify = (): Promise<typeof import("dompurify")> => {
+  if (!domPurifyPromise) domPurifyPromise = import("dompurify")
+  return domPurifyPromise
+}
+
+const sha256Hex = async (text: string): Promise<string> => {
+  const buf = await crypto.subtle.digest(
+    "SHA-256",
+    new TextEncoder().encode(text)
+  )
+  return Array.from(new Uint8Array(buf))
+    .map((b) => b.toString(16).padStart(2, "0"))
+    .join("")
+}
+
+const sanitizeSvg = async (svg: string): Promise<string> => {
+  const DOMPurify = (await ensureDomPurify()).default
+  return DOMPurify.sanitize(svg, {
+    USE_PROFILES: { svg: true, svgFilters: true }
+  })
+}
+
+const tidyTikzSource = (s: string): string =>
+  s
+    .replaceAll("&nbsp;", "")
+    .split("\n")
+    .map((line) => line.trim())
+    .filter((line) => line)
+    .join("\n")
+
+const renderTikzError = (err: unknown, source: string): string => {
+  const msg = err instanceof Error ? err.message : String(err)
+  return (
+    `<div class="tikz-error"><strong>TikZ error</strong>` +
+    `<pre>${md.utils.escapeHtml(msg)}</pre>` +
+    `<details><summary>source</summary>` +
+    `<pre>${md.utils.escapeHtml(source)}</pre></details></div>`
+  )
+}
+
+const renderOneTikzBlock = (
+  el: HTMLElement,
+  source: string
+): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    let settled = false
+    const timer = window.setTimeout(() => {
+      if (settled) return
+      settled = true
+      el.removeEventListener("tikzjax-load-finished", handler)
+      reject(new Error("TikZ render timed out"))
+    }, TIKZ_RENDER_TIMEOUT_MS)
+
+    const handler = (e: Event) => {
+      if (settled) return
+      settled = true
+      window.clearTimeout(timer)
+      el.removeEventListener("tikzjax-load-finished", handler)
+      const target = e.target as Element | null
+      if (!target) {
+        reject(new Error("TikZ produced no output"))
+        return
+      }
+      resolve(target.outerHTML)
+    }
+
+    el.addEventListener("tikzjax-load-finished", handler)
+
+    while (el.firstChild) el.removeChild(el.firstChild)
+    const script = document.createElement("script")
+    script.type = "text/tikz"
+    script.textContent = source
+    el.appendChild(script)
+  })
+}
+
+export const runTikz = async (querySelector: string): Promise<void> => {
+  const elements = Array.from(
+    document.querySelectorAll<HTMLElement>(querySelector)
+  )
+  if (elements.length === 0) return
+
+  await Promise.all(
+    elements.map(async (el) => {
+      if (el.dataset.tikzRendered) return
+      el.dataset.tikzRendered = "pending"
+
+      const encoded = el.dataset.tikzSource
+      if (!encoded) {
+        el.dataset.tikzRendered = "error"
+        return
+      }
+
+      const source = tidyTikzSource(decodeBase64ToUTF8(encoded))
+
+      let hash: string
+      try {
+        hash = await sha256Hex(source)
+      } catch (err) {
+        el.innerHTML = renderTikzError(err, source)
+        el.dataset.tikzRendered = "error"
+        return
+      }
+
+      const cacheId = `${DataType.TikzCache}-${hash}`
+      const cached = await data.get<DataType.TikzCache, TikzCache>(cacheId)
+      if (cached?.svg) {
+        el.innerHTML = cached.svg
+        el.dataset.tikzRendered = "true"
+        return
+      }
+
+      try {
+        await ensureTikzBundle()
+        const rawSvg = await renderOneTikzBlock(el, source)
+        const sanitized = await sanitizeSvg(rawSvg)
+        el.innerHTML = sanitized
+        el.dataset.tikzRendered = "true"
+        void data.add<DataType.TikzCache>({
+          _id: cacheId,
+          $type: DataType.TikzCache,
+          svg: sanitized
+        } as TikzCache)
+      } catch (err) {
+        el.innerHTML = renderTikzError(err, source)
+        el.dataset.tikzRendered = "error"
+      }
+    })
+  )
+}
+
 const rules: RenderRuleRecord = {
   table_open: () =>
     '<div class="overflow-x-auto"><table class="table table-zebra">',

src/styles/app.css

@@ -188,6 +188,36 @@ pre.mermaid {
   background-color: var(--color-base-content);
 }
 
+pre.tikz {
+  display: block;
+  overflow-x: auto;
+  text-align: center;
+  padding: 0.5rem;
+  background: transparent;
+}
+
+pre.tikz svg {
+  max-width: 100%;
+  height: auto;
+}
+
+.tikz-loading {
+  opacity: 0.6;
+  font-style: italic;
+}
+
+.tikz-error {
+  border-left: 3px solid var(--color-error);
+  padding: 0.5rem 0.75rem;
+  background: color-mix(in srgb, var(--color-error) 10%, transparent);
+  text-align: left;
+}
+
+.tikz-error pre {
+  white-space: pre-wrap;
+  font-size: 0.85em;
+}
+
 .markdown-alert {
   padding: 1rem;
   background-color: #ecf0f1;

src/views/PublicNoteView.vue

@@ -9,7 +9,7 @@ import SkeletonLoader from "@/components/SkeletonLoader.vue"
 import StackedPublicNote from "@/components/StackedPublicNote.vue"
 import ThemeSwap from "@/components/ThemeSwap.vue"
 import { useATProtoLinks } from "@/hooks/useATProtoLinks.hook"
-import { markdownBuilder } from "@/hooks/useMarkdown.hook"
+import { markdownBuilder, runTikz } from "@/hooks/useMarkdown.hook"
 import { useResizeContainer } from "@/hooks/useResizeContainer.hook"
 import { useRouteQueryStackedNotes } from "@/hooks/useRouteQueryStackedNotes.hook"
 import { getAuthor } from "@/modules/atproto/getAuthor"
@@ -120,6 +120,7 @@ watch(
   async () => {
     await nextTick()
     listenToClick()
+    void runTikz(".public-note-view .note-display .tikz")
   },
   { immediate: true }
 )