在页面中渲染源码

在实际开发中有个需求，就是要吧写的代码在网页中展示，就像element、iview官网一样，能让别人看到自己的代码，这个需求一时间让我头疼，经过研究发现一个好用的文本编辑器插件markdown(在vue中用的还不错)

找了许多自认为这个比较好，不多说上教程

依赖下载

cnpm install marked --save
cnpm install --sava highlight.js
cnpm install text-loader --save

修改build文件下的webpack.dase.conf.js文件module.exports下的module对象中的rules数组(添加一个对象)

{
   test: /.md$/,
   loader: 'text-loader'
},

封装插件并注册（注册的一步就不写了）

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

<script>
  let marked = require('marked');
  let hljs = require('highlight.js');
  import 'highlight.js/styles/default.css';


  marked.setOptions({
    renderer: new marked.Renderer(),
    gfm: true,
    tables: true,
    breaks: false,
    pedantic: false,
    sanitize: false,
    smartLists: false,
    smartypants: false,
    highlight: function (code, lang) {
      if (lang && hljs.getLanguage(lang)) {
        return hljs.highlight(lang, code, true).value;
      } else {
        return hljs.highlightAuto(code).value;
      }
    }
  });
  export default{
    name: 'markdown',
    data() {
      return {
        // markdown:markdown
      }
    },
    props:['markdown'],
    created() {
      console.log(this.markdown)
    },
    computed: {
      compiledMarkdown() {
        let detail = this.markdown;
        return marked(detail || '', {
          sanitize: true
        });
      }
    }
  }
</script>
<style>//在页面中到class自行配制颜色
  .hljs-tag {
    color:#3e76f6;
  }
  .hljs-attr{
    color: #e96900;
  }
  .hljs-string {
    color:#42b983
  }
  .hljs-name {
    font-weight: inherit;
  }
</style>

使用时

<template>
  <div>
    <markdown :markdown="markdowns"></markdown>
  </div>

</template>

<script>
import README from '@/assets/README.md'//md文件所在的目录
  export default{
    name: 'test',
    data() {
      return {
        markdowns:README
      }
    },
    created() {
      console.log(README)
    }
  }
</script>
<style>

</style>

支持高亮，可自己配值颜色