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. 大型文档建议做懒加载处理