### Install and Run Playground Locally

Source: https://markstream.simonhe.me/guide/playground

Use these commands to install dependencies and start the local development server for the Markstream playground.

```bash
pnpm install
pnpm play
# Open the dev server shown in terminal (usually http://localhost:5173)
```

--------------------------------

### Installing and Running Nuxt Playground

Source: https://markstream.simonhe.me/nuxt-ssr

Commands to install dependencies and start the Nuxt playground for testing SSR features.

```bash
pnpm install
pnpm play:nuxt
```

--------------------------------

### Running the Playground Locally

Source: https://markstream.simonhe.me/guide/mermaid-export-demo

This command installs dependencies and starts the Markstream playground. You can then access the demo at the specified local URL.

```bash
pnpm play
# open http://localhost:5173/mermaid-export-demo or navigate to the route in the playground

```

--------------------------------

### Install Dependencies

Source: https://markstream.simonhe.me/llms

Use this command to install all necessary dependencies for the project.

```bash
pnpm install
```

--------------------------------

### Install All Features

Source: https://markstream.simonhe.me/guide/react-installation

Install all optional peer dependencies at once to enable all features of markstream-react.

```bash
pnpm add stream-markdown stream-monaco mermaid @terrastruct/d2 katex
# or
npm install stream-markdown stream-monaco mermaid @terrastruct/d2 katex
```

--------------------------------

### Start Playground Development Server

Source: https://markstream.simonhe.me/llms

Run this command to start the development server for the playground environment.

```bash
pnpm dev
```

--------------------------------

### Install KaTeX

Source: https://markstream.simonhe.me/guide/math

Install the KaTeX peer dependency using pnpm.

```bash
pnpm add katex
```

--------------------------------

### Install markstream-react

Source: https://markstream.simonhe.me/frameworks/react

Install the markstream-react package using pnpm.

```bash
pnpm add markstream-react
```

--------------------------------

### Install markstream-vue using npx skills

Source: https://markstream.simonhe.me/guide/ai-workflows

Use this command to install the markstream-vue skills from a GitHub repository. It's the recommended approach for Codex-compatible skill installation.

```bash
npx skills add Simon-He95/markstream-vue
```

--------------------------------

### Install Optional Peers

Source: https://markstream.simonhe.me/frameworks/vue

Install optional peer dependencies for diagrams, math, and code block rendering. Use pnpm for installation.

```bash
pnpm add mermaid katex   # diagrams and math
pnpm add stream-monaco    # Monaco code blocks
pnpm add @antv/infographic @terrastruct/d2  # additional diagram types
```

--------------------------------

### Install monaco-editor with pnpm

Source: https://markstream.simonhe.me/guide/monaco-internals

Install the monaco-editor library using the pnpm package manager.

```bash
pnpm add stream-monaco
```

--------------------------------

### Simple CodeBlock Render Example

Source: https://markstream.simonhe.me/guide/code-blocks

Demonstrates how to use the CodeBlockNode component in a Vue setup. This example shows a basic JavaScript code block.

```vue
<script setup lang="ts">
import type { CodeBlockNodeProps } from 'markstream-vue'
import { 
CodeBlockNode
 } from 'markstream-vue'

const 
node
 = {
  
type
: 'code_block',
  
language
: 'js',
  
code
: 'console.log(42)',
  
raw
: 'console.log(42)',
} satisfies CodeBlockNodeProps['node']
</script>

<template>
  <
CodeBlockNode
 
:node
="
node
" />
</template>
```

--------------------------------

### Quick Test: Render Markdown

Source: https://markstream.simonhe.me/guide/react-installation

Import and render a simple markdown string using `MarkdownRender` and its default CSS. This is a basic example to quickly test the installation.

```tsx
import MarkdownRender from 'markstream-react'
import 'markstream-react/index.css'

function App() {
  const md = '# Hello from markstream-react!'

  return <MarkdownRender content={md} />
}

export default App
```

--------------------------------

### Install D2 Package

Source: https://markstream.simonhe.me/guide/d2

Install the D2 package using pnpm.

```bash
pnpm add @terrastruct/d2
```

--------------------------------

### Install markstream-vue

Source: https://markstream.simonhe.me/frameworks/vue

Install the markstream-vue package using pnpm.

