vue使用markdown编辑器

更新日期: 2019-08-27阅读: 2.4k标签: Markdown

使用步骤


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>

链接: https://fly63.com/article/detial/7800

Markdown 常用语法教程_Markdown是什么?适用人群有哪些?

Markdown 是一种易读易写的网络书写语言,语法主要由一些精挑细选的符号组成,对应html标签的一小部分,主要区别在于:html是一种发布格式,而Markdown为一种书写的格式,并且语法只涵盖了纯文本。

为什么不应该使用Markdown来写文档

Markdown是互联网上最普遍使用的轻量级标记语言。对于写博客和评论这类的任务,用Markdown很棒。不过最近技术社区的人员开始用它来写文档。下面我列出一些反对使用Markdown的观点,希望能帮助你决定是否适合使用Markdown

如何将markdown转换为wxml

话说我要为技术博客写一个小程序版,我的博客解决方案是 hexo + github-page,格式当然是技术控们喜欢的 markdown 了 。但小程序使用的却是独有的模版语言 WXML

如何在Vue中解析和渲染Markdown

HTML是超文本标记语言的缩写,可能是当今网络上使用最多的标记语言。Markdown 在我们程序界也是一个必备的技能。我们可以使用 makrdown来渲染文本,它实际上是一种更快的写作方式,因为它学习成本很低,不需要掌握很多知识就可以开始。

Markdown语法指南

什么是Markdown,简单来说是一种标记语言,用特定的符号生成具备HTML标签的文字。使用 # 号可表示 1-6 级标题,一级标题对应一个 # 号,二级标题对应两个 # 号,以此类推。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!