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.
This commit is contained in:
@@ -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 }
|
||||
)
|
||||
|
||||
@@ -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()
|
||||
}
|
||||
|
||||
@@ -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 }
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user