```bash
pnpm add markstream-vue
```

--------------------------------

### Install @vue/composition-api for Vue 2.6.x

Source: https://markstream.simonhe.me/guide/vue2-quick-start

Install the @vue/composition-api package for Vue 2.6.x.

```bash
pnpm add @vue/composition-api
```

--------------------------------

### Minimal Install for Vue/Nuxt

Source: https://markstream.simonhe.me/guide/installation

Install the main markstream-vue package. Use this for basic Markdown rendering.

```bash
pnpm add markstream-vue
# or
npm install markstream-vue
# or
yarn add markstream-vue
```

--------------------------------

### Install Everything Enabled

Source: https://markstream.simonhe.me/guide/installation

Install all available peer packages for Markstream Vue, including stream-markdown, stream-monaco, mermaid, @terrastruct/d2, and katex, for maximum functionality.

```bash
pnpm add markstream-vue stream-markdown stream-monaco mermaid @terrastruct/d2 katex
```

--------------------------------

### Install markstream-vue2

Source: https://markstream.simonhe.me/guide/vue2-quick-start

Install the markstream-vue2 package using pnpm.

```bash
pnpm add markstream-vue2
```

--------------------------------

### Install markstream-react

Source: https://markstream.simonhe.me/guide/react-installation

Install the markstream-react package using your preferred package manager.

```bash
pnpm add markstream-react
# or
npm install markstream-react
# or
yarn add markstream-react
```

--------------------------------

### Install markstream-angular

Source: https://markstream.simonhe.me/frameworks/angular

Install the markstream-angular package using pnpm.

```bash
pnpm add markstream-angular
```

--------------------------------

### Install Optional Peers for Markstream

Source: https://markstream.simonhe.me/use-cases/streaming-mermaid-katex

Install specific optional peer dependencies like Mermaid and KaTeX based on your AI output needs.

```bash
# Only Mermaid (no math)
pnpm add mermaid

# Only KaTeX (no diagrams)
pnpm add katex

# Both
pnpm add mermaid katex

# All heavy peers
pnpm add mermaid katex stream-monaco @terrastruct/d2 @antv/infographic
```

--------------------------------

### Install for Diagram-Heavy Content

Source: https://markstream.simonhe.me/guide/installation

Install Markstream Vue with mermaid, @terrastruct/d2, and katex for applications that heavily feature diagrams and mathematical content.

```bash
pnpm add markstream-vue mermaid @terrastruct/d2 katex
```

--------------------------------

### Install AntV Infographic Library

Source: https://markstream.simonhe.me/guide/infographic

Install the `@antv/infographic` library using npm. This is a prerequisite for rendering infographic charts.

```bash
npm install @antv/infographic
```

--------------------------------

### Install markstream-vue2

Source: https://markstream.simonhe.me/guide/vue2-installation

Install the markstream-vue2 package using pnpm, npm, or yarn.

```bash
pnpm add markstream-vue2
```

```bash
# or
npm install markstream-vue2
```

```bash
# or
yarn add markstream-vue2
```

--------------------------------

### Install markstream-react

Source: https://markstream.simonhe.me/frameworks/next

Install the markstream-react package using pnpm. Import the CSS styles once in your app's layout or entry file.

```bash
pnpm add markstream-react
```

```tsx
// app/layout.tsx or pages/_app.tsx
import 'markstream-react/index.css'
```

--------------------------------

### Start Local Playground for Svelte

Source: https://markstream.simonhe.me/guide/svelte

Launch the local development playground for the Svelte renderer using pnpm.

```bash
pnpm play:svelte
```

--------------------------------

### Vue 2.7.x Repo Root Command

Source: https://markstream.simonhe.me/guide/vue2-installation

Start the Vue 2.7.x development server from the repository root.

```bash
pnpm play:vue2
```

--------------------------------

### Install Mermaid and KaTeX for Vue

Source: https://markstream.simonhe.me/use-cases/streaming-mermaid-katex

Install the necessary packages for Mermaid and KaTeX support in a Vue.js application.

```bash
pnpm add markstream-vue mermaid
```

--------------------------------

### Install KaTeX for Vue

Source: https://markstream.simonhe.me/use-cases/streaming-mermaid-katex

Install the KaTeX package for rendering mathematical expressions in a Vue.js application.

