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>

import Vditor from 'vditor'; export default { mounted() { new Vditor('editor', { after: () => { console.log('编辑器加载完成'); } }); } }; ```

安全注意事项

使用 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;