动态Markdown渲染演示

这个页面演示了如何在VuePress中动态获取和渲染Markdown文件。与VuePress的静态渲染不同，这里的内容是在客户端动态加载和渲染的。

功能特点

• ✅ 复用VuePress渲染逻辑: 使用@vuepress/markdown包的createMarkdown函数
• ✅ 完整的插件支持: 支持所有VuePress markdown插件和扩展语法
• ✅ Frontmatter解析: 自动解析和显示文档元信息
• ✅ 错误处理: 优雅的错误处理和重试机制
• ✅ 加载状态: 友好的加载和错误状态显示
• ✅ 样式一致性: 渲染结果与VuePress静态页面样式完全一致

基本用法

Vue组件嵌套测试

测试div嵌套Vue组件的动态渲染（修复外层容器丢失问题）：

简单示例

从本地public目录加载一个简单的markdown文件：

GitHub示例

从GitHub获取一个markdown文件并渲染：

### 显示Frontmatter信息

高级用法

自定义错误处理

你可以通过组件的ref来手动控制加载过程：

<template>
  <div>
    <button @click="loadCustomContent">加载自定义内容</button>
    <DynamicMarkdown 
      ref="markdownRef"
      :url="customUrl"
      :show-frontmatter="true"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const markdownRef = ref()
const customUrl = ref('')

const loadCustomContent = () => {
  customUrl.value = 'https://example.com/custom.md'
  // 或者手动触发重新加载
  markdownRef.value?.reload()
}
</script>

本地文件示例

你也可以加载本地的markdown文件（放在public目录中，作为静态资源访问）：

技术实现

核心原理

1. 复用VuePress渲染器: 直接使用@vuepress/markdown包的createMarkdown函数
2. 插件配置同步: 与VuePress主题配置保持一致的markdown插件配置
3. 环境模拟: 创建与VuePress相同的渲染环境(MarkdownEnv)
4. 前端解析: 使用gray-matter解析frontmatter

关键代码

import { createMarkdown, type MarkdownOptions, type MarkdownEnv } from '@vuepress/markdown'

// 创建与VuePress完全相同的markdown渲染器
export function createVuePressMarkdown(options?: MarkdownOptions) {
  const defaultOptions: MarkdownOptions = {
    // 与theme.ts中的配置保持一致
    html: true,
    linkify: true,
    anchor: { /* ... */ },
    emoji: true,
    // ... 其他插件配置
  }
  
  return createMarkdown({ ...defaultOptions, ...options })
}

支持的语法

由于完全复用了VuePress的markdown渲染器，所有VuePress支持的语法都可以正常工作：

• 基础Markdown语法
• 代码高亮
• 容器语法 (::: tip, ::: warning 等)
• 数学公式 (如果启用)
• 图表 (如果启用)
• 自定义组件
• 等等...

注意事项

1. CORS限制: 确保目标URL支持跨域访问
2. 文件大小: 大文件可能影响加载性能
3. 网络依赖: 需要网络连接来获取远程文件
4. 缓存策略: 考虑实现适当的缓存机制

总结

这个动态markdown渲染方案完美地复用了VuePress的静态渲染逻辑，确保了渲染结果的一致性。无论是样式、插件支持还是语法扩展，都与VuePress的静态页面保持完全一致。