```bash
pnpm add markstream-vue katex
```

--------------------------------

### Install markstream-vue with different GitHub URL formats

Source: https://markstream.simonhe.me/guide/ai-workflows

The Vercel `skills` installer supports various source formats for adding skills, including GitHub shorthand, full URLs, direct paths to specific skills, and any git URL.

```bash
# GitHub shorthand (owner/repo)
npx skills add Simon-He95/markstream-vue

# Full GitHub URL
npx skills add https://github.com/Simon-He95/markstream-vue

# Direct path to one skill in this repo
npx skills add https://github.com/Simon-He95/markstream-vue/tree/main/.agents/skills/markstream-install

# Any git URL
npx skills add git@github.com:Simon-He95/markstream-vue.git
```

--------------------------------

### Install Shiki for Code Highlighting

Source: https://markstream.simonhe.me/guide/react-installation

Install the `stream-markdown` package to enable Shiki-based code syntax highlighting within `MarkdownCodeBlockNode`.

```bash
pnpm add stream-markdown
```

--------------------------------

### Vue 2.6.x Repo Root Command

Source: https://markstream.simonhe.me/guide/vue2-installation

Start the Vue 2.6.x development server from the repository root.

```bash
pnpm play:vue2-cli
```

--------------------------------

### Install Mermaid Package

Source: https://markstream.simonhe.me/guide/mermaid

Install the Mermaid package using pnpm. No additional CSS import is needed for basic functionality.

```bash
pnpm add mermaid
```

--------------------------------

### Installing stream-markdown-parser

Source: https://markstream.simonhe.me/compare/marked-markdown-it

Installs the 'stream-markdown-parser' package using pnpm, which provides markdown-it-compatible parsing with streaming support.

```bash
pnpm add stream-markdown-parser
```

--------------------------------

### Install Vite Legacy Plugin

Source: https://markstream.simonhe.me/guide/legacy-builds

Install the Vite legacy plugin as a development dependency.

```bash
pnpm add -D @vitejs/plugin-legacy
```

--------------------------------

### Install for Docs Site or SSR-First App

Source: https://markstream.simonhe.me/guide/installation

Install Markstream Vue with stream-markdown for lightweight highlighted code blocks, suitable for documentation sites and SSR applications.

```bash
pnpm add markstream-vue stream-markdown
```

--------------------------------

### Enable Math Formulas (KaTeX)

Source: https://markstream.simonhe.me/guide/react-quick-start

Install 'katex' and import its CSS to enable KaTeX math formula rendering.

```bash
pnpm add katex
```

```tsx
import 'markstream-react/index.css'
import 'katex/dist/katex.min.css'

function App() {
  const markdown = `#### Math Example

Inline math: $E = mc^2$

Block math:

$$ 
\\int_0^\infty e^{-x^2} dx = \\frac{\\sqrt{\\pi}}{2} 
$$
`

  return <MarkdownRender content={markdown} />
}
```

--------------------------------

### Install All Features (npm)

Source: https://markstream.simonhe.me/guide/vue2-installation

Installs markstream-vue2 along with all optional features using npm. This includes support for code syntax highlighting, Monaco Editor, Mermaid, D2 diagrams, and KaTeX.

```bash
npm install stream-markdown stream-monaco mermaid @terrastruct/d2 katex
```

--------------------------------

### Install stream-markdown

Source: https://markstream.simonhe.me/guide/code-blocks

Install the stream-markdown package for Shiki-based code block rendering. This option uses a lightweight Markdown-driven renderer.

```bash
pnpm add stream-markdown
# or
npm i stream-markdown
```

--------------------------------

### Install Optional Peer Dependencies

Source: https://markstream.simonhe.me/guide/angular-installation

Install optional packages for features like Monaco code blocks, Mermaid diagrams, KaTeX math, D2 diagrams, and AntV infographics.

```bash
pnpm add stream-monaco mermaid katex @terrastruct/d2 @antv/infographic
```

--------------------------------

### Install for AI/Chat UI with Richer Code Blocks and Diagrams

Source: https://markstream.simonhe.me/guide/installation

Install Markstream Vue with stream-monaco, mermaid, and katex for AI chat interfaces requiring advanced code block features, diagram rendering, and math support.

