示例

简明示例；交互演示请查看 playground。以下为中文示例并附带注释：

流式 Markdown

这是将字符逐步添加到 content 中并让 MarkdownRender 渲染的最小示例：

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

const content = ref('')
const fullContent = `# Streaming Content\n\nThis text appears progressively...`
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>

打字光标与追加淡入

typewriter 只控制光标，smooth-streaming 调度出字节奏，fade 控制文字渐显。Vue 3 可以同时使用后两者；mode="chat" 默认关闭 fade 以减少动画成本，需要渐显时显式开启：

<MarkdownRender mode="chat" :content="content" :final="isDone" typewriter fade />

使用 nodes

如果你想跳过字符串解析阶段，可直接传入解析后的节点：

import { getMarkdown, parseMarkdownToStructure } from 'stream-markdown-parser'

const md = getMarkdown()
const nodes = parseMarkdownToStructure('# Hello', md)
// 在 Vue 中传入 nodes 而不是 content

更多示例请查看 /zh/guide/examples 或 demo playground 页面。