1。安装mavon-editor
npm install mavon-editor -S
2。引入组件,样式以及调用组件
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
comoponents: {
mavonEditor
}
<mavon-editor v-model="value"></mavon-editor>
3。前台展示markdowm文本内容:
后台录入markdown语法后,获取文章,此时数据是markdown语法格式。在前台展示需要利用marked插件和highlight.js处理
npm install marked -S
import marked from 'marked'
var markdowncontent = "console.log('hello.word')"
this.content = marked(获取的markdown数据内容)
4。代码高亮
npm install highlight.js
import hljs from 'highlight.js'
import 'highlight.js/styles/default.css'; //封装成一个指令
vue.directive('highlight', (el) => {
let blocks = el.querySelectorAll('pre code')
blocks.forEach((block) => {
hljs.highlightBlock(block)
})
})
<div v-highlight v-html\="content"\></div>
Markdown 是一种易读易写的网络书写语言,语法主要由一些精挑细选的符号组成,对应html标签的一小部分,主要区别在于:html是一种发布格式,而Markdown为一种书写的格式,并且语法只涵盖了纯文本。
Markdown是互联网上最普遍使用的轻量级标记语言。对于写博客和评论这类的任务,用Markdown很棒。不过最近技术社区的人员开始用它来写文档。下面我列出一些反对使用Markdown的观点,希望能帮助你决定是否适合使用Markdown
话说我要为技术博客写一个小程序版,我的博客解决方案是 hexo + github-page,格式当然是技术控们喜欢的 markdown 了 。但小程序使用的却是独有的模版语言 WXML
HTML是超文本标记语言的缩写,可能是当今网络上使用最多的标记语言。Markdown 在我们程序界也是一个必备的技能。我们可以使用 makrdown来渲染文本,它实际上是一种更快的写作方式,因为它学习成本很低,不需要掌握很多知识就可以开始。
什么是Markdown,简单来说是一种标记语言,用特定的符号生成具备HTML标签的文字。使用 # 号可表示 1-6 级标题,一级标题对应一个 # 号,二级标题对应两个 # 号,以此类推。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!