```bash
pnpm add markstream-vue stream-monaco mermaid katex
```

--------------------------------

### Install stream-monaco

Source: https://markstream.simonhe.me/guide/code-blocks

Install the stream-monaco package for Monaco-based code block rendering. This is recommended for large or interactive code blocks.

```bash
pnpm add stream-monaco
# or
npm i stream-monaco
```

--------------------------------

### Basic Markdown Parsing Example

Source: https://markstream.simonhe.me/guide/parser-api

A simple example demonstrating how to initialize the markdown parser and parse a string into a structure. The resulting nodes can be rendered using the MarkdownRender component.

```typescript
import { getMarkdown, parseMarkdownToStructure } from 'markstream-vue'

const md = getMarkdown()
const nodes = parseMarkdownToStructure('Hello **world**', md)
console.log(nodes)
// Render with <MarkdownRender :nodes="nodes" />
```

--------------------------------

### Prompt to install markstream in a Vue 3 app

Source: https://markstream.simonhe.me/guide/ai-workflows

Use this prompt when instructing an AI to install `markstream-vue` into an existing Vue 3 application. Specify the smallest peer-dependency set, CSS stack, and rendering requirements.

```text
Install markstream-vue into this Vue 3 app.
Use the smallest peer-dependency set that matches these needs: [fill in Monaco / Mermaid / D2 / KaTeX / Shiki].
Keep CSS order safe with my existing stack: [fill in Tailwind / UnoCSS / reset library].
Add one minimal render example, and explain whether I should use `content` or `nodes`.
If you replace or override anything, keep it scoped with `custom-id`.
```

--------------------------------

### Install Webpack Dependencies

Source: https://markstream.simonhe.me/guide/legacy-builds

Install necessary dependencies for Webpack legacy builds, including Babel core, loader, presets, and polyfills.

```bash
pnpm add -D @babel/core babel-loader @babel/preset-env core-js regenerator-runtime webpack webpack-cli
```

--------------------------------

### Install All Features (pnpm)

Source: https://markstream.simonhe.me/guide/vue2-installation

Installs markstream-vue2 along with all optional features using pnpm. This includes support for code syntax highlighting, Monaco Editor, Mermaid, D2 diagrams, and KaTeX.

```bash
pnpm add stream-markdown stream-monaco mermaid @terrastruct/d2 katex
```

--------------------------------

### MarkdownRender Quick Example

Source: https://markstream.simonhe.me/guide/props

A basic example of using the `MarkdownRender` component in Vue to display Markdown content. It includes importing the component and passing content and various props for rendering.

```vue
<script setup lang="ts">
import MarkdownRender from 'markstream-vue'

const md = '# Title\n\nSome content here.'
</script>

<template>
  <MarkdownRender
    :content="md"
    custom-id="docs"
    :viewport-priority="true"
    :code-block-stream="true"
  />
</template>
```

--------------------------------

### Quick Mermaid Markdown Example

Source: https://markstream.simonhe.me/guide/mermaid

A simple Markdown snippet to quickly test Mermaid diagram rendering.

```md
\`\`\`mermaid
graph LR
A[Start]-->B
B-->C[End]
\`\`\`
```

--------------------------------

### Run Development Server

Source: https://markstream.simonhe.me/guide/contributing

Starts the VitePress documentation server for local preview. Use this to preview new documentation pages.

```bash
pnpm docs:dev
```

--------------------------------

### Enable Mermaid Diagrams

Source: https://markstream.simonhe.me/guide/react-quick-start

Install 'mermaid' to enable Mermaid diagram rendering. Mermaid styles are auto-loaded.

```bash
pnpm add mermaid
```

```tsx
import 'markstream-react/index.css'

function App() {
  const markdown = `#### Mermaid Diagram

\`\`\`mermaid
graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Keep trying]
\`\`\``

  return <MarkdownRender content={markdown} />
}
```

--------------------------------

### Enable Code Syntax Highlighting

Source: https://markstream.simonhe.me/guide/react-quick-start

Install 'stream-markdown' and configure custom components to enable Shiki-based code syntax highlighting.

```bash
pnpm add stream-markdown
```

```tsx
import MarkdownRender, { MarkdownCodeBlockNode, setCustomComponents } from 'markstream-react'

