### Install Webpack Dependencies

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

Installs essential Babel and Webpack dependencies for creating separate modern and legacy bundles.

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

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

### Install and Run Markstream-Vue Playground (Bash)

Source: https://markstream-vue-docs.simonhe.me/guide/playground

Instructions to install dependencies and run the Markstream-Vue playground locally using pnpm. This will start a development server to test features.

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

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

### Basic Mermaid Markdown Example

Source: https://markstream-vue-docs.simonhe.me/guide/mermaid

A simple Markdown snippet that renders a basic Mermaid diagram. This can be directly pasted into a page or component for quick testing.

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

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

### Run Playground Locally (Bash)

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

This command installs dependencies using `pnpm` and starts the local development server for the markstream-vue playground. After running, you can 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

```

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

### Quick Install: All markstream-vue Features

Source: https://markstream-vue-docs.simonhe.me/guide/installation

This command installs all optional peer dependencies for markstream-vue, enabling features like code syntax highlighting, Monaco editor, Mermaid diagrams, and KaTeX math rendering simultaneously. This is a convenient way to set up all functionalities at once.

```bash
pnpm add shiki stream-markdown stream-monaco mermaid katex
# or
npm install shiki stream-markdown stream-monaco mermaid katex
```

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

### Component Documentation Structure Example

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

This markdown structure provides a template for documenting individual components. It includes a quick reference, usage examples, customization options, and common pitfalls to guide users.

```markdown
## ComponentName

> One-line description (problem the component solves)

### Quick Reference
- Best for
- Key props/events (link to API tables)
- Required peers

### Usage
```vue
<!-- Minimal example -->
```

```vue
<!-- Full example + playground link -->
```

### Customize & Integrate 
  * Slots / `setCustomComponents` usage
  * CSS handles (variables, classes)


### Common pitfalls 
  * Browser default style conflicts
  * Peer dependency requirements

```

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

### Install and Run markstream-vue Playground (Bash)

Source: https://markstream-vue-docs.simonhe.me/guide/thanks

Instructions for installing project dependencies and running the local playground using pnpm. The playground allows testing interactive demos and is accessible via a development server URL provided upon execution.

```bash
pnpm install
pnpm play
```

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

### Install Vite Legacy Plugin

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

Installs the necessary Vite plugin for legacy browser support. This is a development dependency.

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

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

### Install Dependencies (pnpm)

Source: https://markstream-vue-docs.simonhe.me/monorepo-migration

This bash command installs all project dependencies using pnpm, a common command for managing packages in monorepos.

```bash
pnpm install
```

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

### Install markstream-vue for Code Syntax Highlighting

Source: https://markstream-vue-docs.simonhe.me/guide/installation

This command installs the necessary packages (`shiki` and `stream-markdown`) to enable code syntax highlighting within markstream-vue. This feature enhances the readability of code blocks by applying different styles to keywords, strings, and other elements.

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

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

### Vue.js Streaming Mermaid Example

Source: https://markstream-vue-docs.simonhe.me/guide/mermaid

A Vue.js component demonstrating progressive rendering of a Mermaid diagram. The diagram is built incrementally, showing how markstream-vue handles streaming content, ideal for AI-generated responses or long tasks.

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

const content = ref('')
const steps = [
  '```mermaid\n',
  'graph TD\n',
  'A[Start]-->B{Is valid?}\n',
  'B -- Yes --> C[Render]\n',
  'B -- No  --> D[Wait]\n',
  '```\n',
]

let i = 0
const id = setInterval(() => {
  content.value += steps[i] || ''
  i++
  if (i >= steps.length)
    clearInterval(id)
}, 120)
</script>

<template>
  <MarkdownRender :content="content" />
  <!-- Diagram progressively appears as content streams in -->
</template>

