当前位置: 首页 > Web前端 > vue.js

vue使用markdown编辑器

时间:2023-04-01 01:44:05 vue.js

mavon-editor使用步骤1.安装mavon-editornpminstallmavon-editor-S2。导入组件、样式和调用组件import{mavonEditor}from'mavon-editor'import'mavon-editor/dist/css/index.css'components:{mavonEditor}3.前台显示markdown文本内容:后台输入markdown语法后,获取文章。此时数据为markdown语法格式。前台显示需要使用marked插件和highlight.js处理npminstallmarked-Simportmarkedfrom'marked'varmarkdowncontent="console.log('hello.word')"this.content=marked(obtained降价数据内容)4。代码高亮npminstallhighlight.jsimporthljsfrom'highlight.js'import'highlight.js/styles/default.css';//封装成命令Vue.directive('highlight',(el)=>{letblocks=el.querySelectorAll('precode')blocks.forEach((block)=>{hljs.highlightBlock(block)})})