From 7d5dba7719688ab81cb05c8b80a2eab79b6b1f15 Mon Sep 17 00:00:00 2001
From: Yu Sun <suny226@mail2.sysu.edu.cn>
Date: Wed, 3 Aug 2022 23:08:03 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=89=8D=E7=AB=AF=E6=B8=B2?=
 =?UTF-8?q?=E6=9F=93markdown?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/d2-markdown/index.vue | 74 ++++++++++++++++++++++++++++
 src/components/index.js              |  1 +
 2 files changed, 75 insertions(+)
 create mode 100644 src/components/d2-markdown/index.vue

diff --git a/src/components/d2-markdown/index.vue b/src/components/d2-markdown/index.vue
new file mode 100644
index 0000000..5686089
--- /dev/null
+++ b/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>
diff --git a/src/components/index.js b/src/components/index.js
index 9c38cd8..a7e7a66 100644
--- a/src/components/index.js
+++ b/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'))