Markdown Parse Vue

A Vue 3 based Markdown rendering component that supports code highlighting, tables, Mermaid diagrams, and ECharts.

Features

• Standard Markdown syntax support
• Code highlighting
• Table rendering
• Mermaid diagram support
• ECharts support
• Custom code block rendering
• Custom renderers
• Rich configuration options
• TypeScript support

Installation

npm install markdown-parse-vue

Usage

<template>
  <MarkdownRender
    :content="markdown"
    :codeBlockTypes="customCodeBlocks"
    :markdownOptions="markdownOptions"
    :mermaidOptions="mermaidOptions"
    :echartsOptions="echartsOptions"
    :customRenderers="customRenderers"
    @error="handleError"
    @render="handleRender"
  />
</template>

<script setup lang="ts">
import 'markdown-parse-vue/style.css'
import { MarkdownRender } from 'markdown-parse-vue'

// See configuration examples below
</script>

Configuration Options

MarkdownRenderProps

| Property | Type | Required | Default | Description | |----------|------|----------|----------|-------------| | content | string | Yes | - | Markdown content | | codeBlockTypes | CodeBlockType[] | No | [] | Custom code block type configuration | | markdownOptions | object | No | {} | Markdown-it configuration options | | mermaidOptions | object | No | {} | Mermaid configuration options | | echartsOptions | object | No | {} | ECharts configuration options | | customRenderers | object | No | {} | Custom renderers | | onError | function | No | - | Error handling callback | | onRender | function | No | - | Render completion callback |

CodeBlockType

interface CodeBlockType {
  name: string              // Code block type name
  startMarker: RegExp       // Start marker regex
  endMarker: RegExp         // End marker regex
  validate?: (content: string) => boolean  // Content validation function
  message?: string          // Loading message
  render?: (content: string) => JSX.Element | null  // Custom render function
}

Configuration Examples

// Custom code blocks
const customCodeBlocks = [
  {
    name: 'custom',
    startMarker: /^```custom\s*$/,
    endMarker: /^```$/,
    validate: content => content.length > 0,
    message: 'Custom rendering...',
    render: content => (
      <div class="custom-block">{content}</div>
    ),
  },
]

// Markdown configuration
const markdownOptions = {
  html: true,
  breaks: true,
  linkify: true,
  typographer: true,
  highlight: (str, lang) => {
    // Code highlighting configuration
  },
}

// Mermaid configuration
const mermaidOptions = {
  theme: 'default',
  flowchart: {
    curve: 'basis',
  },
  sequence: {
    showSequenceNumbers: true,
  },
}

// ECharts configuration
const echartsOptions = {
  renderer: 'canvas',
  devicePixelRatio: window.devicePixelRatio,
  useUTC: false,
}

// Custom renderers
const customRenderers = {
  text: content => (
    <div class="custom-text">{content}</div>
  ),
  table: content => (
    <div class="custom-table">{content}</div>
  ),
}

Events

onError

Error handling callback function.

function handleError(error: Error) {
  console.error('Render error:', error)
}

onRender

Render completion callback function.

function handleRender(type: string, content: string) {
  console.log(`Render type: ${type}`, content)
}

License

MIT

Markdown Parse Vue (中文文档)

一个基于 Vue 3 的 Markdown 渲染组件，支持代码高亮、表格、Mermaid 图表和 ECharts 图表。

特性

• 支持标准 Markdown 语法
• 支持代码高亮
• 支持表格渲染
• 支持 Mermaid 图表
• 支持 ECharts 图表
• 支持自定义代码块渲染
• 支持自定义渲染器
• 丰富的配置选项
• TypeScript 支持

安装

npm install markdown-parse-vue

使用

<template>
  <MarkdownRender
    :content="markdown"
    :codeBlockTypes="customCodeBlocks"
    :markdownOptions="markdownOptions"
    :mermaidOptions="mermaidOptions"
    :echartsOptions="echartsOptions"
    :customRenderers="customRenderers"
    @error="handleError"
    @render="handleRender"
  />
</template>

<script setup lang="ts">
import 'markdown-parse-vue/style.css'
import { MarkdownRender } from 'markdown-parse-vue'

// 配置示例见下文
</script>

配置选项

MarkdownRenderProps

| 属性 | 类型 | 必填 | 默认值 | 说明 | |------|------|------|--------|------| | content | string | 是 | - | Markdown 内容 | | codeBlockTypes | CodeBlockType[] | 否 | [] | 自定义代码块类型配置 | | markdownOptions | object | 否 | {} | Markdown-it 配置选项 | | mermaidOptions | object | 否 | {} | Mermaid 配置选项 | | echartsOptions | object | 否 | {} | ECharts 配置选项 | | customRenderers | object | 否 | {} | 自定义渲染器 | | onError | function | 否 | - | 错误处理回调 | | onRender | function | 否 | - | 渲染完成回调 |

CodeBlockType

interface CodeBlockType {
  name: string              // 代码块类型名称
  startMarker: RegExp       // 开始标记的正则表达式
  endMarker: RegExp         // 结束标记的正则表达式
  validate?: (content: string) => boolean  // 内容验证函数
  message?: string          // 加载提示信息
  render?: (content: string) => JSX.Element | null  // 自定义渲染函数
}

配置示例

// 自定义代码块
const customCodeBlocks = [
  {
    name: 'custom',
    startMarker: /^```custom\s*$/,
    endMarker: /^```$/,
    validate: content => content.length > 0,
    message: '自定义渲染中...',
    render: content => (
      <div class="custom-block">{content}</div>
    ),
  },
]

// Markdown 配置
const markdownOptions = {
  html: true,
  breaks: true,
  linkify: true,
  typographer: true,
  highlight: (str, lang) => {
    // 代码高亮配置
  },
}

// Mermaid 配置
const mermaidOptions = {
  theme: 'default',
  flowchart: {
    curve: 'basis',
  },
  sequence: {
    showSequenceNumbers: true,
  },
}

// ECharts 配置
const echartsOptions = {
  renderer: 'canvas',
  devicePixelRatio: window.devicePixelRatio,
  useUTC: false,
}

// 自定义渲染器
const customRenderers = {
  text: content => (
    <div class="custom-text">{content}</div>
  ),
  table: content => (
    <div class="custom-table">{content}</div>
  ),
}

事件

onError

错误处理回调函数。

function handleError(error: Error) {
  console.error('渲染错误:', error)
}

onRender

渲染完成回调函数。

function handleRender(type: string, content: string) {
  console.log(`渲染类型: ${type}`, content)
}

许可证

MIT