From 587c2d5548815246c40c3daf555e3b0ff7c40e5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=92=83=E7=99=BD?= <18511759309@163.com>
Date: Fri, 4 Jun 2021 19:24:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=B7=BB=E5=8A=A0tooltip=E5=8F=8A?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E9=AB=98=E4=BA=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                          |   2 +
 src/assets/style/markdown.less        | 723 ++++++++++++++------------
 src/components/content/md-preview.vue |   7 +
 src/components/header/tool-button.vue |  32 +-
 src/main.js                           |   4 +
 src/store/index.js                    |  51 +-
 webpack.config.js                     |   2 +-
 7 files changed, 443 insertions(+), 378 deletions(-)

diff --git a/package.json b/package.json
index f83d79d..148094c 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,9 @@
     "webpack-dev-server": "^3.11.2"
   },
   "dependencies": {
+    "highlight.js": "^11.0.1",
     "marked": "^2.0.6",
+    "vtip": "^1.0.6",
     "vue": "^2.6.12",
     "vuex": "^3.6.2"
   }
diff --git a/src/assets/style/markdown.less b/src/assets/style/markdown.less
index 9cf97af..231049a 100644
--- a/src/assets/style/markdown.less
+++ b/src/assets/style/markdown.less
@@ -10,118 +10,399 @@
 .htmledit_views {
   font-family: -apple-system, SF UI Text, Arial, PingFang SC, Hiragino Sans GB,
     Microsoft YaHei, WenQuanYi Micro Hei, sans-serif, SimHei, SimSun;
+  img {
+    max-width: 100%;
+    height: auto;
+    &.right {
+      border: 1px solid #ccc;
+      float: right;
+      margin-left: 15px;
+      padding: 5px;
+    }
+    &.left {
+      border: 1px solid #ccc;
+      float: left;
+      margin-right: 15px;
+      padding: 5px;
+    }
+    &.mathcode {
+      margin: 0 8px;
+    }
+  }
+  .marker {
+    background-color: #ff0;
+  }
+  figure {
+    text-align: center;
+    margin: 0 24px;
+    display: inline-block;
+    & > figcaption {
+      text-align: center;
+      margin: 8px;
+      color: #999;
+      font-size: 14px;
+      display: block;
+    }
+  }
+  a {
+    color: #4ea1db;
+    text-decoration: none;
+    & > img {
+      padding: 1px;
+      margin: 1px;
+      border: none;
+      outline: #0782c1 solid 1px;
+    }
+    &:visited {
+      color: #6795b5;
+    }
+  }
+  .code-featured {
+    border: 5px solid red;
+  }
+  .math-featured {
+    padding: 20px;
+    box-shadow: 0 0 2px rgba(200, 0, 0, 1);
+    background-color: rgba(255, 0, 0, 0.05);
+    margin: 10px;
+  }
+  .image-clean {
+    border: 0;
+    background: 0 0;
+    padding: 0;
+    & > figcaption {
+      font-size: 0.9em;
+      text-align: right;
+    }
+  }
+  .image-grayscale {
+    background-color: #fff;
+    color: #666;
+  }
+  .embed-240p {
+    max-width: 426px;
+    max-height: 240px;
+    margin: 0 auto;
+  }
+  .embed-360p {
+    max-width: 640px;
+    max-height: 360px;
+    margin: 0 auto;
+  }
+  .embed-480p {
+    max-width: 854px;
+    max-height: 480px;
+    margin: 0 auto;
+  }
+  .embed-720p {
+    max-width: 1280px;
+    max-height: 720px;
+    margin: 0 auto;
+  }
+  .embed-1080p {
+    max-width: 1920px;
+    max-height: 1080px;
+    margin: 0 auto;
+  }
+  p {
+    font-size: 18px;
+    color: #4d4d4d;
+    font-weight: 400;
+    line-height: 26px !important;
+    margin: 0 0 16px;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+  * {
+    box-sizing: border-box;
+  }
+  ul {
+    ol {
+      margin: 0 0 24px 32px;
+    }
+    li {
+      list-style-type: disc;
+      margin: 8px 0 0 32px;
+    }
+  }
+  ol {
+    li {
+      list-style-type: decimal;
+      margin-left: 40px;
+      margin-top: 8px;
+    }
+  }
+  h1 {
+    font-size: 28px;
+    line-height: 36px;
+  }
+  h2 {
+    font-size: 24px;
+    line-height: 32px;
+  }
+  h3 {
+    font-size: 22px;
+    line-height: 30px;
+  }
+  h4 {
+    font-size: 20px;
+    line-height: 28px;
+  }
+  h5 {
+    font-size: 18px;
+    line-height: 26px;
+  }
+  h6 {
+    font-size: 16px;
+    line-height: 24px;
+  }
+  blockquote {
+    display: block;
+    padding: 16px 16px 0;
+    margin: 0 0 24px;
+    border-left: 8px solid #dddfe4;
+    background: #eef0f4;
+    overflow: auto;
+    overflow-scrolling: touch;
+    word-wrap: normal;
+    word-break: normal;
+    p {
+      font-size: 16px;
+      line-height: 26px;
+      font-weight: 400;
+      margin-bottom: 16px;
+      color: #4f4f4f;
+    }
+  }
+  hr {
+    margin: 24px 0;
+    border: none;
+    border-bottom: solid #ccc 1px;
+  }
+  table {
+    border-collapse: collapse;
+    display: table;
+    width: 100%;
+    text-align: left;
+    margin-bottom: 24px;
+    margin-left: auto;
+    margin-right: auto;
+    tr {
+      border: 0;
+      border-top: 1px solid #ddd;
+      background-color: #fff;
+      &:nth-child(2n) {
+        background-color: #f7f7f7;
+      }
+      th {
+        font-weight: 700;
+        background-color: #eff3f5;
+        p {
+          font-weight: 700;
+        }
+      }
+    }
+  }
+  tbody {
+    border: 0;
+  }
+  dl {
+    margin: 24px;
+    dt {
+      margin: 8px;
+      font-weight: 700;
+      dd {
+        margin: 8px;
+      }
+    }
+    dd {
+      margin: 0 0 8px 40px;
+    }
+  }
+  .initialism {
+    font-size: 90%;
+    text-transform: uppercase;
+  }
+  pre {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    margin: 0 0 24px;
+    overflow-x: auto;
+    // padding: 8px;
+    code {
+      display: block;
+      line-height: 22px;
+      overflow-x: auto;
+      white-space: pre;
+      word-wrap: normal;
+      border-radius: 4px;
+      padding: 8px;
+      tab-size: 4;
+      code {
+        &.hljs {
+          padding: 0;
+        }
+      }
+      &:not(.hljs) {
+        background-color: #f3f4f5;
+      }
+    }
+  }
+  code {
+    border-radius: 4px;
+    display: inline-block;
+    background-color: #f3f4f5;
+    padding: 2px 6px;
+    font-family: -apple-system, SF UI Text, Arial, PingFang SC, Hiragino Sans GB,
+      Microsoft YaHei, WenQuanYi Micro Hei, sans-serif, SimHei, SimSun;
+    ol {
+      margin: 0;
+      overflow: hidden;
+      li {
+        list-style-type: none;
+        margin-left: 0;
+        margin-top: 0;
+        height: 22px;
+        div {
+          &.hljs-ln-code {
+            margin-left: 8px;
+          }
+          &.hljs-ln-numbers {
+            width: 24px;
+            border-right: 1px solid #c5c5c5;
+            .hljs-ln-line {
+              word-wrap: normal;
+            }
+          }
+        }
+      }
+      &.hundred {
+        li {
+          div {
+            &.hljs-ln-numbers {
+              width: 30px;
+            }
+          }
+        }
+      }
+      &.thousand {
+        li {
+          div {
+            &.hljs-ln-numbers {
+              width: 36px;
+            }
+          }
+        }
+      }
+    }
+  }
+  .hot-keyword {
+    &:visited {
+      color: #3399ea;
+    }
+  }
+  .footnote {
+    vertical-align: top;
+    position: relative;
+    top: -4px;
+    font-size: 12px;
+  }
+  .MathJax_SVG_Display {
+    text-align: center;
+    margin: 24px 0;
+    font-size: 18px;
+    font-weight: 400;
+    color: #4f4f4f;
+    position: relative;
+    text-indent: 0;
+    max-width: none;
+    max-height: none;
+    min-width: 0;
+    min-height: 0;
+    width: 100%;
+  }
+  .prettyprint {
+    .pre-numbering {
+      position: absolute;
+      width: 48px;
+      background-color: #eef0f4;
+      top: 0;
+      left: 0;
+      margin: 0;
+      padding: 8px 0;
+      list-style: none;
+      text-align: right;
+    }
+  }
+  .pre-numbering {
+    li {
+      padding: 0 8px;
+      list-style: none;
+      margin: 0;
+    }
+  }
+  kbd {
+    padding: 2px 8px;
+    border: 1px solid rgba(63, 63, 63, 0.25);
+    box-shadow: 0 1px 0 rgba(63, 63, 63, 0.25);
+    background-color: #fff;
+    color: #333;
+    border-radius: 4px;
+    display: inline-block;
+    margin: 0 2px;
+    white-space: nowrap;
+  }
+  .dp-highlighter {
+    font-size: 12px;
+    text-align: left;
+    margin: 0 0 24px;
+  }
+  .csdn-data-video {
+    width: 200px;
+    img {
+      margin: 0;
+      display: block;
+      width: 200px;
+      height: 112px;
+    }
+    p {
+      margin-top: 10px;
+      margin-bottom: 0;
+      font-size: 14px;
+    }
+  }
+  pre[data-from="code-for-outside"] {
+    overflow: hidden;
+    code {
+      overflow-x: auto;
+      overflow-y: hidden;
+      * {
+        overflow: visible;
+        overflow-wrap: break-word;
+      }
+    }
+    p {
+      code {
+        padding: 0;
+      }
+    }
+  }
 }
 .cke_editable {
   margin: 24px;
   word-wrap: break-word;
 }
-.htmledit_views img.right {
-  border: 1px solid #ccc;
-  float: right;
-  margin-left: 15px;
-  padding: 5px;
-}
-.htmledit_views img.left {
-  border: 1px solid #ccc;
-  float: left;
-  margin-right: 15px;
-  padding: 5px;
-}
-.htmledit_views .marker {
-  background-color: #ff0;
-}
-.htmledit_views figure {
-  text-align: center;
-  margin: 0 24px;
-  display: inline-block;
-}
-.htmledit_views figure > figcaption {
-  text-align: center;
-  margin: 8px;
-  color: #999;
-  font-size: 14px;
-  display: block;
-}
-.htmledit_views a > img {
-  padding: 1px;
-  margin: 1px;
-  border: none;
-  outline: #0782c1 solid 1px;
-}
-.htmledit_views .code-featured {
-  border: 5px solid red;
-}
-.htmledit_views .math-featured {
-  padding: 20px;
-  box-shadow: 0 0 2px rgba(200, 0, 0, 1);
-  background-color: rgba(255, 0, 0, 0.05);
-  margin: 10px;
-}
-.htmledit_views .image-clean {
-  border: 0;
-  background: 0 0;
-  padding: 0;
-}
-.htmledit_views .image-clean > figcaption {
-  font-size: 0.9em;
-  text-align: right;
-}
-.htmledit_views .image-grayscale {
-  background-color: #fff;
-  color: #666;
-}
 .htmledit_views .image-grayscale img,
 .htmledit_views img.image-grayscale {
   filter: grayscale(100%);
 }
-.htmledit_views .embed-240p {
-  max-width: 426px;
-  max-height: 240px;
-  margin: 0 auto;
-}
-.htmledit_views .embed-360p {
-  max-width: 640px;
-  max-height: 360px;
-  margin: 0 auto;
-}
-.htmledit_views .embed-480p {
-  max-width: 854px;
-  max-height: 480px;
-  margin: 0 auto;
-}
-.htmledit_views .embed-720p {
-  max-width: 1280px;
-  max-height: 720px;
-  margin: 0 auto;
-}
-.htmledit_views .embed-1080p {
-  max-width: 1920px;
-  max-height: 1080px;
-  margin: 0 auto;
-}
-.htmledit_views p {
-  font-size: 18px;
-  color: #4d4d4d;
-  font-weight: 400;
-  line-height: 26px !important;
-  margin: 0 0 16px;
-  overflow-x: auto;
-  overflow-y: hidden;
-}
 p[align="center"] {
   text-align: center;
 }
-.htmledit_views img {
-  max-width: 100%;
-  height: auto;
-}
 .htmledit_views strong,
 .htmledit_views strong span {
   font-weight: 700;
 }
-.htmledit_views * {
-  box-sizing: border-box;
-}
 .htmledit_views h1,
 .htmledit_views h2,
 .htmledit_views h3,
@@ -138,53 +419,6 @@ p[align="center"] {
   padding: 0;
   font-size: 16px;
 }
-.htmledit_views ul ol {
-  margin: 0 0 24px 32px;
-}
-.htmledit_views ul li {
-  list-style-type: disc;
-  margin: 8px 0 0 32px;
-}
-.htmledit_views ol li {
-  list-style-type: decimal;
-  margin-left: 40px;
-  margin-top: 8px;
-}
-.htmledit_views h1 {
-  font-size: 28px;
-  line-height: 36px;
-}
-.htmledit_views h2 {
-  font-size: 24px;
-  line-height: 32px;
-}
-.htmledit_views h3 {
-  font-size: 22px;
-  line-height: 30px;
-}
-.htmledit_views h4 {
-  font-size: 20px;
-  line-height: 28px;
-}
-.htmledit_views h5 {
-  font-size: 18px;
-  line-height: 26px;
-}
-.htmledit_views h6 {
-  font-size: 16px;
-  line-height: 24px;
-}
-.htmledit_views blockquote {
-  display: block;
-  padding: 16px 16px 0;
-  margin: 0 0 24px;
-  border-left: 8px solid #dddfe4;
-  background: #eef0f4;
-  overflow: auto;
-  overflow-scrolling: touch;
-  word-wrap: normal;
-  word-break: normal;
-}
 .htmledit_views blockquote ol,
 .htmledit_views blockquote ul {
   margin-bottom: 16px;
@@ -196,38 +430,6 @@ p[align="center"] {
 .htmledit_views blockquote ul li {
   margin-bottom: 0;
 }
-.htmledit_views blockquote p {
-  font-size: 16px;
-  line-height: 26px;
-  font-weight: 400;
-  margin-bottom: 16px;
-  color: #4f4f4f;
-}
-.htmledit_views hr {
-  margin: 24px 0;
-  border: none;
-  border-bottom: solid #ccc 1px;
-}
-.htmledit_views table tr {
-  border: 0;
-  border-top: 1px solid #ddd;
-  background-color: #fff;
-}
-.htmledit_views table {
-  border-collapse: collapse;
-  display: table;
-  width: 100%;
-  text-align: left;
-  margin-bottom: 24px;
-  margin-left: auto;
-  margin-right: auto;
-}
-.htmledit_views tbody {
-  border: 0;
-}
-.htmledit_views table tr:nth-child(2n) {
-  background-color: #f7f7f7;
-}
 .htmledit_views table tr td,
 .htmledit_views table tr th {
   border: 1px solid #ddd;
@@ -246,50 +448,19 @@ p[align="center"] {
   text-align: left;
   line-height: 22px;
 }
-.htmledit_views table tr th p {
-  font-weight: 700;
-}
 .htmledit_views table tr td code,
 .htmledit_views table tr th code {
   white-space: normal;
   word-break: break-word;
 }
-.htmledit_views table tr th {
-  font-weight: 700;
-  background-color: #eff3f5;
-}
-.htmledit_views dl {
-  margin: 24px;
-}
-.htmledit_views dl dt {
-  margin: 8px;
-  font-weight: 700;
-}
-.htmledit_views dl dt dd {
-  margin: 8px;
-}
 .htmledit_views abbr[data-original-title],
 .htmledit_views abbr[title] {
   cursor: help;
   border-bottom: 1px dotted #999;
 }
-.htmledit_views .initialism {
-  font-size: 90%;
-  text-transform: uppercase;
-}
-.htmledit_views pre {
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  margin: 0 0 24px;
-  overflow-x: auto;
-  padding: 8px;
-}
 .marker {
   background-color: #ff0;
 }
-htmledit_views img.mathcode {
-  margin: 0 8px;
-}
 .htmledit_views kbd,
 .htmledit_views pre,
 .htmledit_views samp {
@@ -307,29 +478,10 @@ htmledit_views img.mathcode {
     "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata,
     Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif;
 }
-.htmledit_views code {
-  border-radius: 4px;
-}
-.htmledit_views a {
-  color: #4ea1db;
-  text-decoration: none;
-}
 .htmledit_views a:focus,
 .htmledit_views a:hover {
   color: #ca0c16;
 }
-.htmledit_views a:visited {
-  color: #6795b5;
-}
-.htmledit_views .hot-keyword:visited {
-  color: #3399ea;
-}
-.htmledit_views .footnote {
-  vertical-align: top;
-  position: relative;
-  top: -4px;
-  font-size: 12px;
-}
 .htmledit_views .flow-chart,
 .htmledit_views .sequence-diagram {
   text-align: center;
@@ -348,36 +500,6 @@ htmledit_views img.mathcode {
 .htmledit_views .sequence-diagram [stroke="#000000"] {
   stroke: #4f4f4f;
 }
-.htmledit_views .MathJax_SVG_Display {
-  text-align: center;
-  margin: 24px 0;
-  font-size: 18px;
-  font-weight: 400;
-  color: #4f4f4f;
-  position: relative;
-  text-indent: 0;
-  max-width: none;
-  max-height: none;
-  min-width: 0;
-  min-height: 0;
-  width: 100%;
-}
-.htmledit_views pre code {
-  display: block;
-  line-height: 22px;
-  overflow-x: auto;
-  white-space: pre;
-  word-wrap: normal;
-  border-radius: 4px;
-  padding: 8px;
-  tab-size: 4;
-}
-.htmledit_views pre code code.hljs {
-  padding: 0;
-}
-.htmledit_views pre code:not(.hljs) {
-  background-color: #f3f4f5;
-}
 .htmledit_views pre code,
 .htmledit_views pre code div,
 .htmledit_views pre code span {
@@ -390,97 +512,12 @@ htmledit_views img.mathcode {
   background-color: #f6f8fa;
   border: none;
 }
-.htmledit_views .prettyprint .pre-numbering {
-  position: absolute;
-  width: 48px;
-  background-color: #eef0f4;
-  top: 0;
-  left: 0;
-  margin: 0;
-  padding: 8px 0;
-  list-style: none;
-  text-align: right;
-}
-.htmledit_views .pre-numbering li {
-  padding: 0 8px;
-  list-style: none;
-  margin: 0;
-}
-.htmledit_views dl dd {
-  margin: 0 0 8px 40px;
-}
-.htmledit_views kbd {
-  padding: 2px 8px;
-  border: 1px solid rgba(63, 63, 63, 0.25);
-  box-shadow: 0 1px 0 rgba(63, 63, 63, 0.25);
-  background-color: #fff;
-  color: #333;
-  border-radius: 4px;
-  display: inline-block;
-  margin: 0 2px;
-  white-space: nowrap;
-}
-.htmledit_views .dp-highlighter {
-  font-size: 12px;
-  text-align: left;
-  margin: 0 0 24px;
-}
-.htmledit_views code ol {
-  margin: 0;
-  overflow: hidden;
-}
-.htmledit_views code ol li {
-  list-style-type: none;
-  margin-left: 0;
-  margin-top: 0;
-  height: 22px;
-}
-.htmledit_views code ol li div.hljs-ln-code {
-  margin-left: 8px;
-}
 .htmledit_views code ol li div.hljs-ln-code,
 .htmledit_views code ol li div.hljs-ln-numbers {
   float: left;
   height: 22px;
 }
-.htmledit_views code ol li div.hljs-ln-numbers {
-  width: 24px;
-  border-right: 1px solid #c5c5c5;
-}
-.htmledit_views code ol li div.hljs-ln-numbers .hljs-ln-line {
-  word-wrap: normal;
-}
-.htmledit_views code ol.hundred li div.hljs-ln-numbers {
-  width: 30px;
-}
-.htmledit_views code ol.thousand li div.hljs-ln-numbers {
-  width: 36px;
-}
-.htmledit_views .csdn-data-video {
-  width: 200px;
-}
-.htmledit_views .csdn-data-video img {
-  margin: 0;
-  display: block;
-  width: 200px;
-  height: 112px;
-}
-.htmledit_views .csdn-data-video p {
-  margin-top: 10px;
-  margin-bottom: 0;
-  font-size: 14px;
-}
-.htmledit_views pre[data-from="code-for-outside"] {
-  overflow: hidden;
-}
-.htmledit_views pre[data-from="code-for-outside"] code {
-  overflow-x: auto;
-  overflow-y: hidden;
-}
-.htmledit_views pre[data-from="code-for-outside"] code * {
-  overflow: visible;
-  overflow-wrap: break-word;
-}
-.htmledit_views pre[data-from="code-for-outside"] p code {
-  padding: 0;
+
+.htmledit_views pre code .hljs-comment {
+  color: green;
 }
diff --git a/src/components/content/md-preview.vue b/src/components/content/md-preview.vue
index 63a883c..74adb2b 100644
--- a/src/components/content/md-preview.vue
+++ b/src/components/content/md-preview.vue
@@ -6,6 +6,7 @@
 <script>
 import { mapState, mapMutations } from "vuex";
 import marked from "marked";
+import "highlight.js/styles/github.css";
 export default {
   data() {
     return {};
@@ -16,6 +17,12 @@ export default {
   methods: {
     ...mapMutations(["setHtml"]),
     transferMarkdown(val) {
+      marked.setOptions({
+        highlight: function(code, lang, callback) {
+          const html = require("highlight.js").highlightAuto(code).value;
+          return html;
+        }
+      });
       if (!val.trim()) return;
       const html = marked(val);
       this.setHtml(html);
diff --git a/src/components/header/tool-button.vue b/src/components/header/tool-button.vue
index 5d026f4..299e16f 100644
--- a/src/components/header/tool-button.vue
+++ b/src/components/header/tool-button.vue
@@ -1,5 +1,9 @@
 <template>
-  <div @click="handleTool(info.name)" class="tool_button">
+  <div
+    v-tip.top="info.tip"
+    @click="handleTool(info.name, info.startStr, info.endStr)"
+    class="tool_button"
+  >
     <span :class="['icon iconfont', `icon-${info.icon}`]"></span>
   </div>
 </template>
@@ -18,44 +22,26 @@ export default {
   },
   methods: {
     ...mapMutations(["setFullScreen", "setText", "setUlNum"]),
-    handleTool(type) {
+    handleTool(type, startStr, endStr) {
       switch (type) {
         case "bold":
-          this.updateText("**", "**");
-          break;
         case "italic":
-          this.updateText("_", "_");
-          break;
         case "quote":
-          this.updateText("\n> ", "");
-          break;
         case "code":
-          this.updateText("`", "`");
-          break;
         case "link":
-          this.updateText("[", "](url)");
-          break;
         case "ul":
-          this.updateText("\n- ", "");
+        case "task":
+        case "table":
+          this.updateText(startStr, endStr);
           break;
         case "ol":
           let ulNum = this.ulNum;
           this.updateText(`\n${ulNum++}. `, "");
           this.setUlNum(ulNum);
           break;
-        case "task":
-          this.updateText("\n- [ ] ", "");
-          break;
-        case "table":
-          this.updateText(
-            `\n\n| header | header |\n| ------ | ------ |\n| cell | cell |\n| cell | cell |\n\n`,
-            ""
-          );
-          break;
         case "fullScreen":
           this.setFullScreen(true);
           break;
-
         default:
           break;
       }
diff --git a/src/main.js b/src/main.js
index 028e166..bb9fc7e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,9 +1,13 @@
 import Vue from "vue";
 import App from "./App";
 import store from "./store";
+import Vtip from "vtip";
+import "vtip/lib/index.min.css";
 import { initStyle, isNotEmpty } from "@/assets/js/utils";
 import "@/assets/style/global.less";
 
+Vue.use(Vtip.directive);
+
 function initMdEditor(obj) {
   const { el, onChange, canAttachFile, themeOptions } = obj;
   if (!el || !document.querySelector(el)) throw new Error("请指定容器");
diff --git a/src/store/index.js b/src/store/index.js
index 60b39a5..5582d7a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -12,47 +12,76 @@ export default new Vuex.Store({
       {
         name: "bold",
         icon: "bold",
-        format: "**"
+        tip: "粗体",
+        startStr: "**",
+        endStr: "**"
       },
       {
         name: "italic",
-        icon: "italic"
+        icon: "italic",
+        tip: "斜体",
+        startStr: "_",
+        endStr: "_"
       },
       {
         name: "quote",
-        icon: "baojiaquotation"
+        icon: "baojiaquotation",
+        tip: "插入引用",
+        startStr: "\n> ",
+        endStr: ""
       },
       {
         name: "code",
-        icon: "code"
+        icon: "code",
+        tip: "插入代码",
+        startStr: "`",
+        endStr: "`"
       },
       {
         name: "link",
-        icon: "lianjie"
+        icon: "lianjie",
+        tip: "添加链接",
+        startStr: "[",
+        endStr: "](url)"
       },
       {
         name: "ul",
-        icon: "unorderedList"
+        icon: "unorderedList",
+        tip: "添加无序列表",
+        startStr: "\n- ",
+        endStr: ""
       },
       {
         name: "ol",
-        icon: "youxuliebiao"
+        icon: "youxuliebiao",
+        tip: "添加有序列表",
+        startStr: "",
+        endStr: ""
       },
       {
         name: "task",
-        icon: "renwu"
+        icon: "renwu",
+        tip: "添加任务列表",
+        startStr: "\n- [ ] ",
+        endStr: ""
       },
       {
         name: "table",
-        icon: "biaoge"
+        icon: "biaoge",
+        tip: "添加表格",
+        startStr:
+          "\n\n| header | header |\n| ------ | ------ |\n| cell | cell |\n| cell | cell |\n\n",
+        endStr: ""
       },
       {
         name: "fullScreen",
-        icon: "fullScreen"
+        icon: "fullScreen",
+        tip: "全屏模式"
       }
     ],
     ulNum: 1,
-    text: "# 456456456\n## 4657567\n3456456456456",
+    text:
+      "# 456456456\n## 4657567\n3456`456`4\n```js\nfunction fn() {\n  return null;\n}\n```\n56456",
     selectionInfo: "",
     html: "",
     canAttachFile: true
diff --git a/webpack.config.js b/webpack.config.js
index 0b68260..cf0b5fa 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -23,7 +23,7 @@ module.exports = {
         loader: "vue-loader"
       },
       {
-        test: /\.less$/i,
+        test: /\.(less|css)$/i,
         use: ["style-loader", "css-loader", "less-loader"]
       },
 
-- 
GitLab