knightyun · eric-gitta-moore · Jan 11, 2020 · Mar 15, 2020 · Mar 15, 2020 · Mar 22, 2020
diff --git a/.gitignore b/.gitignore
@@ -2,4 +2,5 @@
 .DS_Store
 node_modules
 .idea
-.vscode
+.vscode
+./package-lock.json
diff --git a/README.md b/README.md
@@ -1,5 +1,13 @@
-## Markdown转富文本 - 在线工具
+## Markdown 转富文本 - 在线工具
 
-### Markdown to rich text - Online tool
+> Markdown to rich text - Online tool
 
-Markdown转换为富文本格式的工具，即时生成预览，可直接复制富文本至粘贴板。
+Markdown 转换为富文本格式的工具，即时生成预览，可直接复制富文本至粘贴板。
+
+可用于微信公众号文章排版等场景。
+
+[在线转换](https://knightyun.github.io/markdown-to-richtext/)
+
+预览：
+
+![md](https://repository-images.githubusercontent.com/144536643/a77bb880-6c78-11ea-84b5-1da029442df5)
diff --git a/docs/index.html b/docs/index.html
@@ -10,58 +10,23 @@
     <script src="./js/index.js"></script>
     <link rel="stylesheet" href="./themes/github-v2.css" id="codeThemeId" />
     <link rel="stylesheet" id="pageThemeId" />
-    <style type="text/css">
-        html,
-        body {
-            height: 100%;
-        }
-
-        .topheader {
-            width: 100%;
-            float: left;
-            height: 100px;
-        }
-
-        #input {
-            width: 50%;
-            height: 100%;
-            position: absolute;
-            top: 100px;
-            left: 0px;
-        }
-
-        #output {
-            width: 50%;
-            position: absolute;
-            top: 100px;
-            left: 50%;
-        }
-
-        .convert-button,
-        .copy-button {
-            position: inherit;
-        }
-    </style>
 </head>
 
 <body>
-
     <div class="topheader">
         <a href="https://knightyun.github.io">
             <h1>Markdown转富文本工具</h1>
             <p>Markdown to rich text tool</p>
         </a>
-
         <ul>
             <li>
-                <iframe allowtransparency="true" frameborder="0" scrolling="0" width="90px" height="20px" class="github-watch" src="http://ghbtns.com/github-btn.html?user=knightyun&amp;repo=markdown-to-richtext&amp;type=watch&amp;count=true&amp;size=middle"></iframe>
+                <iframe allowtransparency="true" frameborder="0" scrolling="0" width="90px" height="20px" class="github-watch"
+                src="http://ghbtns.com/github-btn.html?user=knightyun&amp;repo=markdown-to-richtext&amp;type=watch&amp;count=true&amp;size=middle"></iframe>
             </li>
         </ul>
     </div>
-
     <!--编辑-->
     <textarea id="input" spellcheck="false"></textarea>
-
     <!--预览-->
     <div id="output" class="themes-config">
         <div class="theme-wrapper">
@@ -73,27 +38,6 @@ <h1>Markdown转富文本工具</h1>
         </div>
         <div class="wrapper" id="outputCtt"></div>
     </div>
-
-    <!-- <script>
-        var _hmt = _hmt || [];
-        (function() {
-            var hm = document.createElement("script");
-            hm.src = "//hm.baidu.com/hm.js?3e1cdb5d0a9e409358566f06f89e048d";
-            var s = document.getElementsByTagName("script")[0];
-            s.parentNode.insertBefore(hm, s);
-        })();
-    </script> -->
-
-    <!-- <script>
-        (function() {
-            var bp = document.createElement('script');
-            bp.src = '//push.zhanzhang.baidu.com/push.js';
-            var s = document.getElementsByTagName("script")[0];
-            s.parentNode.insertBefore(bp, s);
-        })();
-    </script> -->
-
-    <!-- <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script> -->
 </body>
 
 </html>
diff --git a/docs/js/index.js b/docs/js/index.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,15 +12,15 @@
         "url": "https://github.com/knightyun/markdown-to-richtext.git"
     },
     "keywords": [],
