<!-- 答案内容预览 -->
<template>
  <vue-markdown :source="content" v-highlight  class="markdown-body" >
    </vue-markdown>
</template>

<script>

import hljs from 'highlight.js' // 代码块高亮
// import 'highlight.js/styles/github.css' // 代码块高亮样式
import 'github-markdown-css' // 整体 markdown 样式
import VueMarkdown from 'vue-markdown'
export default {
  data () {
    return {
      result: undefined
    };
  },
  props: ['content'],
  components: {VueMarkdown},

  computed: {},

  directives: {
    highlight: {
    // 指令的定义
      inserted: function (el) {
        let blocks = el.querySelectorAll('pre code');
        blocks.forEach((block, index) => {
        /** 代码高亮 */
          hljs.highlightBlock(block);
          /** 手动添加一个hljs类名，防止不支持的语言背景变空白 */
          block.classList.add('hljs');
        })
      }
    }
  },
  mounted () {

  },

  methods: {}
}

</script>
<style scoped>
.markdown-body{
    background: none !important;
    font-size: 14px !important;
}
.markdown-body pre{
    background-color: #3b3d3f;
}
</style>
