增加前端渲染markdown

src/components/d2-markdown/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="component-markdown">
+    <div class="spin-group" v-if="!markedHTML">
+      <div>正在加载</div>
+    </div>
+    <div class="markdown-body" v-html="markedHTML"></div>
+  </div>
+</template>
+
+<script>
+import marked from 'marked'
+import highlight from 'highlight.js'
+import 'github-markdown-css'
+
+export default {
+  name: 'd2-markdown',
+  props: {
+    url: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    source: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    highlight: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  data () {
+    return {
+      getReadmePublicPath: '',
+      markedHTML: ''
+    }
+  },
+  mounted () {
+    if (this.source) {
+      this.initWithMd()
+    } else {
+      console.log('not mounted init')
+    }
+  },
+  methods: {
+    // 使用 md 初始化
+    initWithMd () {
+      this.markedHTML = this.marked(this.source)
+    },
+    marked (data) {
+      const renderer = new marked.Renderer()
+      return marked(data, {
+        ...this.highlight ? { highlight: (code) => highlight.highlightAuto(code).value } : {},
+        renderer
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.component-markdown {
+  .spin-group {
+    height: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    color: $color-primary;
+  }
+}
+</style>

src/components/index.js

@@ -6,3 +6,4 @@ import d2Container from './d2-container'
 Vue.component('d2-container', d2Container)
 Vue.component('d2-icon', () => import('./d2-icon'))
 Vue.component('d2-icon-svg', () => import('./d2-icon-svg/index.vue'))
+Vue.component('d2-markdown', () => import('./d2-markdown'))