vue实现md编辑展示
Vue 实现 Markdown 编辑与展示
安装依赖
在 Vue 项目中安装 marked 和 highlight.js，用于解析 Markdown 语法和高亮代码：
npm install marked highlight.js创建 Markdown 编辑器组件
通过 textarea 或富文本编辑器库（如 Vditor）实现编辑功能：
<template>
<div class="markdown-container">
<textarea v-model="markdownText" placeholder="输入 Markdown 内容"></textarea>
<div class="preview" v-html="compiledMarkdown"></div>
</div>
</template>
<script>
import marked from 'marked';
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css';
export default {
data() {
return {
markdownText: ''
};
},
computed: {
compiledMarkdown() {
marked.setOptions({
highlight: (code) => hljs.highlightAuto(code).value
});
return marked(this.markdownText);
}
}
};
</script>
<style>
.markdown-container {
display: flex;
gap: 20px;
}
textarea {
width: 50%;
min-height: 300px;
}
.preview {
width: 50%;
border: 1px solid #ddd;
padding: 10px;
}
</style>使用第三方库增强功能
若需更强大的编辑功能（如实时预览、工具栏），可使用以下库：
- Vditor: 支持流程图、数学公式等高级功能。
npm install vditor示例代码：
<template> <div id="editor"></div> </template>
安全注意事项
使用 v-html 渲染 Markdown 时需防范 XSS 攻击。可通过 DOMPurify 清理内容：
npm install dompurify修改计算属性：
compiledMarkdown() {
marked.setOptions({ sanitize: true });
return marked(this.markdownText);
}自定义 Markdown 样式
通过 CSS 覆盖默认样式，例如标题、列表等：
.preview h1 {
font-size: 2em;
border-bottom: 1px solid #eee;
}
.preview pre {
background-color: #f6f8fa;
padding: 12px;
border-radius: 3px;
}服务端渲染支持
若需 SSR（如 Nuxt.js），需动态导入 marked：
const marked = process.client ? require('marked') : null;