```

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

### Install KaTeX Dependency

Source: https://markstream-vue-docs.simonhe.me/guide/math

Installs the KaTeX library as a peer dependency for math rendering. This command uses pnpm package manager.

```bash
pnpm add katex
```

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

### Local Translation Validation Example (Bash)

Source: https://markstream-vue-docs.simonhe.me/guide/translation

Command to run the local development server for validating translations. After running, switch to the '/zh/' locale via the language selector to confirm correct rendering.

```bash
pnpm docs:dev
# switch to /zh/ using the language selector and confirm pages render
```

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

### Install markstream-vue with pnpm, npm, or yarn

Source: https://markstream-vue-docs.simonhe.me/guide/installation

This section provides the commands to install the markstream-vue package using the most common JavaScript package managers: pnpm, npm, and yarn. No specific input is required, and the output is the successful installation of the package.

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

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

### Mermaid Diagram Rendering in Vue.js

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

This example showcases how to render Markdown content that includes Mermaid diagrams using Markstream-Vue. It's similar to the basic example but includes a Mermaid code block within the Markdown string. For Nuxt/SSR environments, consider wrapping the component with `<client-only>`.

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

const md = `# Hello world\n\nTry a simple Mermaid:\n\n```mermaid\ngraph LR\nA-->B\n```\n`
</script>

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

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

### VitePress Configuration (TypeScript)

Source: https://markstream-vue-docs.simonhe.me/guide/deploy

Example of setting the `base` path in VitePress configuration file (`docs/.vitepress/config.ts`). This is crucial for hosting the documentation at a specific sub-path, like `https://USERNAME.github.io/REPO/`.

```typescript
import { defineConfig } from 'vitepress'

export default defineConfig({
  // ... other configurations
  base: '/REPO/' // Replace /REPO/ with your repository name
  // ...
})
```

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

### Install markstream-vue for Mermaid Diagrams

Source: https://markstream-vue-docs.simonhe.me/guide/installation

This command installs the `mermaid` package, which is required for rendering Mermaid diagrams within your markdown content when using markstream-vue. Mermaid allows you to create flowcharts, sequence diagrams, and more from text.

```bash
pnpm add mermaid
```

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

### Basic Markdown Rendering in Vue.js

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

This snippet demonstrates the basic usage of Markstream-Vue for rendering simple Markdown content. It imports the necessary component and CSS, defines a Markdown string, and passes it to the MarkdownRender component. This is suitable for client-side rendering in Vue.

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

const md = `# Hello World\n\nThis is **bold** and this is *italic*.`
</script>

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

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

### Quick Playground Page Example (Vue)

Source: https://markstream-vue-docs.simonhe.me/guide/playground

A simple Vue component demonstrating how to create a basic playground page. It imports `MarkdownRender` and displays a Markdown string with basic formatting.

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

const md = '# Quick playground test\n\nThis is a demo.'
</script>

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

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

### Build Legacy Bundle (Vite)

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

Executes the build command for a Vite project configured with the legacy plugin, generating both modern and legacy bundles.

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

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

### MarkdownRender Component Usage Example (Vue)

Source: https://markstream-vue-docs.simonhe.me/guide/props

A basic Vue component setup demonstrating how to use the MarkdownRender component with its core props like 'content', 'custom-id', 'viewport-priority', and 'code-block-stream'.

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

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

### Run Development Server - Local Search Test

Source: https://markstream-vue-docs.simonhe.me/guide/search

Command to start the local development server for MarkStream Vue docs. Allows testing the local search functionality directly in the browser.

```bash
pnpm docs:dev
```

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

### Vue Quick Test: Render a Markdown String with markstream-vue

Source: https://markstream-vue-docs.simonhe.me/guide/installation

This Vue.js component demonstrates a quick test of markstream-vue. It imports the `MarkdownRender` component and its CSS, defines a simple markdown string, and renders it using the component. This example shows the basic usage for displaying markdown content.

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

const md = '# Hello from markstream-vue!'
</script>

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

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

### Install markstream-vue with monaco-editor

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

Installs the stream-monaco package, which includes monaco-editor, using pnpm. This is the initial step to use the Monaco editor within your project.

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

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

### Run Local Docs Development or Build (Bash)

Source: https://markstream-vue-docs.simonhe.me/guide/translation

