streamdown-vue
v1.0.29TypeScript
Streamdown-style streaming Markdown renderer for Vue 3/Nuxt 3 with Shiki, KaTeX, Mermaid, and secure streaming helpers.
0/weekUpdated 2 months agoApache-2.0Unpacked: 136.0 KB
Published by @Saluana
npm install streamdown-vuestreamdown-vue
streamdown-vue brings Streamdown-style streaming Markdown to Vue 3 & Nuxt 3. It ships a
---
Table of Contents
1. Features
2. Installation
3. Quick Start (Basic SSR + CSR)
4. Default Styling & Customization
5. Deep Dive Tutorial (Streaming from an AI / SSE source)
6. Props Reference (All
7. Component Slots & Overrides
8. Built‑in Components & Data Attributes
9. Security Model (Link/Image hardening)
10. Syntax Highlighting (Shiki), Copy / Download & Extensible Actions
11. Mermaid Diagrams
12. Math & LaTeX Fixes
13. Utilities (parseBlocks, parseIncompleteMarkdown, LaTeX helpers)
14. Performance Tips
15. Nuxt 3 Usage & SSR Notes
16. Recipe Gallery
17. FAQ
18. Development & Contributing
---
1. Features
- GitHub‑flavored Markdown (tables, task lists, strikethrough) via remark-gfm
- KaTeX math (remark-math + rehype-katex) with extra repairs (matrices, stray $)
- Shiki syntax highlighting (light + dark themes) with reactive copy & download buttons
and an extensible action bar (add your own buttons globally or per-instance)
- Mermaid diagrams with caching, async render & graceful error recovery
- Incremental rendering + repair of incomplete Markdown tokens while streaming
- Secure allow‑list based hardening of link & image URLs (blocks javascript: etc.)
- Component override layer (swap any tag / embed custom Vue components)
- Data attributes for each semantic element (data-streamdown="...") for styling/testing
- Designed for SSR (Vue / Nuxt) & fast hydration; tree‑shakable, side‑effects minimized
---
2. Installation
$3
``bash`
bun add streamdown-vue
$3
`bash`
npm install streamdown-vuepnpm add streamdown-vue
yarn add streamdown-vue
You must also install peer deps vue (and optionally typescript).
Include KaTeX stylesheet once (if you use math):
`ts`
import 'katex/dist/katex.min.css';
---
3. Quick Start
main.ts:
`ts`
import { createApp } from 'vue';
import App from './App.vue';
import 'katex/dist/katex.min.css';
createApp(App).mount('#app');
App.vue:
`vue`
SSR (server) minimal snippet:
`ts
import { renderToString } from '@vue/server-renderer';
import { createSSRApp, h } from 'vue';
import { StreamMarkdown } from 'streamdown-vue';
const app = createSSRApp({
render: () => h(StreamMarkdown, { content: '# SSR' }),
});
const html = await renderToString(app);
`
---
4. Default Styling & Customization
$3
streamdown-vue ships with an optional built-in stylesheet that provides clean, neutral, and compact styling for all markdown elements. To use it:
`ts`
import 'streamdown-vue/style.css';
What's included:
- Neutral color scheme with automatic dark mode support
- Compact, professional styling for tables and code blocks
- Subtle, transparent scrollbars
- Properly styled buttons, headings, lists, and blockquotes
- Line number styling (when enabled)
- All styles are scoped to .streamdown-vue to avoid conflicts
Example:
`ts
// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import 'streamdown-vue/style.css'; // ← Import default styles
import 'katex/dist/katex.min.css';
createApp(App).mount('#app');
`
$3
All styles use CSS variables prefixed with --sd-* that you can override:
`css`
:root {
/ Colors /
--sd-primary: #3b82f6; / Accent color for links, headings /
--sd-primary-variant: #2563eb; / Hover states /
--sd-on-surface: #1f2937; / Text color /
--sd-surface-container: #f3f4f6; / Code block backgrounds /
--sd-border-color: #e5e7eb; / Borders /
/ Typography /
--sd-font-family-base: system-ui, sans-serif;
--sd-font-family-mono: ui-monospace, monospace;
--sd-font-size-base: 16px;
--sd-line-height-base: 1.7;
/ Dimensions /
--sd-border-width: 1px;
--sd-border-radius: 0.375rem;
}
Example - Custom Brand Colors:
`css`
:root {
--sd-primary: #8b5cf6; / Purple accent /
--sd-primary-variant: #7c3aed;
}
$3
Dark mode is automatic via @media (prefers-color-scheme: dark) or by adding the .dark class to your element:
`ts`
// Toggle dark mode
const toggleDark = () => {
document.documentElement.classList.toggle('dark');
};
You can customize dark mode colors:
`css`
:root.dark {
--sd-primary: #60a5fa; / Lighter blue for dark mode /
--sd-on-surface: #f3f4f6; / Light text /
--sd-surface-container: #374151; / Dark gray backgrounds /
--sd-border-color: #374151;
}
$3
If you prefer to write your own styles from scratch, simply don't import streamdown-vue/style.css. All markdown elements have data-streamdown attributes for easy targeting:
`css
/ Your custom styles /
.streamdown-vue [data-streamdown='code-block'] {
/ Custom code block styling /
}
.streamdown-vue [data-streamdown='table'] {
/ Custom table styling /
}
`
See section 9 (Built-in Components & Data Attributes) for a complete list of available attributes.
---
5. Deep Dive Tutorial – Live Streaming (AI / SSE)
When receiving tokens / partial chunks you typically want to:
1. Append new text chunk into a buffer.
2. Repair the partial Markdown (parseIncompleteMarkdown).parseBlocks
3. Split into safe blocks for re-render ().
4. Feed the concatenated repaired text to .
Composable example (client side):
`ts
// useStreamedMarkdown.ts
import { ref } from 'vue';
import { parseBlocks, parseIncompleteMarkdown } from 'streamdown-vue';
export function useStreamedMarkdown() {
const rawBuffer = ref('');
const rendered = ref('');
const blocks = ref
const pushChunk = (text: string) => {
rawBuffer.value += text;
// repair incomplete tokens (unclosed **, , $$, etc.)
const repaired = parseIncompleteMarkdown(rawBuffer.value);
blocks.value = parseBlocks(repaired);
rendered.value = blocks.value.join('');
};
return { rawBuffer, rendered, blocks, pushChunk };
}
``
Using Server-Sent Events (SSE):
`ts`
const { rendered, pushChunk } = useStreamedMarkdown();
const es = new EventSource('/api/chat');
es.onmessage = (e) => {
pushChunk(e.data);
};
es.onerror = () => es.close();
Template:
`vue`
Why repair first? Without repair, a trailing ** or lone ` will invalidate the final tree and cause flicker or lost highlighting. Repairing keeps intermediate renders stable.
---
6. Props Reference
| Prop | Type | Default | Description |
| -------------------------- | -------------------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| content | string | '' | The full (or partially streamed) markdown source. |class
| / className | string | '' | Optional wrapper classes; both accepted (React-style alias). |components
| | Record | {} | Map to override built-ins (e.g. { p: MyP }). |remarkPlugins
| | any[] | [] | Extra remark plugins. Supports (plugin) or [plugin, options]. If you supply remark-math yourself, the built‑in one (which disables single‑dollar inline math) is skipped. |rehypePlugins
| | any[] | [] | Extra rehype plugins. |defaultOrigin
| | string? | undefined | Base URL used to resolve relative links/images before allow‑list checks. |allowedImagePrefixes
| | string[] | ['https://','http://'] | Allowed (lowercased) URL prefixes for . Blocked => image dropped. |allowedLinkPrefixes
| | string[] | ['https://','http://'] | Allowed prefixes for . Blocked => link text only. |parseIncompleteMarkdown
| | boolean | true | (Future toggle) Auto apply repair internally. Currently you repair outside using utility; prop reserved. |shikiTheme
| | ShikiThemeConfig | undefined | Shiki theme (string) or dual theme object { light: '...', dark: '...' }. If undefined, follows system preference (github-light/github-dark). |codeBlockActions
| | Component[] | [] | Array of Vue components appended as action buttons in every code block header. |codeBlockShowLineNumbers
| | boolean | false | Show line numbers in all code fences. |codeBlockSelectable
| | boolean | true | Whether code text is selectable (adds select-none when false). |codeBlockHideCopy
| | boolean | false | Globally hide built‑in copy buttons (you can add your own via actions). |codeBlockHideDownload
| | boolean | false | Globally hide built‑in download buttons. |
All unrecognised props are ignored (no arbitrary HTML injection for safety).
---
7. Component Slots & Overrides
does not expose custom slots for content fragments (the pipeline is AST-driven). To customize rendering you override tags via the components prop:
`ts
import type { Component } from 'vue';
import { StreamMarkdown } from 'streamdown-vue';
const FancyP: Component = {
setup(_, { slots }) { return () => h('p', { class: 'text-pink-600 font-serif' }, slots.default?.()); }
};
`
If a tag is missing from components it falls back to the built-in map.
---
8. Built‑in Components & Data Attributes
Each semantic node receives a data-streamdown="name" attribute to make styling and querying reliable, even if classes are overridden:
| Element / Component | Data Attribute | Notes / Styling Hook |
| -------------------------- | ------------------- | ---------------------------------------------------------------------- |
| Paragraph
Because every semantic node has a stable / Header bar tweaks / / Language badge / / Table wrapper scroll shadows / Tips: 1. Scope via a parent (e.g. Testing example (Vitest / Bun): --- Only absolute URLs starting with an allowed prefix pass. Steps: 1. Resolve relative ( Example – allow only your CDN images & HTTPS links: --- Code fences are rendered by the internal Override with your custom block: const MyCode = defineComponent({ > Need a deeper walkthrough? The Shiki Language Bundling Guide covers both the batteries-included entry and the minimal core workflow. You can switch the built‑in highlighting theme via the Default Behavior: If you do not provide a theme, it defaults to To force a specific theme: Any valid Shiki theme name you have available can be passed. Instead of manually watching theme changes and reactively updating the prop, you can provide both light and dark themes for instant CSS-based theme switching: When using dual themes: Comparison: The dual theme approach is the recommended pattern for applications with theme switching. > Note: The default build registers a compact set of common languages (TS/JS/JSON/Bash/Python/Diff/Markdown/Vue/HTML/CSS/Go/Rust/YAML). Add or remove grammars by calling - Registering only the languages you need (core build): registerShikiLanguages([ The default (non-core) entry automatically registers the curated set listed below. If you only ever highlight a smaller subset, switch to the core entry, register those languages, and your bundler will never even see the unused grammars. The built-in highlighter eagerly loads the grammars you register. The default bundle calls | Canonical ID | Aliases | Human-readable language | If you rarely show, for instance, Rust or Go snippets, simply omit them when calling | Feature | Prop / Mechanism | Default | Notes | You normally only use Or override the internal code block entirely through Per instance: Or via named slot: Globally (main.ts): Inside a custom button component you can access the current code & language without props: export const MyShareButton = defineComponent({ If you want a fully custom action bar: Line numbers render as The default copy & download buttons can be selectively hidden while still using custom actions. The default copy button uses the Clipboard API and toggles an icon for UX; the download button creates a Blob and triggers a synthetic click. --- Fenced block: The - Deduplicated initialization You can override it via --- Supported by default: - Display math: If you really want We still expose some light repair helpers you can (optionally) run yourself before streaming completes: | Helper | Purpose (opt‑in) | Example (opt‑in): const safe = fixMatrix(fixDollarSignMath(markdown)); In streaming scenarios prefer leaving dollar signs untouched; the default config already avoids accidental inline math. --- Repairs incomplete constructs (unclosed Tokenizes markdown into stable block strings; combining repaired buffer pieces reduces re‑parsing cost vs re‑feeding the whole document each keystroke. Usage inside a stream loop (see Tutorial above). Both exported from package root. --- - Debounce UI updates: apply repairs & re-render at ~30–60fps (e.g. Benchmarks (see --- This section shows end‑to‑end integration in a Nuxt 3 project: installation, global registration, a streaming composable, and a server route that emits incremental Markdown. Create Nuxt auto‑registers anything in If you prefer auto‑import without explicit import each time, add an alias export file: Now In any page/component: Relative links (e.g. Create a route that emits partial Markdown pieces: export function useStreamedMarkdown(url: string) { const start = async () => { return { rendered, raw, start }; - The stream loop runs only client-side; on first SSR render you may want a placeholder skeleton. | Symptom | Fix | That’s it—Nuxt integration is essentially drop‑in plus an optional streaming composable. --- | Goal | Snippet | Custom remark plugin skeleton: --- Why repair outside instead of inside the component? Control & transparency. You can decide when to re-render; the component focuses on a deterministic AST transform. Can I disable KaTeX or Mermaid? For now they are bundled if you use their fences. Future option could allow toggling; PRs welcome. Does it sanitize HTML? Inline HTML is not allowed (passed through remark/rehype with Dark mode highlighting? Use the dual theme format: --- PRs for: improved matrix handling, plugin toggles, directive support, performance instrumentation are appreciated. ---  Licensed under the Apache License, Version 2.0. --- Happy streaming! 🚀 | p | Base text blocks |
| Anchor | a | Hardened links (target+rel enforced) |
| Inline code | inline-code | Single backtick spans |code-block
| Code block wrapper | | Outer container (header + body) |code-block-header
| Code block header bar | | Holds language label + copy button |code-lang
| Code language badge | | Language label span |code-lang-empty
| Empty language placeholder | | Present when no language specified (reserved space) |copy-button
| Copy button | | The actionable copy control |code-body
| Code block body container | | Wraps highlighted ; horizontal scroll applied here |pre
| Code block element |
| Added automatically to inner for targeting styles |
| Code block element | code | Added automatically to inner |code-line-number
| Code line number span | | Present when line numbers enabled |
| Unordered list | ul | |
| Ordered list | ol | |
| List item | li | |
| Horizontal rule | hr | |
| Strong | strong | Bold emphasis |
| Emphasis | em | Italic emphasis |
| Headings – | h1 … h6 | Each level individually tagged |
| Blockquote | blockquote | |
| Table | table | Logical table element |
| Table wrapper | table-wrapper | Scroll container around table |
| Table head | thead | |
| Table body | tbody | |
| Table row | tr | |
| Table header cell | th | |
| Table data cell | td | |
| Image | img | Only if src passes hardening |mermaid
| Mermaid wrapper | | Replaced with rendered SVG / diagram |katex
| KaTeX output | | Class emitted by KaTeX (not set by us but styled via global KaTeX CSS) |data-streamdown$3
marker, you can author zero‑collision styles (or component library themes) without relying on brittle tag chains. Example – customize the code block body and header:`css`
/ Remove borders & add extra bottom padding inside code body /
.message-body :deep([data-streamdown='code-body']) pre {
border: none;
margin-bottom: 0;
padding-bottom: 30px;
}
.message-body :deep([data-streamdown='code-block-header']) {
background: linear-gradient(to right, #f5f5f5, #e8e8e8);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.message-body :deep([data-streamdown='code-lang']) {
text-transform: uppercase;
letter-spacing: 0.5px;
}
.message-body :deep([data-streamdown='table-wrapper']) {
position: relative;
}
.message-body :deep([data-streamdown='table-wrapper']::after) {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 12px;
pointer-events: none;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0),
rgba(0, 0, 0, 0.08)
);
}) or component root to avoid leaking styles.:deep()
2. Use (Vue SFC) / ::v-deep where needed to pierce scoped boundaries..dark
3. Prefer attribute selectors over tag names so overrides survive internal structural changes.
4. For dark mode, pair selectors with media queries or a ancestor.`ts`
expect(html).toContain('data-streamdown="inline-code"');9. Security Model
) against defaultOrigin if provided.javascript:
2. Lowercase & check scheme (blocked).`
3. Check each allowed prefix (case-insensitive).
4. If any fail, the element is dropped (link/text downgraded, image removed).vue`
:allowed-image-prefixes="['https://cdn.example.com/']"
default-origin="https://example.com"
:content="md"
/>10. Syntax Highlighting (Shiki), Copy / Download & Extensible Actions
component:``md`ts`
const x: number = 1;ts`
import { defineComponent, h } from 'vue';
import { useShikiHighlighter } from 'streamdown-vue';
props: { code: { type: String, required: true }, language: { type: String, default: '' } },
async setup(props) {
const highlighter = await useShikiHighlighter();
const html = highlighter.codeToHtml(props.code, { lang: props.language || 'text', themes: { light: 'github-light', dark: 'github-dark' } });
return () => h('div', { class: 'my-code', innerHTML: html });
}
});$3
prop.undefined. This triggers automatic system preference detection:github-light
- when the user's system is in light modegithub-dark
- when the user's system is in dark mode (via prefers-color-scheme: dark)`vue`$3
vue`
:content="md"
/>
- Shiki generates CSS variables for both themes in a single render
- Theme switching happens instantly via CSS class changes (no component re-render needed)
- Add/remove class on a parent element or rely on @media (prefers-color-scheme: dark)
- No need to watch theme changes reactively
- More efficient - eliminates unnecessary re-renders when toggling themesvue`
:content="md"
/>
:content="md"
/> before your first render (details below).registerDefaultShikiLanguages()$3
– invoked automatically when you import from streamdown-vue; registers the curated language set.registerShikiLanguage(s)
- – call this in your own entry point to add or override grammars (local files or CDN-based loaders).excludeShikiLanguages([...])
- – remove specific loaders after the defaults register (e.g. drop Rust if you never show it).clearRegisteredShikiLanguages()
- – wipe the registry entirely before registering your own minimal set (used internally by the core entry).streamdown-vue/core
- entry – ships without defaults so only the grammars you register are ever referenced (perfect for bundle-sensitive apps).`ts`
import {
StreamMarkdown,
registerShikiLanguages,
} from 'streamdown-vue/core';
{ id: 'typescript', loader: () => import('@shikijs/langs/typescript') },
{ id: 'json', loader: () => import('@shikijs/langs/json') },
{ id: 'bash', loader: () => import('@shikijs/langs/bash') },
]);$3
which wires up the following set:typescript
| ------------ | -------------- | ----------------------- |
| | ts | TypeScript |tsx
| | — | TypeScript JSX |javascript
| | js | JavaScript |jsx
| | — | JavaScript JSX |json
| | — | JSON |bash
| | — | Bash / shell script |shell
| | shellscript, sh, zsh | Generic shell script |python
| | py | Python |diff
| | — | Unified diff |markdown
| | md | Markdown |vue
| | markdown-vue | Vue SFC |html
| | html-derivative | HTML / derivatives |css
| | — | CSS |go
| | — | Go |rust
| | — | Rust |yaml
| | yml | YAML |cpp
| | c++ | C++ (CDN) |java
| | — | Java (CDN) |c
| | — | C (CDN) |csharp
| | cs, c# | C# (CDN) |php
| | — | PHP (CDN) |ruby
| | — | Ruby (CDN) |kotlin
| | — | Kotlin (CDN) |swift
| | — | Swift (CDN) |sql
| | — | SQL (CDN) |registerShikiLanguages. Fences that reference an unregistered language fall back to plain (with a development warning) instead of pulling in extra grammars.CodeBlock$3
now provides:hideCopy
| -------------------------- | ----------------------------- | ------- | -------------------------------------------------------------------------------------- |
| Copy button | (boolean) | false | Uses Clipboard API; auto‑binds code via context. |hideDownload
| Download button | (boolean) | false | Generates file with inferred extension (lightweight mapping). |showLineNumbers
| Line numbers | (boolean) | false | Injects prefixes. |selectable
| Selectability toggle | (boolean) | true | Adds select-none on when disabled. |:actions="[MyBtn]"
| Per‑block custom actions | | [] | Array of components/render fns appended right of header. |
| Slot actions | | — | Slot for ad‑hoc buttons (highest flexibility). |provide
| Global actions | App | — | Provide once: app.provide(GLOBAL_CODE_BLOCK_ACTIONS, [MyBtn]). |inject(CODE_BLOCK_META_KEY)
| Context access for actions | | — | Retrieve { code, language } without prop drilling. |$3
; customize all code blocks via pass‑through props:`vue`
:code-block-actions="[MyShareButton]"
code-block-show-line-numbers
code-block-hide-download
/> map (key: codeblock):`ts`
const Minimal = defineComponent({
props: { code: String, language: String },
setup(p) { return () => h('pre', [h('code', p.code)]) }
});vue`
language="ts"
:actions="[MyShareButton, MyRunButton]"
/>vue`
ts`
import { GLOBAL_CODE_BLOCK_ACTIONS } from 'streamdown-vue';
app.provide(GLOBAL_CODE_BLOCK_ACTIONS, [MyShareButton]);ts`
import { defineComponent, inject } from 'vue';
import { CODE_BLOCK_META_KEY } from 'streamdown-vue';
setup() {
const meta = inject(CODE_BLOCK_META_KEY)!; // { code, language }
const share = () => navigator.share?.({ text: meta.code });
return () => ;
},
});$3
vue`
language="ts"
hide-copy
hide-download
:actions="[MyShareButton]"
/>$3
. Example Tailwind tweaks:`css`
[data-streamdown='code-body'] .code-line-number {
@apply text-gray-400 dark:text-gray-500 select-none;
}11. Mermaid Diagrams
md`mermaid`
graph TD;A-->B;B-->C; component handles:components
- Simple hash based caching
- Error fallback (last good diagram)
- Copy diagram source if you need advanced theming.StreamMarkdown12. Math & LaTeX Helpers
$3
automatically injects remark-math + rehype-katex _unless you supply your own_ via the remarkPlugins prop. The built‑in configuration intentionally sets singleDollarTextMath: false so that plain currency like $390K or $80–140K is not misinterpreted as inline math (a common issue during streaming where a later $ closes a huge unintended span).$$ ... $$
- (If you add them) Inline math via or by providing your own remark-math with single‑dollar enabled.$x + y$$3
style inline math, provide your own configured plugin tuple. When you do this the built‑in math plugin is skipped:`ts`
import remarkMath from 'remark-math';
:remark-plugins="[[remarkMath, { singleDollarTextMath: true }]]"
/>$3
| ------------------- | ---------------------------------------------------------------------- |
| | (Optional) Escape truly stray $ you decide are currency, if desired. |fixMatrix
| | Ensure matrix environments have proper row \\ line breaks. |`ts`
import { fixMatrix, fixDollarSignMath } from 'streamdown-vue';13. Utilities
$3
, _, `, ~~, $$ blocks, links/images) so partial buffers still render.requestAnimationFrame$3
14. Performance Tips
).
- Reuse a single instance; change only content prop.docs/performance.md
- Avoid running large custom remark/rehype plugins on every partial—they run on full text.
- If highlighting is heavy for enormous fences, lazy-replace code block component after final chunk.
- Use server-side rendering for initial payload to reduce Total Blocking Time.) show ~56ms render of the complex fixture under Bun (subject to change).`15. Nuxt 3 Usage & SSR Notes
$3
bash`
npm i streamdown-vueor: bun add streamdown-vue
$3
(client only so Shiki & Mermaid load in browser):`ts`
// plugins/streamdown.client.ts
import 'katex/dist/katex.min.css'; // once globally
// (Optional) warm the Shiki highlighter so first code block is instant
import { useShikiHighlighter } from 'streamdown-vue';
useShikiHighlighter();. No manual config required unless you disabled auto import.`$3
vue`
$3
ts`
// components/StreamMarkdown.client.ts
export { StreamMarkdown as default } from 'streamdown-vue'; is available automatically (Nuxt scans components/).`$3
vue`
:allowed-link-prefixes="['https://', '/']"
:allowed-image-prefixes="['https://cdn.myapp.com/']"
default-origin="https://myapp.com"
/>) will resolve against defaultOrigin then be validated.`$3
ts`
// server/api/chat.get.ts
export default defineEventHandler(async (event) => {
const encoder = new TextEncoder();
const parts = [
'# Chat Log\n',
'\nHello **world',
'** from',
' streamed',
' markdown.',
];
const stream = new ReadableStream({
start(controller) {
let i = 0;
const tick = () => {
if (i < parts.length) {
controller.enqueue(encoder.encode(parts[i++]));
setTimeout(tick, 300);
} else controller.close();
};
tick();
},
});
setHeader(event, 'Content-Type', 'text/plain; charset=utf-8');
return stream; // Nuxt will send as a stream
});$3
ts`
// composables/useStreamedMarkdown.ts
import { ref } from 'vue';
import { parseBlocks, parseIncompleteMarkdown } from 'streamdown-vue';
const rendered = ref('');
const raw = ref('');
const res = await fetch(url);
const reader = res.body!.getReader();
let buf = '';
const decoder = new TextDecoder();
while (true) {
const { value, done } = await reader.read();
if (done) break;
buf += decoder.decode(value, { stream: true });
// repair, split, join
const repaired = parseIncompleteMarkdown(buf);
rendered.value = parseBlocks(repaired).join('');
raw.value = buf;
}
};
}$3
vue`
$3
- Shiki highlighting of large code blocks happens client-side; if you need critical highlighted code for SEO, pre-process the markdown on the server and send the HTML (future enhancement: server highlight hook).
- Ensure Mermaid is only executed client-side (the provided plugin pattern handles this since the component executes render logic on mount).$3
| ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| Copy / Download button not showing | Ensure default not overridden or your custom block renders desired buttons (remove hideCopy / hideDownload). |allowed-link-prefixes
| Links stripped | Adjust / set default-origin to resolve relative paths first. |allowed-image-prefixes
| Images missing | Add CDN prefix to . |requestAnimationFrame
| Flash of unstyled math | Confirm KaTeX CSS loaded in client plugin before first render. |
| High CPU on huge streams | Throttle updates (wrap repair/render in or batch by char count). |16. Recipe Gallery
| ------------------------------------- | ----------------------------------------------------------- |
| AI Chat | Combine streaming buffer + (tutorial §4) |:allowed-image-prefixes
| Restrict to CDN images | Set |
| Override style | :components="{ table: MyTable }" |:remark-plugins="[myRemark]"
| Add custom remark plugin | |examples/basic
| Append footer paragraph automatically | remark plugin injecting node |
| Basic local Vue example | See in repo |`ts`
const remarkAppend = () => (tree: any) => {
tree.children.push({ type: 'paragraph', children: [{ type: 'text', value: 'Tail note.' }] });
};17. FAQ
). Add a sanitizer plugin if you purposely enable raw HTML.:shiki-theme="{ light: 'github-light', dark: 'github-dark' }" for instant CSS-based theme switching without re-renders, or pass a single theme string for traditional reactive theme switching.`18. Development & Contributing
bash`
bun install
bun test # run tests (fast)
bun run build # build library (types + bundles)License
$3
ts``
let buffer = '';
for await (const chunk of stream) {
buffer += chunk;
buffer = parseIncompleteMarkdown(buffer);
const blocks = parseBlocks(buffer);
state.markdown = blocks.join('');
}