feat: markdown

package.json

@@ -64,6 +64,7 @@
     "vue-echarts": "^5.0.0-beta.0",
     "vue-i18n": "^8.15.5",
     "vue-json-editor": "^1.4.3",
+    "vue-markdown": "^2.2.4",
     "vue-moment": "^4.1.0",
     "vue-password-strength-meter": "^1.7.2",
     "vue-router": "3.0.6",
@@ -94,6 +95,7 @@
     "eslint": "^5.15.3",
     "eslint-plugin-vue": "5.2.2",
     "eslint-plugin-vue-i18n": "^0.3.0",
+    "github-markdown-css": "^5.1.0",
     "html-webpack-plugin": "3.2.0",
     "husky": "^4.2.3",
     "less-loader": "^5.0.0",

src/components/MarkDown/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="markdown-body">
+    <VueMarkdown :source="value" />
+  </div>
+</template>
+
+<script>
+import VueMarkdown from 'vue-markdown'
+import 'github-markdown-css/github-markdown.css'
+
+export default {
+  components: {
+    VueMarkdown
+  },
+  props: {
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {}
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/index.js

@@ -31,3 +31,4 @@ export { default as CronTab } from './CronTab'
 export { default as Pagination } from './Pagination'
 export { default as Tooltip } from './Tooltip'
 export { default as ResourceActivity } from './ResourceActivity'
+export { default as MarkDown } from './MarkDown'

src/views/tickets/components/Comments.vue

@@ -14,7 +14,7 @@
             <small class="text-muted">{{ formatTime(item.date_created) }}</small>
             <br>
             <small class="text-muted">{{ item.date_created | date }}</small>
-            <div style="padding-top: 10px;" v-html="item.body" />
+            <MarkDown :value="item.body" />
           </div>
         </div>
       </div>
@@ -69,10 +69,11 @@
 import IBox from '@/components/IBox'
 import { formatTime, getDateTimeStamp } from '@/utils'
 import { toSafeLocalDateStr } from '@/utils/common'
+import MarkDown from '@/components/MarkDown'
 
 export default {
   name: 'Comments',
-  components: { IBox },
+  components: { IBox, MarkDown },
   props: {
     object: {
       type: Object,