前端页面渲染markDown文件

在我们开发vue组件的过程中，希望把markdown文档写的插件使用说明，也展现到页面中。那么具体怎么做呢？

1、安装vue-markdown-loader

npm install vue-markdown-loader --save

npm install markdown-it-container --save

2、为webpack配置loader

{

    test: /\.md$/,

    loader: 'vue-markdown-loader',

    options: vueMarkdown

}

3、配置options

为vue-markdown-loader配置options。

这一部分的代码主要是将markDown的源码转换成，html代码。注意里面有几处用到了自定义的工具类，在utils.js下，后面会附带源码。

这个options是被作为一个独立的模块使用的，建议复制出来后以一个独立的文件保存在build文件夹中。

const striptags = require('./strip-tag');

const vueMarkdown = {

  preprocess: (MarkdownIt, source) => {

    MarkdownIt.renderer.rules.table_open = function () {

      return '<table class="table">'

    }

    MarkdownIt.renderer.rules.fence = utils.wrapCustomClass(MarkdownIt.renderer.rules.fence)



    // ```code`` 给这种样式加个class code_inline

    const code_inline = MarkdownIt.renderer.rules.code_inline

    MarkdownIt.renderer.rules.code_inline = function(...args){

      args[0][args[1]].attrJoin('class', 'code_inline')

      return code_inline(...args)

    }

    return source

  },

  use: [

    [require('markdown-it-container'), 'demo', {

      validate: params => params.trim().match(/^demo\s*(.*)$/),

      render: function(tokens, idx) {

        var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);

        if (tokens[idx].nesting === 1) {

          var desc = tokens[idx + 2].content;

          const html = utils.convertHtml(striptags(tokens[idx + 1].content, 'script'))

          // 移除描述，防止被添加到代码块

          tokens[idx + 2].children = [];

          return `<demo-block>

                        <div slot="desc">${html}</div>

                        <div slot="highlight">`;

        }

        return '</div></demo-block>\n';

      }

    }],

    [require('markdown-it-container'), 'tip'],

    /* or */

    [require('markdown-it-container'), 'warning']

  ]

};

exports.vueMarkdown = vueMarkdown;

在这段代码顶部，我们引入了striptags。这个模块是用来解析示例代码的。strip-tag的具体内容。

const cheerio = require('cheerio')

//cheerio是nodejs的抓取页面模块，为服务器特别定制的，快速、灵活、实施的jQuery核心实现。适合各种Web爬虫程序。

module.exports = (str, tags) => {

  const $ = cheerio.load(str, { decodeEntities: false })

  if (!tags || tags.length === 0) {

    return str

  }

  tags = !Array.isArray(tags) ? [tags] : tags

  let len = tags.length

  while (len--) {

    $(tags[len]).remove()

  }

  return $.html()

}

在webpack的build目录下的utils.js中添加下面的两个方法

/**

* 增加 hljs 的 classname

*/

exports.wrapCustomClass = function (render) {

  return function (...args) {

    return render(...args)

      .replace('<code class="', '<code class="hljs ')

      .replace('<code>', '<code class="hljs">')

  }

};

/**

* Format HTML string

*/

