markdown-it-vue3

Vue3 版本的 markdown 流式渲染组件。 A Vue 3 markdown rendering component support streaming, built on top of markdown-it

Features

• Emoji, Subscript, Superscript, Footnotes
• Task lists, Definition lists
• KaTeX/LaTeX math
• Mermaid, ECharts, Flowchart diagrams
• Code highlighting with copy button
• Image viewer
• Alert containers: ::: success/info/warning/error
• Streaming support for AI chat scenarios

• Demo: https://niyongsheng.github.io/markdown-it-vue3/

Install

npm install markdown-it-vue3

Usage

Static Markdown

<template>
  <MarkdownItVue :content="content" />
</template>

<script setup>
import MarkdownItVue from 'markdown-it-vue3'
import 'markdown-it-vue3/dist/markdown-it-vue3.css'

const content = '# Hello World'
</script>

Streaming Markdown (AI Chat)

<template>
  <MarkdownItVueStreaming
    :content="streamContent"
    :streaming="isStreaming"
    @render-complete="onComplete"
  />
</template>

<script setup>
import { ref } from 'vue'
import { MarkdownItVueStreaming } from 'markdown-it-vue3'
import 'markdown-it-vue3/dist/markdown-it-vue3.css'

const streamContent = ref('')
const isStreaming = ref(false)
</script>

📖 See example for complete implementation

License

MIT