vue-markdown-render

Appearance

示例 ​

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

流式 Markdown ​

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

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

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>

使用 nodes ​

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

ts
import { parseMarkdownToStructure } from 'stream-markdown-parser'

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

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