一、前言
 
如题，如何在Vue中解析markDown文件然后展示在网页上呢？一开始我也不太清楚，就拿着我的冲浪板在网络海洋里冲浪，但是没想到是一片珊瑚礁海域，让我心力憔悴，失去了学习的热情。
 在我的不依不挠之下，终于从各种抄来抄去，三言两语的碎片博客中找到了解决方法。
 注意，是解析文件，而不是文本，解析文本的其实网上已经有很多博客了，但是解析文件的其实还是零零碎碎，不太准确。
 如果你也在珊瑚礁海域绝望之中，希望这篇博客可以帮到你。
 
二、实现过程
 
首先
 
我们需要使用npm引入三个包，为啥用npm而不用cnpm呢？cnpm不是速度快吗？在这里，我个人还是建议用npm，三个包的体积并不是很大，下载时间两者相差其实不大，而npm会更加的准确。
 
npm i markdown-loader html-loader marked --save
 
说明: markdown-loader、html-loader是为了让vue能够解析md格式的文件，读取出来，然后使用marked将读取出来的数据转换成html格式渲染到页面上。
 
然后
 
就在需要解析数据的页面的js里面引入marked， 这一步就很简单了，直接看代码
 
<script>
  // 引用marked
  const marked = require('marked')
</script>
 
接下来
 
准备引入 *.md 文件，但是引入之前还需要做一个规则配置，如果没有配置的话会报无法解析“#”的错误。
 配置：找到webpack.base.conf.js，将下面代码复制到model下的rules里面去，注意别漏了逗号。
 
{
         test: /\.md$/,
         use: [
            { loader: 'html-loader' },
            { loader: 'markdown-loader', options: {} }
         ]
      },
 
然后是这样的
 
 配置好后就可以引入md文件了，注意文件路径别错了。
 
 这时，md格式的数据就被解析成了html格式的数据，我们只需要将html格式的数据渲染上去就行了。
 
 
最后
 
实现的效果是这样的（可能你的页面有些不一样因为没有滚动条或者样式）
 用于测试的md文件我是直接拷贝CSDN的博客，是这样的
 
 
三、总结
 
整体来说，实现的效果还是很不错的，目的达到了，当然了，还有其他方法可以实现这个，但是我觉得我这个是最方便的方法之一了。
 还有就是，CSDN上的markdown语法并不是原生的markDown语法，直接复制粘贴，最终解析出来的排版可能会有所差别。
 tips:水平有限，大神勿喷

npm install html-loader@0.5.4 --save-dev html-loader 安装的时候，如果不加版本号，就会报错，加上就好了
 npm i markdown-loader
 npm install marked
 安装完这三个包就ok了，我是vue的项目。
 
<script>
const marked = require('marked')
methods:{
//res.data是从markdown中取出的数据 
 const htmlMD = marked(res.data);
 this.data = htmlMD}

 
页面里面
 <div v-html="data"></div>
 
在vue.config.js中加入
 
 configureWebpack: {
    module: {
      rules: [
        // 配置读取 *.md 文件的规则
        {
          test: /\.md$/,
          use: [
            { loader: "html-loader" },
            { loader: "markdown-loader", options: {} }
          ]
        }
      ]
    }
  },

Vue解析markdown字符串，并且将其展示到页面(代码高亮+代码行号显示)，具体步骤如下：
 
(1) 安装依赖
 
// marked用于将markdown转换成html
cnpm install marked -S

// 用于代码高亮显示
cnpm install highlight.js -S

// 代码行号显示插件
cnpm install highlightjs-line-numbers.js
 
(2) 在main.js文件中引入highlight.js
 
import highlight from 'highlight.js';
Vue.use(highlight);
 
(3) 创建一个全局指令，用于代码高亮显示
 
在main.js文件中，创建一个自定义全局指令，如下所示：
 
//封装成一个指令
Vue.directive('highlight', (el) => {
  let blocks = el.querySelectorAll('pre code')
  blocks.forEach((block) => {
    highlight.highlightBlock(block)
  })
})
 
在vue组件中，只需要使用 v-highlight 指令即可。
 
 
(4) 创建一个vue组件，用于展示markdown内容
 
<template>
    <div>
        <!-- vue展示markdown内容 -->
        <div v-highlight v-html="msg" class="styleClass"></div>
    </div>
</template>

<script>
    export default {
        name: "markdown-test",
        data() {
            return {
                msg:'```\n' +
                    'public static void main(String[] args) {\n' +
                    '\tSystem.out.println("Hello World!!!");\n' +
                    '}\n' +
                    '```'
            };
        }
    }
</script>

<style scoped>
.styleClass{
    width: 400px;
    height: 400px;
    border: 1px solid red;
    margin: 0 auto;
    padding: 20px;
    text-align: left;
}
</style>
 