Commands to run the local documentation development server or build the documentation. Used to test translated content and ensure integrity before submitting a Pull Request.

```bash
pnpm docs:dev
# or
pnpm docs:build
```

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

### Run Tests (pnpm)

Source: https://markstream-vue-docs.simonhe.me/monorepo-migration

These bash commands show how to run tests for all packages within the monorepo or specifically for the parser package using pnpm.

```bash
# Test all packages
pnpm test

# Test parser only
cd packages/markdown-parser
pnpm test
```

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

### Stream Markdown Content with Markstream-Vue

Source: https://markstream-vue-docs.simonhe.me/guide/examples

This example demonstrates how to stream Markdown content character by character using Markstream-Vue. It utilizes Vue's `ref` for reactive content and `setInterval` to simulate streaming. The `MarkdownRender` component displays the progressively updated content.

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

const content = ref('')
const fullContent = `# Streaming Content\n\nThis text appears character by character...`
let i = 0
const interval = setInterval(() => {
  if (i < fullContent.length) {
    content.value += fullContent[i]
    i++
  }
  else {
    clearInterval(interval)
  }
},
 50)
</script>

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

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

### Import Mermaid CSS

Source: https://markstream-vue-docs.simonhe.me/guide/mermaid

Imports the Mermaid CSS file. It should be placed after any CSS resets and within `@layer components` if using Tailwind/UnoCSS to ensure proper styling.

```typescript
// main.ts / entry
import 'mermaid/dist/mermaid.css'
```

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

### Importing from markstream-vue (Before Migration)

Source: https://markstream-vue-docs.simonhe.me/monorepo-migration

This TypeScript code demonstrates how utilities were imported from the 'markstream-vue' package before the monorepo migration.

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

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

### Configure and Use Math Rendering

Source: https://markstream-vue-docs.simonhe.me/guide/math

Demonstrates how to customize KaTeX math parsing behavior using `setDefaultMathOptions` and how to obtain the configured markdown parser with `getMarkdown`. It also shows an example of a math expression formatted for markstream-vue.

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

defaultMathOptions({
  commands: ['infty', 'perp'],
  escapeExclamation: true,
})

const md = getMarkdown()

// Example of math expression with escaped delimiters
const example = "\\(E = mc^2\\)"
console.log(example)
```

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

### Publish Main Package (npm)

Source: https://markstream-vue-docs.simonhe.me/monorepo-migration

This bash script details the process for building and publishing the main 'markstream-vue' package to npm. It requires building the package first and then running the publish command.

```bash
cd ../..
pnpm build
npm publish
```

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

### Build Parser Package (pnpm)

Source: https://markstream-vue-docs.simonhe.me/monorepo-migration

This bash command navigates to the markdown-parser package directory and builds it using pnpm. This is a step in the development and publishing workflow.

```bash
cd packages/markdown-parser
pnpm build
```

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

### Build Main Package (pnpm)

Source: https://markstream-vue-docs.simonhe.me/monorepo-migration

This bash command navigates back to the root of the project and builds the main markstream-vue package using pnpm. This follows the build process for the parser package.

```bash
cd ../..
pnpm build
```

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

### Import Mermaid CSS with Tailwind/UnoCSS

Source: https://markstream-vue-docs.simonhe.me/guide/mermaid

Demonstrates importing Mermaid CSS within a layered CSS structure, suitable for frameworks like Tailwind CSS or UnoCSS. This ensures utility classes do not override Mermaid's styles.

```css
@import 'modern-css-reset';

