diff --git a/package.json b/package.json
index 51c45c186..e6d9e3109 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/MarkDown/index.vue b/src/components/MarkDown/index.vue
new file mode 100644
index 000000000..b4cee3668
--- /dev/null
+++ b/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>
diff --git a/src/components/index.js b/src/components/index.js
index 8c7b217ac..2313b94fb 100644
--- a/src/components/index.js
+++ b/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'
diff --git a/src/views/tickets/components/Comments.vue b/src/views/tickets/components/Comments.vue
index 080e91672..99910c2ee 100644
--- a/src/views/tickets/components/Comments.vue
+++ b/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,