之前使用了mavonEditor这款Markdown编辑器进行博客文章的编写,
最近在弄把博客文章进行网页展示效果,开始使用marked.js
,但是代码高亮问题导致页面样式及其的丑陋。后面又在网上四处寻找方法,最后产生想法,要是能用mavonEditor将Markdown的内容展示该多好呢。
然后就在网上查询资料,最后还是找到了方法(不得不说,面向百度编程真的很妙)
首先下载好mavonEditor之后,然后在vue中引用之后,接着就是对mavonEditor这个组件的属性进行设置
<mavon-editor
class="md"
:value="articleInfo.content"
codeStyle="androidstudio"
:subfield = "false"
:defaultOpen = "'preview'"
:toolbarsFlag = "false"
:editable="false"
:scrollStyle="true"
:ishljs = "true"/>
对于这些属性是什么意思我这边就简单解释几个
:value="articleInfo.content
是需要展示的Markdown的内容。
codeStyle="androidstudio
是代码块以什么样式展示,我这边找了好几个样式,用这个样式就和csdn的代码块样式差不多
:toolbarsFlag = "false"
工具栏是否开启
:editable="false"
是否可编辑
:defaultOpen = "'preview'"
展示预览区域
剩下的就不多解释直接上官方文档链接和图片
https://www.npmjs.com/package/mavon-editor#props
https://github.com/hinesboy/mavonEditor/#events-%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A
以上两个官方文档链接都有对mavonEditor属性的介绍,可以灵活使用以达到自己想要的效果
这个链接是codeStyle可以选择的样式
https://github.com/hinesboy/mavonEditor/blob/HEAD/src/lib/core/hljs/lang.hljs.css.js
可以去highlight官网看各种样式的效果(仅部分效果)