Replace the bespoke <pre> component handler with Comark's built-in plugins: - comark/plugins/highlight runs at parse time and replaces <pre>/<code> children with Shiki-tokenized spans using the Rose Pine theme. The renderer's HTML pass sees already-decorated nodes; no custom pre handler is needed. - comark/plugins/mermaid rewrites ```mermaid fences into <mermaid content="..."> elements at parse time. A small component handler re-wraps these into <pre class="mermaid"> with the source also stashed in data-source. Layout detection now keys diagram-focus off the mermaid tag instead of inspecting pre's language attribute. isMediaBlock accepts both <pre> and <mermaid>. Mermaid integration fixes for slide-scaling: - The CDN entry attaches a DOMContentLoaded listener that auto-renders every pre.mermaid with the default config before our module-script's import resolves. We restore the source from data-source on each pre, clear data-processed, then mermaid.run() with our config. - Set flowchart.useMaxWidth: false so the SVG isn't pinned at its layout-time natural width, and override mermaid's inline max-width in CSS so the diagram fills the figure as the slide grows. Boxes and labels (even in <foreignObject>) now scale together with the SVG transform. Bump shiki to v4 (and add @shikijs/themes) since the highlight plugin imports createShikiPrimitive which is a v4 export. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>