diff --git a/src/components/Widgets/Announcement/index.vue b/src/components/Widgets/Announcement/index.vue
index a4f7ab03b..93f7e04d6 100644
--- a/src/components/Widgets/Announcement/index.vue
+++ b/src/components/Widgets/Announcement/index.vue
@@ -7,7 +7,7 @@
     :title="title"
     @close="onClose"
   >
-    <span class="announcement-main">{{ announcement.content }}</span>
+    <MarkDown class="markdown" :value="announcement.content" />
     <span v-if="announcement.link">
       <el-link :href="announcement.link" target="_blank" type="info" class="link-more">
         {{ $t('common.ViewMore') }}
@@ -19,9 +19,11 @@
 
 <script>
 import { mapGetters } from 'vuex'
+import MarkDown from '@/components/Widgets/MarkDown'
 
 export default {
   name: 'Announcement',
+  components: { MarkDown },
   data() {
     return {
       viewedKey: 'AnnouncementViewed'
@@ -54,7 +56,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .announcement >>> .el-alert__content {
   width: 100%;
 }
@@ -70,4 +72,14 @@ export default {
 .icon {
   vertical-align: text-bottom;
 }
+>>> .markdown-body {
+  background-color: transparent !important;
+  a {
+    color: var(--color-info) !important;
+  }
+  h1, h2, h3, h4, h5 {
+    margin-top: 0;
+    margin-bottom: 10px;
+  }
+}
 </style>
diff --git a/src/components/Widgets/MarkDown/index.vue b/src/components/Widgets/MarkDown/index.vue
index 950173b3d..696677509 100644
--- a/src/components/Widgets/MarkDown/index.vue
+++ b/src/components/Widgets/MarkDown/index.vue
@@ -25,13 +25,12 @@ export default {
 </script>
 
 <style lang='scss' scoped>
+.markdown-body {
+  background-color: #f3f3f3;
+}
 .markdown-body * {
   padding: 10px;
-  background-color: #f3f3f3;
   color: #1a1a1a;
   font-size: 13px;
-  //& >>> .table * {
-  //  background-color: #f3f3f3;
-  //}
 }
 </style>