exports.convertHtml = function (str) {

  return str.replace(/(&#x)(\w{4});/gi, $0 => String.fromCharCode(parseInt(encodeURIComponent($0).replace(/(%26%23x)(\w{4})(%3B)/g, '$2'), 16)))

};

4、配置展示mark-down文档的vue页面

准备一个名叫demo-block的vue文件，放在你喜欢的地方。然后注册全局组件。

注意，在注册全局组件时，一定是叫demo-block。

import demoBlock from './components/demo-block.vue';

Vue.component('demo-block', demoBlock);

demo-block.vue文件的源码。

<template>

    <div

            class="demo-block"

            :class="[{ 'hover': hovering }]"

            @mouseenter="hovering = true"

            @mouseleave="hovering = false">

        <slot name="source"></slot>

        <div class="meta" ref="meta">

            <div class="description" v-if="$slots.default">

                <slot></slot>

            </div>

            <slot name="highlight"></slot>

        </div>

    </div>

</template>

<script type="text/babel">

export default {

  data () {

    return {

      hovering: false,

    }

  },

}

</script>

5、设置路由

大家会发现，每一个markddow文档对应一个路由，所以我们切换markDown的时候，其实是切换的是子路由页面。

import Vue from 'vue';

import Router from 'vue-router';

import loadMap from '@/components/loadMap.vue';

Vue.use(Router)

export default new Router({

  routes: [

    {

      path: '/',

      name: 'loadMap',

      component: loadMap,

      redirect:{ name : 'home' },

      children: [

        {

          path: '/home',

          name: 'home',

          component: r => require.ensure([], () => r(require('../docs/readme.md')))

        },

        {

          path: '/test',

          name: 'test',

          component: r => require.ensure([], () => r(require('../docs/hello.md')))

        }

      ]

    }

  ]

})

6、编写一个模板文档

@这是我们展示的说明文档

**三维测量 measure**

### 基本用法



* @param type 测量类型

* line 直线测量

* area 面积测量

* vertical 垂直测量

* horizontal 水平测量



-----

@这部分是页面上可以交互的代码



<div class="measure-ct">

            <button @click="measure('line')">直线测量</button>

            <button @click="measure('area')">面积测量</button>

            <button @click="measure('vertical')">垂直测量</button>

            <button @click="measure('horizontal')">水平测量</button>

            <button @click="measureCancel">清除测量结果</button>

        </div>

        <br>



::: demo



@这部分是我们展示的示例代码

```shell

import {cw5} from 'cw3d/index.js';

cw5.measure.measureMent(type)

```

```html

<template>

    <div>

        <div class="measure-ct">

            <button @click="measure('line')">直线测量</button>

            <button @click="measure('area')">面积测量</button>

            <button @click="measure('vertical')">垂直测量</button>

            <button @click="measure('horizontal')">水平测量</button>

            <button @click="measureCancel">取消测量模式</button>

        </div>

    </div>

</template>

<script>

import {cw5} from 'cw3d/index.js';

export default {

  name: 'measure',

  methods: {

    measure(type){

      cw5.measure.measureMent(type)

    },

    measureCancel(){

      cw5.measure.measureCancel()

    }

  }

}

</script>



```

:::

7、优化样式----引入文档模块的css文件

这个css文件有两个版本，一个lass、一个css。通常css引入就可以。

可以在任意需要css渲染的文件中，引入这个css文件。

<style>

    @import "../assets/docs.css";

    .example-block{

        display: flex;

    }

</style>

要引入的docs.css文件。

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td,

iframe {

  margin: 0;

  padding: 0;

  border: 0;

  vertical-align: baseline;

}

body {

  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif;

  font-weight: 400;

  -webkit-font-smoothing: antialiased;

  background-color: #f8f8f8;

}

a {

  color: #4078c0;

  text-decoration: none;

}

button, input, select,

textarea {

  font-family: inherit;

  font-size: inherit;

  line-height: inherit;

  color: inherit;

}

ul, ol {

  list-style: none;

}

code.hljs {

  line-height: 1.5;

  font-family: Source Code Pro, Menlo, Monaco, Consolas, Courier, monospace;

  font-size: 12px;

  padding: 20px;

  background-color: #2a3138;

  border: solid 1px #E5E5E5;

  margin-bottom: 25px;

  border-radius: 4px;

  -webkit-font-smoothing: auto;

}

.clearfix::before {

  display: table;

  content: "";

}

.clearfix::after {

  display: table;

  content: "";

  clear: both;

}

.main-content {

  width: 50%;

  margin: 50px 20px 40px;

  border: 1px solid #f2f2f2;

}

.main-content .page-tip {

  position: absolute;

  left: 50%;

  top: 60px;

  transform: translatex(-50%);

  height: 60px;

  line-height: 60px;

  font-size: 24px;

  color: #0067ed;

}

.page-container {

  background-color: #fff;

  position: relative;

  display: flex;

  width: 100%;

  overflow: hidden;

}

.page-content {

  box-sizing: border-box;

  flex: 1;

}

.page-content section {

  padding: 0 40px;

}

.page-content section > h1,

.page-content section > h2,

.page-content section > h3,

.page-content section > h4,

.page-content section > h5,

.page-content section > h6 {

  color: #333;

  line-height: 1.5;

  margin: 20px 0;

  font-weight: normal;

}

.page-content section > h1:hover a,

.page-content section > h2:hover a,

.page-content section > h3:hover a,

.page-content section > h4:hover a,

.page-content section > h5:hover a,

.page-content section > h6:hover a {

  opacity: .4;

}

.page-content section > h1 a,

.page-content section > h2 a,

.page-content section > h3 a,

.page-content section > h4 a,

.page-content section > h5 a,

.page-content section > h6 a {

  float: left;

  margin-left: -20px;

  opacity: 0;

  cursor: pointer;

}

.page-content section > h1 a:hover,

.page-content section > h2 a:hover,

.page-content section > h3 a:hover,

.page-content section > h4 a:hover,

.page-content section > h5 a:hover,

.page-content section > h6 a:hover {

  opacity: .4;

}

.page-content section > h1 {

  font-size: 34px;

}

.page-content section > h2 {

  font-size: 28px;

}

.page-content section > h3 {

  font-size: 22px;

}

.page-content section > h4 {

  font-size: 18px;

}

.page-content section > h5 {

  font-size: 16px;

}

.page-content section > h6 {

  font-size: 14px;

  color: #666;

}

.page-content section > p {

  font-size: 14px;

  line-height: 20px;

  color: #666;

  margin: 14px 0;

}

.page-content section > p a {

  color: #38f;

}

.page-content section > ul li,

.page-content section > ol li {

  color: #666;

  font-size: 14px;

  line-height: 20px;

  margin: 10px 0 10px 20px;

  padding-left: 20px;

  position: relative;

}

.page-content section > ul li a,

.page-content section > ol li a {

  color: #38f;

}

.page-content section > ul li::before,

.page-content section > ol li::before {

  content: '';

  position: absolute;

  width: 8px;

  height: 8px;

  box-sizing: border-box;

  border: 2px solid #999;

  border-radius: 50%;

  top: 6px;

  left: 0;

}

.page-content section > ul li li,

.page-content section > ol li li {

  margin-left: 0;

}

.page-content p > code,

.page-content .table code,

.page-content li > code {

  background-color: #F2F2F2;

  display: inline-block;

  border: 1px solid #E5E5E5;

  border-radius: 3px;

  padding: 1px 3px;

  color: #333;

  margin: 0 2px;

}

.table {

  border-collapse: collapse;

  width: 100%;

  background-color: #fff;

  color: #333;

  font-size: 14px;

  margin-bottom: 45px;

}

.table th {

  text-align: left;

  border: 1px solid #E5E5E5;

  background-color: #F2F2F2;

  padding: 10px;

}

.table th:first-child {

  padding-left: 10px;

}

.table td {

  border: 1px solid #E5E5E5;

  padding: 10px;

}

.l {

  float: left;

}

.r {

  float: right;

}

.gray {

  color: #999;

}

.placeholder {

  font-size: 14px;

  color: #cccccc;

}

.vui-intro {

  text-align: center;

}

.vui-intro__logo img {

  margin: 0 auto;

}

.vui-intro__title {

  font-size: 45px;

  line-height: 60px;

  font-weight: 400;

  font-family: monospace;

}

.vui-intro__subtitle {

  font-size: 15px;

  color: #455a64;

}