### Project Setup Commands

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

Standard commands for installing dependencies, running the development environment, and executing tests.

```bash
pnpm install
```

```bash
pnpm dev
```

```bash
pnpm docs:dev
```

```bash
pnpm docs:build
```

```bash
pnpm docs:serve
```

```bash
pnpm test
```

```bash
pnpm typecheck
```

```bash
pnpm lint
```

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

### Run Playground Locally

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

Commands to install dependencies and start the development server for the playground.

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

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

### Install all features

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

Install all optional peer dependencies at once.

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

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

### Minimal parsing and registration example

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

A basic setup demonstrating component registration and structure parsing.

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

const md = getMarkdown()
setCustomComponents('docs', { thinking: ThinkingNode })
const nodes = parseMarkdownToStructure('[[CUSTOM:1]]', md)
```

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

### Run Vue 2.6.x playground

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

Commands to start the development environment for the Vue 2.6 CLI example.

```bash
pnpm -C playground-vue2-cli dev
```

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

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

### Run Vue 2.7.x playground

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

Commands to start the development environment for the Vue 2.7 Vite example.

```bash
pnpm -C playground-vue2 dev
```

```bash
pnpm play:vue2
```

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

### Install Mermaid and KaTeX

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

Install optional dependencies for diagrams and math.

```bash
pnpm add mermaid
pnpm add katex
```

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

### Install All Features

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

Install all necessary dependencies for full feature support using pnpm.

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

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

### Install markstream-react

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

Install the core package using your preferred package manager.

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

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

### Install stream-markdown

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

Install the optional peer dependency for advanced features.

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

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

### Install stream-markdown-parser

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

Command to install the standalone streaming parser package.

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

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

### Install KaTeX dependencies

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

Command to install required packages for KaTeX support.

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

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

### Install markstream-vue2

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

Install the package via pnpm.

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

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

### Install markstream-vue2

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

Standard installation commands for the package using common package managers.

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

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

### Install KaTeX dependency

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

Install KaTeX as a peer dependency using pnpm.

```bash
pnpm add katex
```

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

### Install markstream-angular

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

Install the core package and required Angular dependencies.

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

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

### Enable Math Formulas with KaTeX

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

Install katex and import both the component and KaTeX CSS files.

```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} />
}
```

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

### Run Local Playground

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

Command to start the local development playground.

```bash
pnpm play:svelte
```

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

### Install Optional Peer Dependencies

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

Install additional packages for features like Monaco, Mermaid, KaTeX, D2, and AntV.

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

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

### Preview documentation locally

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

Command to start the VitePress documentation server for local development.

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

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

### Install Markstream repository skills

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

Use the shared skills installer to add repository skills directly from GitHub.

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

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

### Install stream-monaco

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

Install the stream-monaco package for full code block functionality.

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

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

### Install markstream-react

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

Add the package to your project using pnpm.

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

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

### Install stream-markdown

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

Use this command to install the dependency required for Shiki-based code block rendering.

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

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

### Run Playground Locally

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

Commands to start the development playground and access the demo route.

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

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

### Enable Mermaid Diagrams

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

Install mermaid and import the required CSS to render diagrams.

```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} />
}
```

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

### Install Mermaid dependencies

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

Command to install required packages for Mermaid support.

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

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

### Install optional peer dependencies

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

Install additional packages for diagrams, math, and enhanced code block rendering.

```bash
pnpm add mermaid katex   # diagrams and math
pnpm add stream-diffs     # enhanced File/Diff code blocks
pnpm add @antv/infographic @terrastruct/d2  # additional diagram types
```

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

### KaTeX streaming chunk example

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

Example of how KaTeX math syntax is received in chunks during a stream.

```text
Chunk 1:  The formula is $
Chunk 2:  The formula is $E = mc
Chunk 3:  The formula is $E = mc^2$
```

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

### Perform a quick test

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

Verify the installation by rendering a basic Markdown string using the MarkdownRender component.

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

type 
MarkdownRenderProps
 = 
InstanceType
<typeof 
MarkdownRender
>['$props']

const 
md
: 
MarkdownRenderProps
['content'] = '# Hello from markstream-vue!'
const 
customId
: 
MarkdownRenderProps
['customId'] = 'install-check'
</script>

<template>
  <
MarkdownRender

    
:content
="
md
"
    
:custom-id
="
customId
"
  />
</template>
```

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

