当前位置：首页 > VUE

vue实现markdown

2026-03-27 12:28:43VUE

Vue 实现 Markdown 编辑器/渲染器

在 Vue 中实现 Markdown 功能通常需要结合第三方库或自定义解析器。以下是几种常见方法：

使用 marked.js 库

marked.js 是一个轻量级的 Markdown 解析器，可以快速将 Markdown 转换为 HTML。

安装依赖：

npm install marked

在 Vue 组件中使用：

<template>
  <div>
    <textarea v-model="markdown" @input="updateHtml"></textarea>
    <div v-html="html"></div>
  </div>
</template>

<script>
import { marked } from 'marked';

export default {
  data() {
    return {
      markdown: '# Hello World',
      html: ''
    };
  },
  mounted() {
    this.updateHtml();
  },
  methods: {
    updateHtml() {
      this.html = marked(this.markdown);
    }
  }
};
</script>

使用 vue-markdown 组件

vue-markdown 是一个专门为 Vue 设计的 Markdown 组件。

安装：

npm install vue-markdown

使用示例：

<template>
  <vue-markdown :source="markdownText" />
</template>

<script>
import VueMarkdown from 'vue-markdown';

export default {
  components: {
    VueMarkdown
  },
  data() {
    return {
      markdownText: '# Vue Markdown Component\n\nThis is bold text.'
    };
  }
};
</script>

使用 highlight.js 添加代码高亮

结合 marked.js 和 highlight.js 可以实现代码语法高亮。

安装依赖：

npm install marked highlight.js

配置示例：

import { marked } from 'marked';
import hljs from 'highlight.js';

marked.setOptions({
  highlight: function(code, lang) {
    if (lang && hljs.getLanguage(lang)) {
      return hljs.highlight(lang, code).value;
    }
    return hljs.highlightAuto(code).value;
  }
});

自定义 Markdown 解析器

对于简单需求，可以创建自定义解析器：

const simpleMarkdown = (text) => {
  return text
    .replace(/^# (.*$)/gm, '<h1>$1</h1>')
    .replace(/^## (.*$)/gm, '<h2>$1</h2>')
    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
    .replace(/\*(.*?)\*/g, '<em>$1</em>');
};

注意事项

使用 v-html 时要注意 XSS 安全问题，确保内容可信或进行过滤
对于复杂 Markdown 需求，推荐使用专业库如 marked.js 或 remark
编辑器功能可以考虑使用 CodeMirror 或 Monaco Editor 集成
性能优化：对于大量 Markdown 内容，考虑使用虚拟滚动

完整编辑器示例

结合 marked.js 和 CodeMirror 创建完整编辑器：

vue实现markdown

<template>
  <div class="editor-container">
    <textarea ref="editor"></textarea>
    <div class="preview" v-html="compiledMarkdown"></div>
  </div>
</template>

<script>
import { marked } from 'marked';
import CodeMirror from 'codemirror';
import 'codemirror/mode/markdown/markdown';
import 'codemirror/lib/codemirror.css';

export default {
  data() {
    return {
      markdownContent: '# Markdown Editor\n\nType here...',
      compiledMarkdown: ''
    };
  },
  mounted() {
    this.editor = CodeMirror.fromTextArea(this.$refs.editor, {
      mode: 'markdown',
      lineNumbers: true,
      value: this.markdownContent
    });

    this.editor.on('change', (cm) => {
      this.markdownContent = cm.getValue();
      this.compiledMarkdown = marked(this.markdownContent);
    });

    this.compiledMarkdown = marked(this.markdownContent);
  }
};
</script>

<style>
.editor-container {
  display: flex;
  height: 100vh;
}
.preview {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}
.CodeMirror {
  flex: 1;
  height: 100%;
}
</style>