// Use Shiki-based code blocks inside MarkdownRender
setCustomComponents({
  code_block: ({ node, isDark, ctx }: any) => (
    <MarkdownCodeBlockNode
      node={node}
      isDark={isDark}
      stream={ctx?.codeBlockStream}
      {...(ctx?.codeBlockProps || {})}
    />
  ),
})

function App() {
  const markdown = `\`\`\`javascript
const hello = 'world'
console.log(hello)
\`\`\``

  return <MarkdownRender content={markdown} />
}
```

--------------------------------

### Complete Minimal Setup with Custom Code Block Component

Source: https://markstream.simonhe.me/guide/echarts

A full example demonstrating how to set up Markstream Vue with a custom component for 'code_block' type, specifically for rendering ECharts configurations. This approach uses a custom Vue component (EChartsBlockNode) to interpret and render ECharts JSON.

```typescript
import MarkdownRender, { setCustomComponents } from 'markstream-vue'
// main.ts
import { createApp } from 'vue'
import EChartsBlockNode from './EChartsBlockNode.vue'
import 'markstream-vue/index.css'
import 'echarts'

// Register custom component
setCustomComponents({
  code_block: EChartsBlockNode
})

const app = createApp({
  components: { MarkdownRender },
  template: '
    <MarkdownRender :content="markdown" />
  ',
  data() {
    return {
      markdown: '<!-- eslint-disable -->
```echarts
{
  "xAxis": { "type": "category", "data": ["A", "B", "C"] },
  "yAxis": { "type": "value" },
  "series": [{ "type": "bar", "data": [10, 20, 30] }]
}
```'
    }
  }
})

app.mount('#app')
```

--------------------------------

### Serve Docs

Source: https://markstream.simonhe.me/llms

Command to serve the built documentation site.

```bash
pnpm docs:serve
```

--------------------------------

### Preview Docs Locally

Source: https://markstream.simonhe.me/guide/contributing

After running `pnpm docs:dev`, open the provided URL in your browser. Add a new markdown file (e.g., `docs/guide/new-page.md`) and confirm that the documentation builds correctly.

```bash
# open http://localhost:5173, add docs/guide/new-page.md and confirm build
```

--------------------------------

### Build Docs

Source: https://markstream.simonhe.me/llms

Command to build the static documentation site.

```bash
pnpm docs:build
```

--------------------------------

### Run Local Legacy Build (Vite)

Source: https://markstream.simonhe.me/guide/legacy-builds

Build a local legacy version of your Vite project and test it on an older device or simulator.

```bash
pnpm build
# verify modern + legacy bundles output and test on an older device or simulator
```

--------------------------------

### Install Dependencies for Vue Virtual Scroller

Source: https://markstream.simonhe.me/guide/performance

Install the necessary dependencies for `vue-virtual-scroller` and `markstream-vue` using pnpm.

```bash
pnpm add vue-virtual-scroller markstream-vue mermaid katex stream-monaco
```

--------------------------------

### Install ECharts Dependency

Source: https://markstream.simonhe.me/guide/echarts

Install the ECharts library using npm or pnpm to use it with the custom component.

```bash
pnpm add echarts
# or
npm install echarts
```

--------------------------------

### Install Markstream Angular Package

Source: https://markstream.simonhe.me/guide/angular-installation

Install the core Markstream Angular package and its Angular dependencies using pnpm.

```bash
pnpm add markstream-angular @angular/core @angular/common
```

--------------------------------

### Install markstream-svelte and Svelte 5

Source: https://markstream.simonhe.me/frameworks/svelte

Install the markstream-svelte package and ensure you are using Svelte version 5 or later.

```bash
pnpm add markstream-svelte svelte@^5
```

--------------------------------

### Run Tests

Source: https://markstream.simonhe.me/llms

Execute the test suite for the project.

```bash
pnpm test
```

--------------------------------

### Basic Angular Application Setup

Source: https://markstream.simonhe.me/frameworks/angular

Set up a basic Angular standalone application to use the MarkstreamAngularComponent with static Markdown content.

```typescript
import { Component, signal } from '@angular/core'
import { bootstrapApplication } from '@angular/platform-browser'
import { MarkstreamAngularComponent } from 'markstream-angular'
import 'markstream-angular/index.css'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MarkstreamAngularComponent],
  template: '
    <markstream-angular
      [content]="markdown()"
      [final]="true"
    />
  ',
})
class AppComponent {
  readonly markdown = signal(`# Hello Angular

This is **markstream-angular**.`)
}