@layer components {
  @import 'mermaid/dist/mermaid.css';
  @import 'markstream-vue/index.css';
}
```

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

### Publish Parser Package (npm)

Source: https://markstream-vue-docs.simonhe.me/monorepo-migration

This bash script outlines the steps to build and publish the 'markdown-parser' package to npm. It involves navigating to the package directory, building it, and then publishing.

```bash
cd packages/markdown-parser
pnpm build
npm publish
```

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

### Minimal Example: parseOptions and Custom Component Registration

Source: https://markstream-vue-docs.simonhe.me/guide/advanced

Demonstrates a concise integration of `parseOptions` for token transformation and `setCustomComponents` for registering a custom component named 'ThinkingNode' under the 'docs' scope. It then parses a simple markdown string containing a custom tag.

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

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

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

### UnoCSS Configuration for markstream-vue Integration

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

Provides an example of configuring UnoCSS to include the markstream-vue library's CSS, specifically setting it within the 'preflights' layer to ensure it's applied correctly during initialization.

```typescript
// uno.config.ts
import { defineConfig, presetUno, presetWind } from 'unocss'

export default defineConfig({
  presets: [presetUno(), presetWind()],
  preflights: [
    {
      layer: 'preflights',
      getCSS: () => '@import "markstream-vue/index.css";',
    },
  ],
})

```

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

### Configure Vite Legacy Plugin

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

Configures the Vite legacy plugin with specified browser targets and polyfill options. It enables differential serving for modern and legacy bundles.

```typescript
import legacy from '@vitejs/plugin-legacy'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'iOS >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
      renderLegacyChunks: true,
    })
  ]
})
```

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

### UnoCSS Configuration with Markstream-Vue Preflight

Source: https://markstream-vue-docs.simonhe.me/guide/tailwind

This UnoCSS configuration example integrates Markstream-Vue by including its CSS within the `preflights` layer. This ensures that Markstream-Vue's base styles are applied correctly alongside UnoCSS presets like `presetUno` and `presetWind`. The `layer: 'preflights'` ensures the CSS runs with the base reset.

```typescript
// uno.config.ts
import { defineConfig, presetUno, presetWind } from 'unocss'

export default defineConfig({
  presets: [presetUno(), presetWind()],
  preflights: [
    {
      // ensures the CSS runs with the base reset
      layer: 'preflights',
      getCSS: () => '@import "markstream-vue/index.css";',
    },
  ],
})
```

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

### Import Tailwind-Ready Markstream-Vue CSS

Source: https://markstream-vue-docs.simonhe.me/guide/tailwind

This example demonstrates importing the `index.tailwind.css` file from Markstream-Vue. This version of the CSS excludes Tailwind utilities, allowing your project's main Tailwind configuration to manage them. This approach is recommended for Tailwind v3+ to avoid duplicate CSS.

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

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

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

### Minimal Vue Render with markstream-vue

Source: https://markstream-vue-docs.simonhe.me/guide/usage

Demonstrates a basic setup for rendering Markdown content in a Vue.js application using the MarkdownRender component. It shows how to import the component, define Markdown content, and pass it as a prop. It also includes the necessary CSS import for styling.

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

```css
@import 'modern-css-reset';

@layer components {
  @import 'markstream-vue/index.css';
}
```

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

### Custom Loading Placeholder for Code Block (Vue)

Source: https://markstream-vue-docs.simonhe.me/guide/codeblock-header

This example shows how to implement a custom loading placeholder within the CodeBlockNode component. The `#loading` slot is used, and its content is displayed when `stream` is false and `loading` is true. It features a spinning loader and descriptive text.

```vue
<CodeBlockNode
  :node="{ type: 'code_block', language: 'python', code: code, raw: code }"
  :stream="false"
  :loading="isLoading"
>
  <template #loading="{ loading, stream }">
    <div v-if="loading && !stream" class="p-4 text-center">
      <div class="animate-spin inline-block w-6 h-6 border-2 border-current border-t-transparent rounded-full" />
      <p class="mt-2 text-sm text-gray-500">Initializing editor...</p>
    </div>
  </template>
</CodeBlockNode>
```

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

### Render Markdown String with Streaming Features (Vue.js)

Source: https://markstream-vue-docs.simonhe.me/guide/features

This snippet demonstrates how to use the MarkdownRender component from markstream-vue to render a Markdown string. It utilizes Vue.js's `<script setup>` syntax and includes a simple Mermaid diagram within the Markdown content, showcasing the streaming-first rendering capabilities.

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