### Install common feature sets

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

Install markstream-vue along with specific peer dependencies for different use cases.

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

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

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

```bash
pnpm add markstream-vue stream-markdown stream-diffs mermaid @terrastruct/d2 katex @antv/infographic
```

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

### Install markstream-svelte

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

Install the package and Svelte 5 dependency via pnpm.

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

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

### Run Local Playground

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

Start the local development environment for the Angular playground.

```bash
pnpm play:angular
```

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

### Install and import Markstream for React or Next.js

Source: https://markstream.simonhe.me/llms-full.txt

Requires the markstream-react package and associated CSS.

```txt
pnpm add markstream-react
import MarkdownRender from 'markstream-react'
import 'markstream-react/index.css'
```

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

### Install markstream-vue

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

Add the package to your project using pnpm.

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

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

### Install D2 dependency

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

Install the required D2 package via pnpm.

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

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

### Install optional peer dependencies

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

Commands to install specific optional peer dependencies based on project 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 Markstream dependencies

Source: https://markstream.simonhe.me/guide/vitepress-docs-integration

Install the core Markstream packages for Vue and Markdown processing.

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

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

### Supported skill installation formats

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

The Vercel skills installer supports various source formats including GitHub shorthand, full URLs, and direct git paths.

```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 Vite Legacy Plugin

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

Install the required plugin for Vite projects to enable legacy build support.

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

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

### Running Nuxt Playground

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

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

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

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

### Render Math Formulas

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

Example usage of inline and block math formulas.

```vue
<script>
import MarkdownRender from 'markstream-vue2'

