Merge branch 'master' of github.com:doocs/md

.eslintrc.js

@@ -16,8 +16,7 @@ module.exports = {
     parserOptions: {
         parser: 'babel-eslint'
     },
-  overrides: [
+    overrides: [{
-    {
         files: [
             '**/__tests__/*.{j,t}s?(x)',
             '**/tests/unit/**/*.spec.{j,t}s?(x)'
@@ -25,6 +24,5 @@ module.exports = {
         env: {
             jest: true
         }
-    }
+    }]
-  ]
 }

README.md

@@ -43,6 +43,9 @@ Markdown 文档自动即时渲染为微信图文，让你不再为微信文章
 - [x] 支持自定义 CSS 样式并实时渲染
 - [x] 支持一键恢复至默认内容及样式
 - [x] 支持打开或关闭引用链接的选项
+- [ ] 支持在编辑框右键弹出功能选项卡
+- [ ] 支持更加人性化的插入表格功能
+
 
 ![select-and-change-color-theme](https://imgkr.cn-bj.ufileos.com/32c05c23-6309-491f-bd0d-f22a62c944b4.gif)
 

public/assets/css/app.css

@@ -4,11 +4,18 @@
     padding: 0;
 }
 
-input, button, textarea {
+input,
+button,
+textarea {
     font-family: inherit;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     font-weight: normal;
 }
 
@@ -16,7 +23,8 @@ em {
     font-style: normal !important;
 }
 
-html, body {
+html,
+body {
     height: 100%;
     font-family: 'PingFang SC', BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
 }
@@ -112,6 +120,7 @@ section {
     display: table;
     width: 100% !important;
 }
+
 /* 
 .preview table tr:nth-child(even){
   background: rgb(250, 250, 250);
@@ -146,7 +155,8 @@ section {
 }
 
 /*wechat code block*/
-.rich_media_content .code-snippet *, .rich_media_content .code-snippet__fix * {
+.rich_media_content .code-snippet *,
+.rich_media_content .code-snippet__fix * {
     max-width: 1000% !important;
 }
 
@@ -156,7 +166,7 @@ section {
     margin: 10px 8px;
     color: #333;
     position: relative;
-  background-color: rgb(238,238,238);
+    background-color: rgb(238, 238, 238);
     border: 1px solid #f0f0f0;
     border-radius: 2px;
     display: flex;
@@ -228,7 +238,8 @@ section {
     outline: none;
 }
 
-.CodeMirror-scroll, .preview-wrapper {
+.CodeMirror-scroll,
+.preview-wrapper {
     overflow: unset;
     overflow-y: scroll;
 }

public/assets/css/style-mirror.css

@@ -14,91 +14,111 @@
     font-size: 16px;
     padding: 20px;
     line-height: 25px;
-  }
+}
-  .cm-s-style-mirror div.CodeMirror-selected {
+
+.cm-s-style-mirror div.CodeMirror-selected {
     background: #e0e0e0;
-  }
+}
-  .cm-s-style-mirror .CodeMirror-line::selection,
+
-  .cm-s-style-mirror .CodeMirror-line > span::selection,
+.cm-s-style-mirror .CodeMirror-line::selection,
-  .cm-s-style-mirror .CodeMirror-line > span > span::selection {
+.cm-s-style-mirror .CodeMirror-line>span::selection,
+.cm-s-style-mirror .CodeMirror-line>span>span::selection {
     background: #e0e0e0;
-  }
+}
-  .cm-s-style-mirror .CodeMirror-line::-moz-selection,
+
-  .cm-s-style-mirror .CodeMirror-line > span::-moz-selection,
+.cm-s-style-mirror .CodeMirror-line::-moz-selection,
-  .cm-s-style-mirror .CodeMirror-line > span > span::-moz-selection {
+.cm-s-style-mirror .CodeMirror-line>span::-moz-selection,
+.cm-s-style-mirror .CodeMirror-line>span>span::-moz-selection {
     background: #e0e0e0;
-  }
+}
-  .cm-s-style-mirror .CodeMirror-gutters {
+
+.cm-s-style-mirror .CodeMirror-gutters {
     background: #f5f5f5;
     border-right: 0px;
-  }
+}
-  .cm-s-style-mirror .CodeMirror-guttermarker {
+
+.cm-s-style-mirror .CodeMirror-guttermarker {
     color: #ac4142;
-  }
+}
-  .cm-s-style-mirror .CodeMirror-guttermarker-subtle {
+
+.cm-s-style-mirror .CodeMirror-guttermarker-subtle {
     color: #b0b0b0;
-  }
+}
-  .cm-s-style-mirror .CodeMirror-linenumber {
+
+.cm-s-style-mirror .CodeMirror-linenumber {
     color: #b0b0b0;
-  }
+}
-  .cm-s-style-mirror .CodeMirror-cursor {
+
+.cm-s-style-mirror .CodeMirror-cursor {
     border-left: 1px solid #505050;
-  }
+}
 
-  .cm-s-style-mirror span.cm-comment {
+.cm-s-style-mirror span.cm-comment {
-    color:green;
+    color: green;
-  }
+}
-  .cm-s-style-mirror span.cm-atom {
-    color: #aa759f;
-  }
-  .cm-s-style-mirror span.cm-number {
-    color: #aa759f;
-  }
 
-  .cm-s-style-mirror span.cm-property,
+.cm-s-style-mirror span.cm-atom {
-  .cm-s-style-mirror span.cm-attribute {
+    color: #aa759f;
+}
+
+.cm-s-style-mirror span.cm-number {
+    color: #aa759f;
+}
+
+.cm-s-style-mirror span.cm-property,
+.cm-s-style-mirror span.cm-attribute {
     color: #90a959;
-  }
+}
-  .cm-s-style-mirror span.cm-keyword {
+
+.cm-s-style-mirror span.cm-keyword {
     color: #023a52;
-  }
+}
-  .cm-s-style-mirror span.cm-string {
-    color: #e46918;
-  }
 
-  .cm-s-style-mirror span.cm-variable {
+.cm-s-style-mirror span.cm-string {
+    color: #e46918;
+}
+
+.cm-s-style-mirror span.cm-variable {
     color: #90a959;
-  }
+}
-  .cm-s-style-mirror span.cm-variable-2 {
+
+.cm-s-style-mirror span.cm-variable-2 {
     color: #00695f;
-  }
+}
-  .cm-s-style-mirror span.cm-variable-3 {
+
+.cm-s-style-mirror span.cm-variable-3 {
     color: #2e6e8a;
-  }
+}
-  .cm-s-style-mirror span.cm-def {
+
+.cm-s-style-mirror span.cm-def {
     color: #d28445;
-  }
+}
-  .cm-s-style-mirror span.cm-bracket {
+
+.cm-s-style-mirror span.cm-bracket {
     color: #202020;
-  }
+}
-  .cm-s-style-mirror span.cm-tag {
+
-    color:#000;
+.cm-s-style-mirror span.cm-tag {
-  }
+    color: #000;
-  .cm-s-style-mirror span.cm-link {
+}
+
+.cm-s-style-mirror span.cm-link {
     color: #b26a00;
-  }
+}
-  .cm-s-style-mirror span.cm-error {
+
+.cm-s-style-mirror span.cm-error {
     /* background: #ac4142;
     color: #f5f5f5; */
     text-decoration: underline;
     text-decoration-style: wavy;
     text-decoration-color: #df8d8e;
-  }
+}
-  .cm-s-style-mirror .CodeMirror-activeline-background {
-    background: #dddcdc;
-  }
-  .cm-s-style-mirror .CodeMirror-matchingbracket {
-    color: rgb(32,32,32) !important;
-    background-color: rgba(0,0,0,0.1) !important;
-  }
 
+.cm-s-style-mirror .CodeMirror-activeline-background {
+    background: #dddcdc;
+}
+
+.cm-s-style-mirror .CodeMirror-matchingbracket {
+    color: rgb(32, 32, 32) !important;
+    background-color: rgba(0, 0, 0, 0.1) !important;
+}

public/index.html

@@ -1,32 +1,4 @@
 <!DOCTYPE html>
-<!--
-                              _.._        ,------------.
-                           ,'      `.    ( 你终于发现我啦 )
-                          /  __) __` \    `-,----------'
-                         (  (`-`(-')  ) _.-'
-                         /)  \  = /  (
-                        /'    |--' .  \
-                       (  ,---|  `-.)__`
-                        )(  `-.,--'   _`-.
-                       '/,'          (  Uu",
-                        (_       ,    `/,-' )
-                        `.__,  : `-'/  /`--'
-                          |     `--'  |
-                          `   `-._   /
-                           \        (
-                           /\ .      \.  
-                          / |` \     ,-\
-                         /  \| .)   /   \
-                        ( ,'|\    ,'     :
-                        | \,`.`--"/      }
-                        `,'    \  |,'    /
-                       / "-._   `-/      |
-                       "-.   "-.,'|     ;
-                      /        _/["---'""]
-                     :        /  |"-     '
-                     '           |      /
-                                 `      |
--->
 <html lang="en">
 
 <head>
@@ -38,7 +10,8 @@
         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <title>微信 Markdown 编辑器</title>
     <link rel="shortcut icon" href="https://imgkr.cn-bj.ufileos.com/f3accc83-b854-4e99-afb5-8a6465e1d84f.png">
-  <link rel="apple-touch-icon-precomposed" href="https://imgkr.cn-bj.ufileos.com/f3accc83-b854-4e99-afb5-8a6465e1d84f.png">
+    <link rel="apple-touch-icon-precomposed"
+        href="https://imgkr.cn-bj.ufileos.com/f3accc83-b854-4e99-afb5-8a6465e1d84f.png">
     <link rel="stylesheet" href="assets/css/loading.css">
     <link rel="stylesheet" href="libs/css/index.css">
     <link rel="stylesheet" href="libs/css/code-themes/github-v2.min.css">
@@ -48,7 +21,7 @@
 </head>
 
 <body>
-  <div id="app" >
+    <div id="app">
     </div>
 </body>
 

public/libs/css/show-hint.css

@@ -7,9 +7,9 @@
     margin: 0;
     padding: 2px;
 
-  -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
+    -webkit-box-shadow: 2px 3px 5px rgba(0, 0, 0, .2);
-  -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
+    -moz-box-shadow: 2px 3px 5px rgba(0, 0, 0, .2);
-  box-shadow: 2px 3px 5px rgba(0,0,0,.2);
+    box-shadow: 2px 3px 5px rgba(0, 0, 0, .2);
     border-radius: 3px;
     border: 1px solid silver;
 

public/libs/css/style-mirror.css

@@ -14,91 +14,111 @@
     font-size: 16px;
     padding: 20px;
     line-height: 25px;
-  }
+}
-  .cm-s-style-mirror div.CodeMirror-selected {
+
+.cm-s-style-mirror div.CodeMirror-selected {
     background: #e0e0e0;
-  }
+}
-  .cm-s-style-mirror .CodeMirror-line::selection,
+
-  .cm-s-style-mirror .CodeMirror-line > span::selection,
+.cm-s-style-mirror .CodeMirror-line::selection,
-  .cm-s-style-mirror .CodeMirror-line > span > span::selection {
+.cm-s-style-mirror .CodeMirror-line>span::selection,
+.cm-s-style-mirror .CodeMirror-line>span>span::selection {
     background: #e0e0e0;
-  }
+}
-  .cm-s-style-mirror .CodeMirror-line::-moz-selection,
+
-  .cm-s-style-mirror .CodeMirror-line > span::-moz-selection,
+.cm-s-style-mirror .CodeMirror-line::-moz-selection,
-  .cm-s-style-mirror .CodeMirror-line > span > span::-moz-selection {
+.cm-s-style-mirror .CodeMirror-line>span::-moz-selection,
+.cm-s-style-mirror .CodeMirror-line>span>span::-moz-selection {
     background: #e0e0e0;
-  }
+}
-  .cm-s-style-mirror .CodeMirror-gutters {
+
+.cm-s-style-mirror .CodeMirror-gutters {
     background: #f5f5f5;
     border-right: 0px;
-  }
+}
-  .cm-s-style-mirror .CodeMirror-guttermarker {
+
+.cm-s-style-mirror .CodeMirror-guttermarker {
     color: #ac4142;
-  }
+}
-  .cm-s-style-mirror .CodeMirror-guttermarker-subtle {
+
+.cm-s-style-mirror .CodeMirror-guttermarker-subtle {
     color: #b0b0b0;
-  }
+}
-  .cm-s-style-mirror .CodeMirror-linenumber {
+
+.cm-s-style-mirror .CodeMirror-linenumber {
     color: #b0b0b0;
-  }
+}
-  .cm-s-style-mirror .CodeMirror-cursor {
+
+.cm-s-style-mirror .CodeMirror-cursor {
     border-left: 1px solid #505050;
-  }
+}
 
-  .cm-s-style-mirror span.cm-comment {
+.cm-s-style-mirror span.cm-comment {
-    color:green;
+    color: green;
-  }
+}
-  .cm-s-style-mirror span.cm-atom {
-    color: #aa759f;
-  }
-  .cm-s-style-mirror span.cm-number {
-    color: #aa759f;
-  }
 
-  .cm-s-style-mirror span.cm-property,
+.cm-s-style-mirror span.cm-atom {
-  .cm-s-style-mirror span.cm-attribute {
+    color: #aa759f;
+}
+
+.cm-s-style-mirror span.cm-number {
+    color: #aa759f;
+}
+
+.cm-s-style-mirror span.cm-property,
+.cm-s-style-mirror span.cm-attribute {
     color: #90a959;
-  }
+}
-  .cm-s-style-mirror span.cm-keyword {
+
+.cm-s-style-mirror span.cm-keyword {
     color: #023a52;
-  }
+}
-  .cm-s-style-mirror span.cm-string {
-    color: #e46918;
-  }
 
-  .cm-s-style-mirror span.cm-variable {
+.cm-s-style-mirror span.cm-string {
+    color: #e46918;
+}
+
+.cm-s-style-mirror span.cm-variable {
     color: #90a959;
-  }
+}
-  .cm-s-style-mirror span.cm-variable-2 {
+
+.cm-s-style-mirror span.cm-variable-2 {
     color: #00695f;
-  }
+}
-  .cm-s-style-mirror span.cm-variable-3 {
+
+.cm-s-style-mirror span.cm-variable-3 {
     color: #2e6e8a;
-  }
+}
-  .cm-s-style-mirror span.cm-def {
+
+.cm-s-style-mirror span.cm-def {
     color: #d28445;
-  }
+}
-  .cm-s-style-mirror span.cm-bracket {
+
+.cm-s-style-mirror span.cm-bracket {
     color: #202020;
-  }
+}
-  .cm-s-style-mirror span.cm-tag {
+
-    color:#000;
+.cm-s-style-mirror span.cm-tag {
-  }
+    color: #000;
-  .cm-s-style-mirror span.cm-link {
+}
+
+.cm-s-style-mirror span.cm-link {
     color: #b26a00;
-  }
+}
-  .cm-s-style-mirror span.cm-error {
+
+.cm-s-style-mirror span.cm-error {
     /* background: #ac4142;
     color: #f5f5f5; */
     text-decoration: underline;
     text-decoration-style: wavy;
     text-decoration-color: #df8d8e;
-  }
+}
-  .cm-s-style-mirror .CodeMirror-activeline-background {
-    background: #dddcdc;
-  }
-  .cm-s-style-mirror .CodeMirror-matchingbracket {
-    color: rgb(32,32,32) !important;
-    background-color: rgba(0,0,0,0.1) !important;
-  }
 
+.cm-s-style-mirror .CodeMirror-activeline-background {
+    background: #dddcdc;
+}
+
+.cm-s-style-mirror .CodeMirror-matchingbracket {
+    color: rgb(32, 32, 32) !important;
+    background-color: rgba(0, 0, 0, 0.1) !important;
+}

src/App.vue

@@ -21,9 +21,6 @@ export default {
         setTimeout(() => {
             this.loading = false
         }, 200)
-        window.console &&
-            window.console.log &&
-            (console.log("Think big, train fast, learn deep. See https://github.com/yanglbme"))
     }
 }
 

src/api/fetch.js

@@ -20,11 +20,7 @@ service.interceptors.request.use(
 );
 
 service.interceptors.response.use(res => {
-    if (res.data.success) {
+    return res.data.success ? res.data : Promise.reject(res.data);
-        return res.data;
-    }
-    console.log(res);
-    return Promise.reject(res.data);
 }, error => Promise.reject(error));
 
 export default service;

src/components/Loading.vue

@@ -8,9 +8,10 @@
 </template>
 
 <script>
-export default {
+    export default {
+
+    }
 
-}
 </script>
 
 <style scoped>

src/scripts/closebrackets.js

@@ -1,7 +1,7 @@
 // CodeMirror, copyright (c) by Marijn Haverbeke and others
 // Distributed under an MIT license: https://codemirror.net/LICENSE
 import CodeMirror from "codemirror/lib/codemirror";
-(function(CodeMirror) {
+(function (CodeMirror) {
     var defaults = {
         pairs: "()[]{}''\"\"",
         closeBefore: ")]}'\":;>",
@@ -11,7 +11,7 @@ import CodeMirror from "codemirror/lib/codemirror";
 
     var Pos = CodeMirror.Pos;
 
-  CodeMirror.defineOption("autoCloseBrackets", false, function(cm, val, old) {
+    CodeMirror.defineOption("autoCloseBrackets", false, function (cm, val, old) {
         if (old && old != CodeMirror.Init) {
             cm.removeKeyMap(keyMap);
             cm.state.closeBrackets = null;
@@ -29,7 +29,11 @@ import CodeMirror from "codemirror/lib/codemirror";
         return defaults[name];
     }
 
-  var keyMap = { Backspace: handleBackspace, Enter: handleEnter };
+    var keyMap = {
+        Backspace: handleBackspace,
+        Enter: handleEnter
+    };
+
     function ensureBound(chars) {
         for (var i = 0; i < chars.length; i++) {
             var ch = chars.charAt(i),
@@ -40,7 +44,7 @@ import CodeMirror from "codemirror/lib/codemirror";
     ensureBound(defaults.pairs + "`");
 
     function handler(ch) {
-    return function(cm) {
+        return function (cm) {
             return handleChar(cm, ch);
         };
     }
@@ -85,7 +89,7 @@ import CodeMirror from "codemirror/lib/codemirror";
             var around = charsAround(cm, ranges[i].head);
             if (!around || explode.indexOf(around) % 2 != 0) return CodeMirror.Pass;
         }
-    cm.operation(function() {
+        cm.operation(function () {
             var linesep = cm.lineSeparator() || "\n";
             cm.replaceSelection(linesep + linesep, null);
             cm.execCommand("goCharLeft");
@@ -174,7 +178,7 @@ import CodeMirror from "codemirror/lib/codemirror";
 
         var left = pos % 2 ? pairs.charAt(pos - 1) : ch;
         var right = pos % 2 ? ch : pairs.charAt(pos + 1);
-    cm.operation(function() {
+        cm.operation(function () {
             if (type == "skip") {
                 cm.execCommand("goCharRight");
             } else if (type == "skipThree") {

src/scripts/config.js

@@ -1,6 +1,5 @@
 export default {
-    builtinFonts: [
+    builtinFonts: [{
-        {
             label: '无衬线',
             value: '-apple-system-font,BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB , Microsoft YaHei UI , Microsoft YaHei ,Arial,sans-serif'
         },
@@ -9,8 +8,7 @@ export default {
             value: "Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif"
         }
     ],
-    sizeOption: [
+    sizeOption: [{
-        {
             label: '12px',
             value: '12px',
             desc: '更小'
@@ -36,8 +34,7 @@ export default {
             desc: '更大'
         }
     ],
-    colorOption: [
+    colorOption: [{
-        {
             label: '经典蓝',
             value: 'rgba(15, 76, 129, 1)',
             hex: '最新流行'

src/scripts/converter.js

@@ -18,8 +18,7 @@ export function solveHtml(nightMode = false) {
     let html = element.innerHTML
     let res = "";
     res = juice.inlineContent(
-    html,
+        html, {
-    {
             inlinePseudoElements: true,
             preserveImportant: true
         }

src/scripts/format.js

@@ -10,13 +10,16 @@ import CodeMirror from "codemirror/lib/codemirror";
 
     // Comment/uncomment the specified range
     CodeMirror.defineExtension('commentRange', function (isComment, from, to) {
-    var cm = this; var curMode = CodeMirror.innerMode(cm.getMode(), cm.getTokenAt(from).state).mode
+        var cm = this;
+        var curMode = CodeMirror.innerMode(cm.getMode(), cm.getTokenAt(from).state).mode
         cm.operation(function () {
             if (isComment) { // Comment range
                 cm.replaceRange(curMode.commentEnd, to)
                 cm.replaceRange(curMode.commentStart, from)
                 if (from.line == to.line && from.ch == to.ch) // An empty comment inserted - put cursor inside
-        { cm.setCursor(from.line, from.ch + curMode.commentStart.length) }
+                {
+                    cm.setCursor(from.line, from.ch + curMode.commentStart.length)
+                }
             } else { // Uncomment range
                 var selText = cm.getRange(from, to)
                 var startIndex = selText.indexOf(curMode.commentStart)
@@ -47,12 +50,16 @@ import CodeMirror from "codemirror/lib/codemirror";
     // Applies automatic formatting to the specified range
     CodeMirror.defineExtension('autoFormatRange', function (from, to) {
         var cm = this
-    var outer = cm.getMode(); var text = cm.getRange(from, to).split('\n')
+        var outer = cm.getMode();
+        var text = cm.getRange(from, to).split('\n')
         var state = CodeMirror.copyState(outer, cm.getTokenAt(from).state)
         var tabSize = cm.getOption('tabSize')
 
-    var out = ''; var lines = 0; var atSol = from.ch == 0
+        var out = '';
-    function newline () {
+        var lines = 0;
+        var atSol = from.ch == 0
+
+        function newline() {
             out += '\n'
             atSol = true
                 ++lines
@@ -62,14 +69,17 @@ import CodeMirror from "codemirror/lib/codemirror";
             var stream = new CodeMirror.StringStream(text[i], tabSize)
             while (!stream.eol()) {
                 var inner = CodeMirror.innerMode(outer, state)
-        var style = outer.token(stream, state); var cur = stream.current()
+                var style = outer.token(stream, state);
+                var cur = stream.current()
                 stream.start = stream.pos
                 if (!atSol || /\S/.test(cur)) {
                     out += cur
                     atSol = false
                 }
                 if (!atSol && inner.mode.newlineAfterToken &&
-              inner.mode.newlineAfterToken(style, cur, stream.string.slice(stream.pos) || text[i + 1] || '', inner.state)) { newline() }
+                    inner.mode.newlineAfterToken(style, cur, stream.string.slice(stream.pos) || text[i + 1] || '', inner.state)) {
+                    newline()
+                }
             }
             if (!stream.pos && outer.blankLine) outer.blankLine(state)
             if (!atSol) newline()
@@ -77,7 +87,9 @@ import CodeMirror from "codemirror/lib/codemirror";
 
         cm.operation(function () {
             cm.replaceRange(out, from, to)
-      for (var cur = from.line + 1, end = from.line + lines; cur <= end; ++cur) { cm.indentLine(cur, 'smart') }
+            for (var cur = from.line + 1, end = from.line + lines; cur <= end; ++cur) {
+                cm.indentLine(cur, 'smart')
+            }
             cm.setSelection(from, cm.getCursor(false))
         })
     })

src/scripts/util.js

@@ -4,7 +4,7 @@ import prettierMarkdown from 'prettier/parser-markdown'
 
 
 // 设置自定义颜色
-export function setColorWithTemplate (template) {
+export function setColorWithTemplate(template) {
     return function (color) {
         let custom_theme = JSON.parse(JSON.stringify(template))
         custom_theme.block.h1['border-bottom'] = `2px solid ${color}`
@@ -16,7 +16,7 @@ export function setColorWithTemplate (template) {
     }
 }
 
-export const setColorWithCustomTemplate = function setColorWithCustomTemplate (
+export const setColorWithCustomTemplate = function setColorWithCustomTemplate(
     template,
     color
 ) {
@@ -30,7 +30,7 @@ export const setColorWithCustomTemplate = function setColorWithCustomTemplate (
 }
 
 // 设置自定义字体大小
-export function setFontSizeWithTemplate (template) {
+export function setFontSizeWithTemplate(template) {
     return function (fontSize) {
         let custom_theme = JSON.parse(JSON.stringify(template))
         custom_theme.block.h1['font-size'] = `${fontSize * 1.14}px`
@@ -44,7 +44,7 @@ export function setFontSizeWithTemplate (template) {
 export const setColor = setColorWithTemplate(default_theme)
 export const setFontSize = setFontSizeWithTemplate(default_theme)
 
-export function customCssWithTemplate (jsonString, color, theme) {
+export function customCssWithTemplate(jsonString, color, theme) {
     let custom_theme = JSON.parse(JSON.stringify(theme))
     // block
     custom_theme.block.h1['border-bottom'] = `2px solid ${color}`
@@ -97,8 +97,9 @@ export function customCssWithTemplate (jsonString, color, theme) {
  *
  * @param {css字符串} css
  */
-export function css2json (css) {
+export function css2json(css) {
     // 移除CSS所有注释
+    let open, close;
     while (
         (open = css.indexOf('/*')) !== -1 &&
         (close = css.indexOf('*/')) !== -1
@@ -120,7 +121,7 @@ export function css2json (css) {
         // `{"font": "'Times New Roman' 1em", "color": "#ff0000", "margin-top": "1em"}`
 
         // 辅助方法：将array转为object
-    function toObject (array) {
+        function toObject(array) {
             let ret = {}
             array.forEach(e => {
                 const index = e.indexOf(':')

src/view/CodemirrorEditor.vue

@@ -14,7 +14,7 @@
                 />
             </el-header>
             <el-main class="main-body">
-                <el-row :gutter="10" class="main-section">
+                <el-row class="main-section">
                     <el-col :span="12">
                         <textarea id="editor" type="textarea" placeholder="Your markdown text here." v-model="source">
                         </textarea>