const md = '# Streamed Features\n\n```mermaid\ngraph LR\nA-->B\n```'
</script>

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

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

### Netlify Context for Preview Builds (TOML)

Source: https://markstream-vue-docs.simonhe.me/guide/deploy

Configuration in `netlify.toml` to handle preview builds, specifically for keeping the `playground/` site available. This context defines a separate build command and publish directory for preview deployments.

```toml
[context.deploy-preview]
command = "pnpm run play:build"
publish = "playground/dist"
```

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

### Netlify/Vercel Build Configuration (Environment Variables)

Source: https://markstream-vue-docs.simonhe.me/guide/deploy

Configuration settings for deploying the VitePress site on platforms like Netlify or Vercel. Specifies the build command and the directory to publish. Note the use of `VITEPRESS_BASE` for sub-path deployments.

```bash
# Netlify / Vercel Build Command:
pnpm docs:build

# Netlify / Vercel Publish Directory:
docs/.vitepress/dist

# Netlify Specific Environment Variable for base path:
# For root domain: VITEPRESS_BASE=/
# For sub-path (e.g., /repo-name/): VITEPRESS_BASE=/repo-name/
```

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

### Local Docs Build Test (Bash)

Source: https://markstream-vue-docs.simonhe.me/guide/deploy

Command to locally test the documentation build process. This helps ensure that the static site is generated correctly before deploying. After running, inspect the `docs/.vitepress/dist` directory.

```bash
pnpm docs:build
# inspect docs/.vitepress/dist to verify static site is generated
```

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

### Render Monaco-Enabled Code Block in Vue

Source: https://markstream-vue-docs.simonhe.me/guide/monaco

Render a Monaco-enabled code block using the `CodeBlockNode` component in a Vue application. This example demonstrates how to pass a node object with code block details to the component for rendering. Ensure `stream-monaco` is installed.

```vue
<script setup>
const node = { type: 'code_block', language: 'js', raw: 'console.log(123)', code: 'console.log(123)' }
</script>

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

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

### Configuration & Helpers - setDefaultMathOptions

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

Sets global math rendering options for KaTeX, allowing customization of commands and escape behavior.

```APIDOC
## POST /api/markdown/setDefaultMathOptions

### Description
Set global math rendering options for KaTeX.

### Method
POST

### Endpoint
`/api/markdown/setDefaultMathOptions`

### Parameters
#### Request Body
- **options** (MathOptions) - Required - The math rendering options, including commands and escape settings.

### Request Example
```json
{
  "options": {
    "commands": ["infty", "perp"],
    "escapeExclamation": true
  }
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message that options were set.

#### Response Example
```json
{
  "message": "Global math options set successfully."
}
```
```

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

### Stream Markdown with Typewriter Effect in Markstream-Vue

Source: https://markstream-vue-docs.simonhe.me/guide/examples

This example shows how to enable a typewriter effect when streaming Markdown content using Markstream-Vue. By setting the `typewriter` prop to `true`, the text appears character by character with a typing animation. It requires the `markstream-vue` library.

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

const md = '# Streaming test\n\nThis text appears with a typewriter effect.'
</script>

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

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

### GitHub Pages Deployment CI (YAML)

Source: https://markstream-vue-docs.simonhe.me/guide/deploy

A GitHub Actions workflow for building and deploying the VitePress site to GitHub Pages. It uses the `peaceiris/actions-gh-pages` action to publish the contents of `docs/.vitepress/dist` to the `gh-pages` branch. Ensure your repository is configured for branch publishing if needed.

```yaml
name: Deploy Docs

on:
  push:
    branches:
      - main # Or your default branch

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: 18
      - name: Install Dependencies
        run: pnpm install
      - name: Build Docs
        run: pnpm docs:build
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: docs/.vitepress/dist
          # Optional: if your repo uses a different publishing branch
          # publish_branch: gh-pages
```

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

### Running the MarkStream Vue Local Playground

Source: https://markstream-vue-docs.simonhe.me/guide/troubleshooting