export default {
  components: { MarkdownRender },
  data() {
    return {
      markdown: `#### Math Example

Inline math: $E = mc^2$

Block math:

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

<template>
  <MarkdownRender :content="markdown" />
</template>
```

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

### Install and import Markstream for Vue or Nuxt

Source: https://markstream.simonhe.me/llms-full.txt

Requires the markstream-vue package and associated CSS.

```txt
pnpm add markstream-vue
import MarkdownRender from 'markstream-vue'
import 'markstream-vue/index.css'
```

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

### Install Mermaid dependency

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

Add the mermaid package to your project using pnpm.

```bash
pnpm add mermaid
```

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

### Install markstream-angular

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

Use pnpm to add the package to your Angular project.

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

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

### Framework-specific CSS setup

Source: https://markstream.simonhe.me/use-cases/mobile-webview

Import the px-based CSS file in your application entry point or layout.

```typescript
// main.ts
import 'markstream-vue/index.px.css'
```

```tsx
// App.tsx or layout
import 'markstream-react/index.px.css'
```

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

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

### Configure Vue 2.7.x app entry

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

Entry point setup for Vue 2.7 projects.

```ts
import MarkdownRender, { VueRendererMarkdown } from 'markstream-vue2'
import Vue from 'vue'
import 'markstream-vue2/index.css'

Vue.use(VueRendererMarkdown)

new Vue({
  render: h => h(MarkdownRender, { props: { content: '# Vue 2.7' } }),
}).$mount('#app')
```

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

### Install stream-diffs package

Source: https://markstream.simonhe.me/guide/code-block-node

Use this command to add the required dependency to your project.

```bash
pnpm add stream-diffs
```

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

### Enable D2 Diagrams

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

Install the @terrastruct/d2 package to support D2 diagram rendering.

```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} />
}
```

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

### Configure CodeBlockMonacoOptions

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

Example of configuring runtime options for CodeBlockNode using the CodeBlockMonacoOptions interface.

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

const 
codeBlockMonacoOptions
 = {
  
fontSize
: 14,
  
lineHeight
: 21,
  
wordWrap
: 'off',
  
renderSideBySide
: true,
  
MAX_HEIGHT
: 640,
} satisfies CodeBlockMonacoOptions
</script>

<template>
  <
MarkdownRender

    
:content
="['```ts', 'const answer = 42', '```'].
join
('\n')"
    
:code-block-monaco-options
="
codeBlockMonacoOptions
"
  />
</template>
```

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

### Migrate to markstream-vue component

Source: https://markstream.simonhe.me/compare/vue-stream-markdown

A basic implementation example for replacing existing markdown renderers with markstream-vue.

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

<template>
  <MarkdownRender :content="content" :final="isDone" :fade="false" />
</template>
```

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

### Install Virtual Scroller Dependencies

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

Required packages for implementing custom virtualized scroll scenarios.

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

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

### Render Diagrams with Markdown

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

Example showing how to include Mermaid and D2 diagrams within the Markdown content.

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

type 
MarkdownRenderProps
 = 
InstanceType
<typeof 
MarkdownRender
>['$props']

const 
md
: 
MarkdownRenderProps
['content'] = `# Hello world\n\nTry a simple Mermaid:\n\n\`\`\`mermaid\ngraph LR\nA-->B\n\`\`\`\n\nTry a simple D2:\n\n\`\`\`d2\ndirection: right\nClient -> API: request\nAPI -> DB: query\nDB -> API: rows\nAPI -> Client: response\n\`\`\`\n`
</script>

<template>
  <
MarkdownRender
 
:content
="
md
" />
</template>
```

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

### Configure main entry file

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

Import the required CSS and initialize the Vue instance.

```javascript
import Vue from 'vue'
import App from './App.vue'
import 'markstream-vue2/index.css'

// For Vue 2.6.x, also install and configure @vue/composition-api
// import VueCompositionAPI from '@vue/composition-api'
// Vue.use(VueCompositionAPI)

new Vue({
  render: h => h(App)
}).$mount('#app')
```

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

### Install and import Markstream for Svelte 5

Source: https://markstream.simonhe.me/llms-full.txt

Requires the markstream-svelte package and Svelte 5 peer dependency.

```txt
pnpm add markstream-svelte svelte@^5
import 'markstream-svelte/index.css'
```

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

### Run the 1.0 release gate

Source: https://markstream.simonhe.me/guide/benchmark-1-0

Executes verification, documentation builds, size checks, and benchmark reports to ensure release readiness.

```bash
pnpm run release:gate:1.0
```

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

### Mermaid streaming chunk example

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

Example of how Mermaid syntax is received in chunks during a stream.

```text
Chunk 1:  ```mermaid
Chunk 2:  flowchart LR
Chunk 3:    Input --> Parser
Chunk 4:    Parser --> Renderer
Chunk 5:    Renderer --> Output
Chunk 6:  ```
```

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

### Import KaTeX styles

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

Include the KaTeX stylesheet for math rendering.

```javascript
import 'katex/dist/katex.min.css'
```

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

### Install ECharts dependency

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

Install the required ECharts package via your preferred package manager.

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

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

### Install stream-diffs

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

Use this command to install the enhanced surface dependency for interactive code blocks.

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

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

### Install AntV Infographic dependency

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

Install the required library via npm to enable infographic support.

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

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

### Configure KaTeX

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

Enable KaTeX support and import required CSS.

```js
import { enableKatex } from 'markstream-vue2'
// main.js
import 'markstream-vue2/index.css'

import 'katex/dist/katex.min.css'

// optional: re-enable or override loader
enableKatex()
```

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

### Development commands

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

Commonly used commands for building, testing, and running the project locally.

```bash
pnpm dev
pnpm play
pnpm build
pnpm build:analyze
pnpm size:check
pnpm test
pnpm docs:dev
```

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

### Implement SSR-first rendering

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

Use the /next entrypoint for server-rendered HTML that hydrates on the client.

```tsx
// app/page.tsx
import MarkdownRender from 'markstream-react/next'

const markdown = '# Hello Next.js'

export default function Page() {
  return <MarkdownRender content={markdown} final />
}
```

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

### Minimal MarkdownRender Implementation

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

Basic setup for rendering markdown content using the MarkdownRender component in a Vue 3 script setup environment.

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

const 
doc
 = '# Usage example\n\nSupports **streaming** nodes.'
</script>

<template>
  <
MarkdownRender
 
custom-id
="docs" 
:content
="
doc
" />
</template>
```

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

### Run Local Legacy Build

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

Execute a build to generate both modern and legacy bundles for testing.

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

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

### Recommended mobile configuration

Source: https://markstream.simonhe.me/use-cases/mobile-webview

A comprehensive configuration for optimal performance in mobile WebViews.

```vue
<MarkdownRender
  mode="chat"
  :content="content"
  :final="isDone"
  node-virtual="auto"
  :max-live-nodes="300"
  :live-node-buffer="60"
  :viewport-priority="true"
  :defer-nodes-until-visible="true"
  :render-code-blocks-as-pre="true"
  :fade="false"
  smooth-streaming="auto"
/>
```

```typescript
import 'markstream-vue/index.px.css'
```

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

### Implement pure server rendering

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

Use the /server entrypoint for rendering Markdown exclusively on the server.

```tsx
// app/server-preview/page.tsx
import MarkdownRender from 'markstream-react/server'

const markdown = '# Server-rendered Markdown'

export default function Page() {
  return <MarkdownRender content={markdown} final />
}
```

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

### Compare Parsing Approaches

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

Demonstrates the difference between static parsing with marked and incremental parsing with Markstream.

```javascript
// marked / markdown-it: parse complete Markdown → HTML string
const html = marked.parse('# Hello\n\n**World**')
// → '<h1>Hello</h1>\n<p><strong>World</strong></p>\n'

// Markstream: incremental parse during streaming
// Chunk 1: "# Hel" → renders partial heading (no error)
// Chunk 2: "# Hello\n\n**Wo" → updates heading, partial bold
// Chunk 3: "# Hello\n\n**World**" → complete render
```

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

### Render markdown content

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

Basic usage example for rendering a markdown string.

```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
```

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

### Mermaid Diagram Syntax

Source: https://markstream.simonhe.me/compare/streamdown

Example of a Mermaid flowchart syntax that can be streamed by LLMs.

```mermaid
flowchart LR
  Input --> Parser --> Renderer --> Output
```

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

### Configure workers for Angular

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

Setup Mermaid and KaTeX workers in an Angular application.

```ts
import { setKaTeXWorker, setMermaidWorker } from 'markstream-angular'
import KatexWorker from 'markstream-angular/workers/katexRenderer.worker?worker'
import MermaidWorker from 'markstream-angular/workers/mermaidParser.worker?worker'

setMermaidWorker(new MermaidWorker())
setKaTeXWorker(new KatexWorker())
```

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

### Configure workers for React

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

Setup Mermaid and KaTeX workers in a React environment.

```tsx
import { setKaTeXWorker, setMermaidWorker } from 'markstream-react'
import KatexWorker from 'markstream-react/workers/katexRenderer.worker?worker&inline'
import MermaidWorker from 'markstream-react/workers/mermaidParser.worker?worker&inline'

setMermaidWorker(new MermaidWorker())
setKaTeXWorker(new KatexWorker())
```

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

### Run the playground locally

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

Use the playground to reproduce and debug rendering issues.

```bash
pnpm play
```

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

### Run the 1.0 benchmark report

Source: https://markstream.simonhe.me/guide/benchmark-1-0

Executes the public benchmark report to generate performance metrics for the 1.0 release.

```bash
pnpm benchmark:1.0
```

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

### Install Vue 3.x dependencies

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

Required dependencies for projects using Vue 3.

```bash
pnpm add markstream-vue vue@^3
```

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

### Install Vue 2.7.x dependencies

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

Required dependencies for projects using Vue 2.7.16.

```bash
pnpm add markstream-vue2 vue@2.7.16 vue-template-compiler@2.7.16
```

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

### Quick registration for playground testing

Source: https://markstream.simonhe.me/guide/image-node

A concise example of registering a custom image component in the VitePress theme configuration.

```typescript
// docs/.vitepress/theme/index.ts
import type { 
App
, 
Component
 } from 'vue'
import { 
setCustomComponents
 } from 'markstream-vue'

declare const 
CustomImageNode
: 
Component


export default ({ 
app
 }: { 
app
: 
App
 }) => 
setCustomComponents
('vitepress-image-preview', { 
image
: 
CustomImageNode
 })
```

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

### Install Vue 2.6.x dependencies

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

Required dependencies for projects using Vue 2.6.14.

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

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

### Import tailwind-ready CSS

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

Use the tailwind-ready CSS variant to avoid duplicating utility classes.

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@import 'markstream-vue/index.tailwind.css';
```

```css
@import 'markstream-vue/index.css';
```

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

### Enable plain pre rendering

Source: https://markstream.simonhe.me/use-cases/streaming-code-blocks

Configuration for mobile or bundle-constrained environments using standard pre tags.

```vue
<MarkdownRender
  :content="content"
  :final="isDone"
  :render-code-blocks-as-pre="true"
/>
```