Vue中使用markdown

Vue中使用markdown

最近在更新我的个人网站，想要在网站里面使用markdown。网站的配置是laravel+vue，但实际使用markdown和后端没啥关系，主要是前端的事。

依赖

• marked 解析markdown
• mavon-editor markdown编辑器
• highlight.js 高亮语法

mavon-editor 配置

​ mavon-editor是一个国人开发的markdown编辑器，样式简洁，文档完善，所以我使用它作为markdown编辑器。

​ 这里把地址放上来，喜欢看文档的同学可以去看官方文档，也是很详细的。

​ 我这里说一下我的配置。

安装

cnpm i mavon-editor --save

引入----局部引入

import {mavonEditor} from "mavon-editor";
import "mavon-editor/dist/css/index.css";

module.exports = {
  components:{
    mavonEditor
  },
  ......
}

使用

      <mavon-editor
        ref="md"
        id="editor"
        v-model="form.text"//绑定
      />

其中有很多配置，比如上传图片等等，这里我就不一一列举，这里只配置基础功能，其他可以去官网看文档。

marked

marked是用来解析markdown的，用以将markdown转换为HTML，方便我们前台展示。上面的mavon-editor也是可以解析markdown的（取消编辑功能，只用来展示），但是样式不太好看，定制前端时，不太推荐这种展示，所以我们使用marked解析markdown。

安装

cnpm install marked --save

引入—局部引入

import marked from 'marked'

使用

//vue中
module.exports = {
  computed: {
    compiledMarkdown: function() {
      return marked(this.data.text, {});//第一个参数是你的markdown文本 第二个参数是选项
    },
}

//html中
<div v-html="compiledMarkdown"></div>

效果

如果你按照上面的配置成功配置完，那么你的页面应该是这样的

marked确实解析了我们的markdown语法，但是我们的代码却没有被高亮，这就非常难受了，我们接下来就是解决这个问题。

highlight.js

Highlight.js是一个用JavaScript编写的语法高亮显示器。它适用于浏览器以及服务器。它几乎适用于任何标记，不依赖于任何框架，并具有自动语言检测功能。

​ github地址放上。

安装

cnpm i highlight.js --save

引入—局部引入

//基本引入 高亮所有语言
import hljs from 'highlight.js';
//选择引入 高亮选择的语言
import hljs from 'highlight.js/lib/highlight';
import javascript from 'highlight.js/lib/languages/javascript';
hljs.registerLanguage('javascript', javascript);
//选择样式引入
import hljs from 'highlight.js/lib/highlight';
import 'highlight.js/styles/github.css';

我们选择一种方式引入就行，我个人在这里举例子，所以就引入第一种

使用

highlight要配合marked一起使用，所以我们修改上面marked的选项。

module.exports = {
  computed: {
    compiledMarkdown: function() {
      return marked(this.data.text, {
        highlight: function(code) {//新加的，用来配置语法高亮
          return hljs.highlightAuto(code).value;
        }
      });
    },
}

​ 我们这样配置后，语法的高亮就出来了，但是我们发现，代码块的背景色没有被配置，这里我们只需自行设置style就可以，但是注意不要加上scoped属性，加上了就不能生效了，原因大家应该都知道，我也不再赘述。

参考

• Vue中使用markdown

• 记一次 VUE 使用marked.js

结尾

如有错误，望请指出，共同进步，不胜感激。