This command-line instruction shows how to run the local playground for MarkStream Vue using pnpm. The playground is essential for reproducing and debugging rendering issues with minimal Markdown samples.

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

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

### Markstream-Vue Package JSON Dependencies

Source: https://markstream-vue-docs.simonhe.me/monorepo-migration

This JSON snippet shows the updated dependencies for the main markstream-vue package, indicating its reliance on the 'stream-markdown-parser' workspace package.

```json
{
  "dependencies": {
    "stream-markdown-parser": "workspace:*"
  }
}
```

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

### Import KaTeX Styles

Source: https://markstream-vue-docs.simonhe.me/guide/math

Imports the necessary KaTeX CSS styles globally in the application's entry file. This ensures KaTeX renders math elements correctly.

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

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

### Internal Code Imports (Before Migration)

Source: https://markstream-vue-docs.simonhe.me/monorepo-migration

This TypeScript snippet shows the old way internal code imported types and functions from local utility files before the monorepo migration.

```typescript
import type { ParsedNode } from './utils/markdown/types'
import { getMarkdown } from './utils/markdown'
```

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

### Internal Code Imports (After Migration)

Source: https://markstream-vue-docs.simonhe.me/monorepo-migration

This TypeScript code demonstrates the updated import paths for internal code after the monorepo migration. Now, types and functions are imported directly from the 'stream-markdown-parser' package.

```typescript
import type { ParsedNode } from 'stream-markdown-parser'
import { getMarkdown } from 'stream-markdown-parser'
```

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

### Parser-Only Usage from stream-markdown-parser

Source: https://markstream-vue-docs.simonhe.me/monorepo-migration

This TypeScript code illustrates how to import utilities directly from the new 'stream-markdown-parser' package for parser-only functionalities, showcasing its framework-agnostic nature and single entry point.

```typescript
import {
  getMarkdown,
  KATEX_COMMANDS,
  normalizeStandaloneBackslashT,
  parseMarkdownToStructure,
  setDefaultMathOptions
} from 'stream-markdown-parser'

// All exports are from the main entry point
```

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

### Scan for Advanced Regex

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

Performs a static scan across JavaScript and TypeScript files for advanced regular expression features like lookbehind and unicode properties.

```bash
# Static scan for advanced regex in source
pnpm dlx rg "\(\?<!|\(\?<=|\\p\{" --glob "**/*.{js,ts,vue,jsx,tsx,mjs,cjs}" -n
```

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

### Vue: Basic Code Block Rendering with CodeBlockNode

Source: https://markstream-vue-docs.simonhe.me/guide/components

Demonstrates the basic usage of the CodeBlockNode component for rendering code blocks. It requires importing the component, its CSS, and passing a node object with code details.

```vue
<script setup lang="ts">
import { CodeBlockNode } from 'markstream-vue'
import 'stream-monaco/esm/index.css'

const node = {
  type: 'code_block',
  lang: 'ts',
  value: 'const a = 1',
}
</script>

<template>
  <CodeBlockNode :node="node" :monaco-options="{ fontSize: 14 }" />
</template>

```

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

### Render KaTeX Math Formulas

Source: https://markstream-vue-docs.simonhe.me/guide/components

Provides KaTeX-powered math display for block and inline formulas. Requires 'katex'. Import 'katex/dist/katex.min.css'. Props include 'node', 'displayMode', 'macros', and 'throwOnError'. For Nuxt SSR, use <ClientOnly> or 'client:only'.

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

```vue
<MathBlockNode :node="node" :display-mode="true" :macros="{ '\\RR': '\\mathbb{R}' }" />

<MathInlineNode :node="inlineNode" />
```

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

### Parse Markdown to Structure

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

Shows how to use the `parseMarkdownToStructure` function from `markstream-vue` to convert a Markdown string into an Abstract Syntax Tree (AST) structure. This AST can then be used for rendering, for example, with the `MarkdownRender` component.

```ts
import { parseMarkdownToStructure } from 'markstream-vue'

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