(5) 通过步骤(4)，访问的效果如下图所示
 
 
(6) 引入代码高亮插件
 
<script>
    // 将markdown转换成html
    import marked from 'marked';
    // 引入样式
    import "highlight.js/styles/darcula.css";

    export default {
        name: "markdown-test",
        data() {
            return {
                msg:'```\n' +
                    'public static void main(String[] args) {\n' +
                    '\tSystem.out.println("Hello World!!!");\n' +
                    '}\n' +
                    '```'
            };
        },
        mounted() {
            this.msg = marked(this.msg); // 将markdown转换成html
        }
    }
</script>
 
 
 
注意：如果没有引入highlight.js对应的css样式，则可能不会有高亮显示的效果。highlight.js有多种css样式，可以选择自己喜欢的样式引入。
 
 
以上代码效果如图所示：
 
 
 
 
highlight.js常见css样式如下所示
 
 
 
atelier-cave-light.css对应效果如下：
 
 
 
pojoaque.css对应效果如下：
 
 
 
kimbie.light.css对应效果如下：
 
 
 
atelier-forest-dark.css对应效果如下：
 
 
 
arduino-light.css对应效果如下：
 
 
(7) 代码行号显示
 
整了好久，没整出来行号。。。后面再补上。。。

Markdown编辑器的使用
 
我们这里推荐使用 mavonEditor,这是一款基于Vue的markdown编辑器。既可以用来编辑Markdown语法，又可以用来解析
效果图
 
安装
 
npm install mavon-editor --save
or
cnpm install mavon-editor --save	
 
引入
 
全局注册(大部分页面都需要markdown解析的推荐使用）
 
   // import with ES6
    import Vue from 'vue'
    import { mavonEditor } from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    // use
    Vue.use(mavonEditor)
    new Vue({
        'el': '#main',
        data() {
            return { value: '' }
        }
    })
 
局部注册（只有一到连个页面会用到markdown推荐使用这个）
 
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
export default({
	components:{// 在页面中注册组件
		mavonEditor 
	}
})
 
使用
 
<template>
  <div class="mavonEditor">
   	  <!-- markdownText: 双向绑定的数据 
   	  	   toolbars：编辑器的配置	-->
      <mavon-editor
       v-model="markdownText" 
       :toolbars="markdownOption" 
       @change="change" 
       style="min-height: 500px"
      />
      <button  @click="submit">提交</button>
  </div>
</template>
<script>
export default {
/*
    默认工具栏按钮全部开启, 传入自定义对象
    例如: {
         bold: true, // 粗体
         italic: true,// 斜体
         header: true,// 标题
    }
    此时, 仅仅显示此三个功能键
 */
  data() {
    return {
      markdownOption: {
	      bold: true, // 粗体
	      italic: true, // 斜体
	      header: true, // 标题
      }，
      markdownText: ''//传至服务器的数据
    },
    method: {
    // 所有操作都会被解析重新渲染
    change (value, render) {
      // render 为 markdown 解析后的结果(转化成了HTML格式）
      this..markdownText = render;
    }
  }
};
</script>
 
markdownOption 配置项
 
 
解析markdown语法
 
<telmplate>
	<div class="content">
          <mavon-editor
            class="md"
            :value="htmlContent" // 渲染解析的数据绑定
            :subfield="prop.subfield" 
            :defaultOpen="prop.defaultOpen"
            :toolbarsFlag="prop.toolbarsFlag"
            :editable="prop.editable"
            :scrollStyle="prop.scrollStyle"
          />
	</div>
</template>	
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

<script>
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
export default {
  components: {
    mavonEditor
  }, 
  computed: {
  // 解析器配置
    prop () {
      let data = {
        subfield: false,// 单双栏模式
        defaultOpen: 'preview',//edit： 默认展示编辑区域 ， preview： 默认展示预览区域 
        editable: false,	// 是否允许编辑
        toolbarsFlag: false,
        scrollStyle: true
      }
      return data
    }
  },
  data() {
      return{
        htmlContent: ''
      }
  },
  mounted () {
  //从后台获取数据
    getInfo(){
      this.htmlContent = data;
    }
  }
    
</script>
 
图片上传
 

<template>
    <mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
</template>
exports default {
    methods: {
        // 绑定@imgAdd event
        $imgAdd(pos, $file){
            // 第一步.将图片上传到服务器.
           var formdata = new FormData();
           formdata.append('image', $file);
           axios({
               url: 'server url',
               method: 'post',
               data: formdata,
               headers: { 'Content-Type': 'multipart/form-data' },
           }).then((url) => {
               // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
               /**
               * $vm 指为mavonEditor实例，可以通过如下两种方式获取
               * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
               * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
               */
               $vm.$img2Url(pos, url);
           })
        }
    }
}