vue实现markdown
Vue 实现 Markdown 编辑器
在 Vue 中实现 Markdown 编辑器可以通过集成第三方库或手动解析 Markdown 语法来完成。以下是几种常见方法：
使用第三方库（如 marked 或 markdown-it）
安装 marked 或 markdown-it 库：
npm install marked
# 或
npm install markdown-it在 Vue 组件中使用：
<template>
<div>
<textarea v-model="markdownText" @input="updateMarkdown"></textarea>
<div v-html="compiledMarkdown"></div>
</div>
</template>
<script>
import { marked } from 'marked';
export default {
data() {
return {
markdownText: '',
compiledMarkdown: ''
};
},
methods: {
updateMarkdown() {
this.compiledMarkdown = marked(this.markdownText);
}
}
};
</script>使用 Vue-Markdown 插件
安装 vue-markdown 插件：
npm install vue-markdown在组件中使用：
<template>
<div>
<textarea v-model="markdownText"></textarea>
<vue-markdown :source="markdownText"></vue-markdown>
</div>
</template>
<script>
import VueMarkdown from 'vue-markdown';
export default {
components: {
VueMarkdown
},
data() {
return {
markdownText: ''
};
}
};
</script>自定义 Markdown 解析
如果需要更灵活的控制，可以手动解析 Markdown：
<template>
<div>
<textarea v-model="markdownText" @input="parseMarkdown"></textarea>
<div v-html="parsedHtml"></div>
</div>
</template>
<script>
export default {
data() {
return {
markdownText: '',
parsedHtml: ''
};
},
methods: {
parseMarkdown() {
// 简单替换示例
this.parsedHtml = this.markdownText
.replace(/^# (.*$)/gm, '<h1>$1</h1>')
.replace(/^## (.*$)/gm, '<h2>$1</h2>')
.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
}
}
};
</script>添加语法高亮
结合 highlight.js 实现代码高亮：
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css';
marked.setOptions({
highlight: function(code, lang) {
if (lang && hljs.getLanguage(lang)) {
return hljs.highlight(lang, code).value;
}
return hljs.highlightAuto(code).value;
}
});注意事项
- 使用
v-html时需注意 XSS 攻击风险，确保内容可信或进行过滤 - 复杂 Markdown 功能（如表格、流程图）建议使用成熟库
- 对于大型项目，考虑将 Markdown 解析逻辑封装为独立组件
以上方法可根据项目需求选择，第三方库方案适合快速实现，自定义解析则提供更高灵活性。
