elementui markdown
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>注意事项
- XSS 防护：直接使用
v-html时需对内容进行过滤，避免注入攻击。 - 样式适配：Markdown 生成的 HTML 可能需要额外 CSS 调整以匹配 Element UI 风格。
- 性能优化：长文档渲染时考虑分块或懒加载。
通过上述方法，可在 Element UI 项目中灵活集成 Markdown 功能。