bootstrapApplication(AppComponent)
```

--------------------------------

### Next.js Client Streaming Example

Source: https://markstream.simonhe.me/frameworks/react

Example of using MarkdownRender in a Next.js 'use client' component for live SSE/WebSocket surfaces. This component is designed for client-side streaming.

```tsx
'use client'

import MarkdownRender from 'markstream-react'
import 'markstream-react/index.css'

export function ChatMessage({ content, isDone }: { content: string, isDone: boolean }) {
  return <MarkdownRender content={content} final={isDone} fade={false} />
}
```

--------------------------------

### Vue 2 TypeScript Usage Example

Source: https://markstream.simonhe.me/guide/vue2-components

An example of using markstream-vue2 with TypeScript in a Vue 2.7+ component. It demonstrates type safety for markdown content and parsed nodes.

```typescript
import type { ParsedNode } from 'markstream-vue2'
import MarkdownRender from 'markstream-vue2'

// Your component with proper typing
import { defineComponent, ref } from 'vue'

export default defineComponent({
  components: { MarkdownRender },
  setup() {
    const markdown = ref('# Hello')
    const nodes = ref<ParsedNode[]>([])

    return { markdown, nodes }
  }
})
```

--------------------------------

### Global Code Block Defaults Example

Source: https://markstream.simonhe.me/guide/props

Demonstrates how to set global default props for code blocks using the `code-block-props` attribute on the `MarkdownRender` component. This example disables the header and font size buttons, and tooltips.

```vue
<template>
  <MarkdownRender
    :content="md"
    :code-block-props="{ showHeader: false, showFontSizeButtons: false, showTooltips: false }"
  />
</template>
```

--------------------------------

### Parser Pipeline Initialization

Source: https://markstream.simonhe.me/guide/usage

Demonstrates how to get a configured `markdown-it-ts` instance and parse Markdown content into a structure (AST) for the renderer. This is useful for custom parsing logic.

```typescript
import { 
getMarkdown
, 
parseMarkdownToStructure
 } from 'markstream-vue'

const 
md
 =
 
getMarkdown
()

const 
nodes
 =
 
parseMarkdownToStructure
('# Title', 
md
)
// pass nodes to <MarkdownRender :nodes="nodes" />
```

--------------------------------

### Streaming SSE Example with markstream-svelte

Source: https://markstream.simonhe.me/frameworks/svelte

Example demonstrating how to use MarkdownRender with streaming Server-Sent Events (SSE) content in Svelte 5. The `final` prop indicates when the stream has ended, and `fade={false}` disables fade-in animations.

```svelte
<script lang="ts">
  import MarkdownRender from 'markstream-svelte'
  import 'markstream-svelte/index.css'

  let content = $state('')
  let final = $state(false)
</script>

<MarkdownRender {content} {final} fade={false} />
```

--------------------------------

### Vue 2.6.x Dependencies

Source: https://markstream.simonhe.me/guide/vue2-installation

Install markstream-vue2 along with Vue 2.6.x and the Composition API plugin.

```bash
pnpm add markstream-vue2 vue@2.6.14 vue-template-compiler@2.6.14 @vue/composition-api
```

--------------------------------

### Enable D2 Diagrams

Source: https://markstream.simonhe.me/guide/react-quick-start

Install '@terrastruct/d2' to enable D2 diagram rendering. Styles are auto-loaded.

```bash
pnpm add @terrastruct/d2
```

```tsx
import 'markstream-react/index.css'

function App() {
  const markdown = `#### D2 Diagram

\`\`\`d2
direction: right
Client -> API: request
API -> DB: query
DB -> API: rows
API -> Client: response
\`\`\``

  return <MarkdownRender content={markdown} />
}
```

--------------------------------

### Running the MarkStream Vue Playground

Source: https://markstream.simonhe.me/guide/troubleshooting

Use the playground to reproduce and debug issues locally. After running the command, open the playground in your browser and create a minimal Markdown sample that exhibits the problem.

```bash
pnpm play
# open the playground and reproduce the issue with a minimal Markdown sample
```