-    "author": "knightyun",
+    "author": "Knight Huang",
     "license": "MIT",
     "dependencies": {
-        "serialize-javascript": "^2.1.2"
+        "serialize-javascript": "^5.0.1"
     },
     "devDependencies": {
         "clean-webpack-plugin": "^0.1.19",
         "clipboard": "^2.0.4",
-        "copy-webpack-plugin": "^4.6.0",
+        "copy-webpack-plugin": "^5.1.1",
         "css-loader": "^1.0.1",
         "file-loader": "^1.1.11",
         "jsx-loader": "^0.13.2",

diff --git a/src/css/index.less b/src/css/index.less
@@ -7,3 +7,34 @@
 @import "./themes/tomorrow-night.css";
 @import "./prettify.less";
 @import "./wechat-fix.less";
+
+html,
+body {
+    height: 100%;
+}
+
+.topheader {
+    width: 100%;
+    float: left;
+    height: 100px;
+}
+
+#input {
+    width: 50%;
+    height: 100%;
+    position: absolute;
+    top: 100px;
+    left: 0px;
+}
+
+#output {
+    width: 50%;
+    position: absolute;
+    top: 100px;
+    left: 50%;
+}
+
+.convert-button,
+.copy-button {
+    position: inherit;
+}
diff --git a/src/css/style.less b/src/css/style.less
@@ -48,9 +48,11 @@ ul, ol {
 ol {
   list-style-type: decimal !important;
 }
+
 //========= Top Bar ============
 .topheader {
   overflow: hidden;
+  user-select: none;
   -webkit-user-select: none;
   height: 68px;
   padding: 0 20px;
@@ -63,76 +65,68 @@ ol {
   background: -ms-linear-gradient(-60deg,#3aa17e 0,#00537e 100%);
   background: linear-gradient(-60deg,#3aa17e 0,#00537e 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= '#3aa17e', endColorstr='#00537e', GradientType=1);
-}
-
-.topheader h1 {
-  font-size: 30px;
-  line-height: 64px;
-  color: #FFF;
-  font-family: fantasy,cursive,consolas;
-  text-shadow: 1px 1px 1px #000, 1px 1px 3px #CCC;
-  display: inline-block;
-}
-
-.topheader span {
-  font-size: 13px;
-  display: inline-block;
-  margin-left: 0;
-  color: #E4E4E4;
-  position: relative;
-  top: 10px;
-}
-
-.topheader span a {
-  color: #E4E4E4;
-}
-
-.topheader p {
-  color: #0ac;
-  font-size: 20px;
-  margin-top: -30px;
-}
-
-.topheader a:hover {
-  color: #e58c7c;
-}
-
-.topheader ul {
-  position: absolute;
-  right: 20px;
-  top: 0;
-  list-style-type: none !important;
-  height: 64px;
-  line-height: 64px;
-}
+  h1 {
+    font-size: 30px;
+    line-height: 64px;
+    color: #FFF;
+    font-family: fantasy,cursive,consolas;
+    text-shadow: 1px 1px 1px #000, 1px 1px 3px #CCC;
+    display: inline-block;
+  }
 
-.topheader ul li {
-  float: left;
-  margin-left: 20px;
-  font-family: consolas;
-}
+  p {
+    color: #0ac;
+    font-size: 20px;
+    margin-top: -30px;
+  }
 
-.topheader ul li a {
-  color: #555;
-  display: inline-block;
-  height: 100%;
-  line-height: 64px;
-}
+  span {
+    font-size: 13px;
+    display: inline-block;
+    margin-left: 0;
+    color: #E4E4E4;
+    position: relative;
+    top: 10px;
+    a {
+      color: #E4E4E4;
+    }
+  }
 
-.topheader ul li a {
-  color: #555;
-}
+  a:hover {
+    color: #e58c7c;
+  }
 
-.topheader ul li a:hover {
-  color: #000;
-  text-decoration: underline;
+  ul {
+    position: absolute;
+    right: 20px;
+    top: 0;
+    list-style-type: none !important;
+    height: 64px;
+    line-height: 64px;
+    li {
+      float: left;
+      margin-left: 20px;
+      font-family: consolas;
+      a {
+        color: #555;
+        display: inline-block;
+        height: 100%;
+        line-height: 64px;
+        color: #555;
+      }
+      a:hover {
+        color: #000;
+        text-decoration: underline;
+      }
+      .icon {
+        margin-right: 4px;
+        vertical-align: middle;
+        transition: none;
+      }
+    }
+  }
 }
 
-.topheader ul li .icon {
-  margin-right: 4px;
-  vertical-align: middle;
-  transition: none;
-}
 // ======== Input =======
 textarea {
   width: 100%;
@@ -156,6 +150,7 @@ textarea {
   z-index: 2;
   font-size: 15px;
 }
+
 // ======== Output =======
 #output {
   position: absolute;
@@ -178,7 +173,28 @@ textarea {
     max-width: 100%;
     -webkit-overflow-scrolling: touch;
   }
+  strong {
+    color: #3e3e3e;
+  }
+  pre.linenums {
+    border-radius: .5em;
+  }
+  ol.linenums li {
+    padding-left: 0;
+    list-style-type: none;
+    span {
+      white-space: pre;
+    }
+    code {
+      white-space: inherit;
+    }
+  }
+  code.prettyprint.code-in-text span {
+    font-weight: 500;
+    color: #ff3502;
+  }
 }
+
 // ======== Plugins =======
 .github-star {
   position: relative;