Markdown preview: Mermaid diagrams and math #57

New Issue

2026-10-22T21:25:21-04:00

jared commented

2026-10-22 21:25:21 -04:00

Follow-up to #55. ```mermaid blocks show as code and $…$ / $$…$$ as text. Render them like GitHub does:

Mermaid: a lazily loaded asset (mermaid.js, roughly 2 MB) fetched over ttyd only when a file has a mermaid block and cached in IndexedDB like the editor. It renders to SVG inside the shadow root with securityLevel: 'strict', and the SVG is run through DOMPurify.
Math: KaTeX as another lazy asset, applied to text nodes after sanitizing.
Both follow the light/dark theme.

Follow-up to #55. ```` ```mermaid ```` blocks show as code and `$…$` / `$$…$$` as text. Render them like GitHub does: - **Mermaid:** a lazily loaded asset (`mermaid.js`, roughly 2 MB) fetched over ttyd only when a file has a mermaid block and cached in IndexedDB like the editor. It renders to SVG inside the shadow root with `securityLevel: 'strict'`, and the SVG is run through DOMPurify. - **Math:** KaTeX as another lazy asset, applied to text nodes after sanitizing. - Both follow the light/dark theme.

jared added this to the backlog milestone 2026-10-22 21:25:21 -04:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: LotusGuild/devdesk#57