当前位置：首页 > 前端教程

elementui markdown

2026-03-05 20:16:10前端教程

Element UI 与 Markdown 集成方法

Element UI 是一个基于 Vue.js 的组件库，不直接支持 Markdown 渲染，但可以通过第三方库或自定义组件实现。以下是几种常见方案：

使用 `v-markdown` 插件

安装 v-markdown 插件，快速实现 Markdown 渲染：

npm install v-markdown

在 Vue 组件中引入并使用：

import Vue from 'vue';
import VueMarkdown from 'v-markdown';

Vue.use(VueMarkdown);

// 在模板中直接使用
<template>
  <div>
    <vue-markdown :source="markdownContent"></vue-markdown>
  </div>
</template>

<script>
export default {
  data() {
    return {
      markdownContent: '# Hello, Element UI!'
    };
  }
};
</script>

结合 `marked` 与 `highlight.js`

使用 marked 解析 Markdown，并通过 highlight.js 实现代码高亮：

npm install marked highlight.js

在组件中配置：

import marked from 'marked';
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css';

marked.setOptions({
  highlight: (code) => hljs.highlightAuto(code).value
});

export default {
  computed: {
    compiledMarkdown() {
      return marked(this.markdownContent);
    }
  },
  data() {
    return {
      markdownContent: '```js\nconsole.log("Hello");\n```'
    };
  }
};

模板中使用 v-html 渲染（注意 XSS 防护）：

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

在 Element UI 弹窗或卡片中嵌入

将 Markdown 内容嵌入 Element UI 组件（如 el-dialog 或 el-card）：

<template>
  <el-dialog title="Markdown 预览">
    <vue-markdown :source="content"></vue-markdown>
  </el-dialog>
</template>

自定义 Markdown 编辑器

结合 textarea 和实时预览功能：

<template>
  <div>
    <el-input type="textarea" v-model="rawText" rows="10"></el-input>
    <el-divider></el-divider>
    <div v-html="compiledMarkdown"></div>
  </div>
</template>

<script>
export default {
  computed: {
    compiledMarkdown() {
      return marked(this.rawText);
    }
  },
  data() {
    return {
      rawText: ''
    };
  }
};
</script>