Markdown 文档渲染实现方案

Markdown 文档渲染实现方案

1. 依赖安装

npm install vite-plugin-md markdown-it-anchor prismjs vite-plugin-prismjs

2. Vite 配置

在 vite.config.js 中添加以下配置：

import Markdown from 'vite-plugin-md';
import { prismjsPlugin } from 'vite-plugin-prismjs';
import MarkdownItAnchor from 'markdown-it-anchor';

export default defineConfig({
  plugins: [
    // 支持 .md 文件渲染
    vue({
      include: [/\.vue$/, /\.md$/],
    }),

    // Markdown 插件配置
    Markdown({
      markdownItSetup(md) {
        // 添加标题锚点
        md.use(MarkdownItAnchor);
      },
    }),

    // 代码高亮配置
    prismjsPlugin({
      languages: 'all', // 支持所有语言
      plugins: ['line-numbers', 'copy-to-clipboard'], // 行号和复制功能
      theme: 'coy', // 主题选择
      css: true,
    }),
  ],
});

3. 使用方式

3.1 直接导入 Markdown 文件

<template>
  <div class="markdown-content">
    <MarkdownContent />
  </div>
</template>

<script setup>
import MarkdownContent from './example.md';
</script>

3.2 动态渲染 Markdown 字符串

<template>
  <div v-html="renderedContent"></div>
</template>

<script setup>
import MarkdownIt from 'markdown-it';
const md = new MarkdownIt();
const markdownString = '# Hello\nThis is markdown';
const renderedContent = md.render(markdownString);
</script>

4. 样式配置

/* Markdown 内容样式 */
.markdown-content {
  h1 {
    font-size: 2em;
    margin-bottom: 1em;
  }
  h2 {
    font-size: 1.5em;
    margin-bottom: 0.8em;
  }
  h3 {
    margin: 10px 0;
    font-size: 20px;
    font-weight: 600;
  }
  p {
    line-height: 1.6;
    margin-bottom: 1em;
  }
  code {
    background: #f4f4f4;
    padding: 0.2em 0.4em;
  }
  pre {
    background: #f4f4f4;
    padding: 1em;
    overflow-x: auto;
  }
}

5. 功能特性

• 支持所有标准 Markdown 语法
• 代码块自动高亮（通过 Prismjs）
• 标题自动生成锚点（通过 markdown-it-anchor）
• 支持代码行号显示和复制功能
• 可在 Markdown 中使用 Vue 组件和指令
• 支持自定义主题样式

6. 扩展功能

可以通过添加 markdown-it 插件来扩展功能：

• 支持自定义容器：使用 markdown-it-container
• 支持任务列表：使用 markdown-it-task-lists
• 支持表格：使用 markdown-it-table
• 支持 LaTeX：使用 markdown-it-katex

7. 注意事项

1. Markdown 文件会被视为 Vue 组件
2. 确保添加了适当的样式文件
3. 代码高亮主题可以从 Prismjs 提供的主题中选择
4. 处理用户输入的 Markdown 内容时需要注意 XSS 安全问题
5. 大型文档建议做懒加载处理