整了半天没整出来，markdown编辑器就放弃了，想找个解析个高亮的插件，就找到了上述两个，看了一段时间，原来官网就有markdown实例，果断搬过来用了，但是样式是在太丑了， 代码就直接放到下面了，

<template>
 <div>

   <div id="editor">
     <textarea v-model="input"></textarea>
     <div v-html="compiledMarkdown"></div>
   </div>
 </div>
</template>

<script>
 import Marked from 'marked'
 import highlightjs from 'highlight.js'
 import 'highlight.js/styles/googlecode.css'

 export default {
   components: {Marked, highlightjs},
   data() {
       return {
         input: '# hello'
       }
     },
   computed: {
       compiledMarkdown: function () {
         return Marked(this.input, { sanitize: true })
       }
     },
 }
</script>

<style>
 #editor {
   height: 500px;
   font-family: 'Helvetica Neue', Arial, sans-serif;
 }

 textarea, #editor div {
   display: inline-block;
   width: 49%;
   height: 100%;
   vertical-align: top;
   box-sizing: border-box;
   padding: 0 20px;
 }

 textarea {
   border: none;
   border-right: 1px solid #ccc;
   resize: none;
   outline: none;
   background-color: #f6f6f6;
   font-size: 14px;
   font-family: 'Monaco', courier, monospace;
   padding: 20px;
 }

 code {
   color: #f66;
 }
</style>

代码块样式是在不能忍受，