feat: code optimisation

代码优化

assets/scripts/editor.js

@@ -24,7 +24,7 @@ let app = new Vue({
       sizeOption: [
         { label: '13px', value: '13px', desc: '稍小' },
         { label: '14px', value: '14px', desc: '推荐' },
-        { label: '15px', value: '15px', desc: '稍大' },
+        { label: '15px', value: '15px', desc: '稍大' }
       ],
       colorOption: [
         { label: '橘红', value: 'rgba(255, 95, 46, 0.9)', hex: '#FF5F2E' },
@@ -47,7 +47,7 @@ let app = new Vue({
         lineWrapping: true,
         styleActiveLine: true,
         theme: this.currentEditorTheme,
-        mode: 'text/x-markdown',
+        mode: 'text/x-markdown'
       }
     );
     this.editor.on("change", (cm, change) => {
@@ -65,9 +65,9 @@ let app = new Vue({
     } else {
       axios({
         method: 'get',
-        url: './assets/default-content.md',
+        url: './assets/default-content.md'
       }).then(resp => {
-        this.editor.setValue(resp.data)
+        this.editor.setValue(resp.data);
       })
     }
   },
@@ -82,33 +82,33 @@ let app = new Vue({
         // 附加的一些 style
         output += this.wxRenderer.buildAddition();
       }
-      return output
+      return output;
     },
     editorThemeChanged(editorTheme) {
-      this.editor.setOption('theme', editorTheme)
+      this.editor.setOption('theme', editorTheme);
     },
     fontChanged(fonts) {
       this.wxRenderer.setOptions({
         fonts: fonts
       });
-      this.refresh()
+      this.refresh();
     },
     sizeChanged(size) {
       this.wxRenderer.setOptions({
         size: size
       });
-      this.refresh()
+      this.refresh();
     },
     colorChanged(color) {
       let theme = setColor(color)
       this.wxRenderer.setOptions({
         theme: theme
-      })
+      });
-      this.refresh()
+      this.refresh();
     },
     // 刷新右侧预览
     refresh() {
-      this.output = this.renderWeChat(this.editor.getValue(0))
+      this.output = this.renderWeChat(this.editor.getValue(0));
     },
     // 将左侧编辑器内容保存到 LocalStorage
     saveEditorContent() {
@@ -156,7 +156,7 @@ let app = new Vue({
         });
       }
     },
-    openWindow(url) {
+    visit(url) {
       window.open(url);
     }
   },

assets/scripts/renderers/wx-renderer.js

@@ -7,7 +7,7 @@ let WxRenderer = function (opts) {
   let footnoteIndex = 0;
   let styleMapping = null;
 
-  let CODE_FONT_FAMILY = "Menlo, Operator Mono, Consolas, Monaco, monospace";
+  const CODE_FONT_FAMILY = "Menlo, Operator Mono, Consolas, Monaco, monospace";
 
   let merge = (base, extend) => Object.assign({}, base, extend);
 
@@ -25,7 +25,7 @@ let WxRenderer = function (opts) {
           style['font-family'] = CODE_FONT_FAMILY;
           style['white-space'] = 'normal';
         }
-        mapping[ele] = merge(base, style)
+        mapping[ele] = merge(base, style);
       }
     }
 
@@ -33,12 +33,12 @@ let WxRenderer = function (opts) {
       if (themeTpl.block.hasOwnProperty(ele)) {
         let style = themeTpl.block[ele];
         if (ele === 'code') {
-          style['font-family'] = CODE_FONT_FAMILY
+          style['font-family'] = CODE_FONT_FAMILY;
         }
-        mapping[ele] = merge(base_block, style)
+        mapping[ele] = merge(base_block, style);
       }
     }
-    return mapping
+    return mapping;
   };
 
   let getStyles = (tokenName, addition) => {
@@ -46,9 +46,9 @@ let WxRenderer = function (opts) {
     let dict = styleMapping[tokenName];
     if (!dict) return '';
     for (const key in dict) {
-      arr.push(key + ':' + dict[key])
+      arr.push(key + ':' + dict[key]);
     }
-    return `style="${arr.join(';') + (addition || '')}"`
+    return `style="${arr.join(';') + (addition || '')}"`;
   };
 
   let addFootnote = (title, link) => {
@@ -59,11 +59,11 @@ let WxRenderer = function (opts) {
   this.buildFootnotes = () => {
     let footnoteArray = footnotes.map(x => {
       if (x[1] === x[2]) {
-        return `<code style="font-size: 90%; opacity: 0.6;">[${x[0]}]</code>: <i>${x[1]}</i><br/>`
+        return `<code style="font-size: 90%; opacity: 0.6;">[${x[0]}]</code>: <i>${x[1]}</i><br/>`;
       }
-      return `<code style="font-size: 90%; opacity: 0.6;">[${x[0]}]</code> ${x[1]}: <i>${x[2]}</i><br/>`
+      return `<code style="font-size: 90%; opacity: 0.6;">[${x[0]}]</code> ${x[1]}: <i>${x[2]}</i><br/>`;
     });
-    return `<h4 ${getStyles('h4')}>引用链接</h4><p ${getStyles('footnotes')}>${footnoteArray.join('\n')}</p>`
+    return `<h4 ${getStyles('h4')}>引用链接</h4><p ${getStyles('footnotes')}>${footnoteArray.join('\n')}</p>`;
   };
 
   this.buildAddition = () => {
@@ -87,7 +87,7 @@ let WxRenderer = function (opts) {
   }
 
   this.setOptions = newOpts => {
-    this.opts = merge(this.opts, newOpts)
+    this.opts = merge(this.opts, newOpts);
   };
 
   this.hasFootnotes = () => footnotes.length !== 0;
@@ -116,7 +116,7 @@ let WxRenderer = function (opts) {
 
     renderer.blockquote = text => {
       text = text.replace(/<p.*?>/, `<p ${getStyles('blockquote_p')}>`);
-      return `<blockquote ${getStyles('blockquote')}>${text}</blockquote>`
+      return `<blockquote ${getStyles('blockquote')}>${text}</blockquote>`;
     };
     renderer.code = (text, infoString) => {
       text = text.replace(/</g, "&lt;");
@@ -129,7 +129,7 @@ let WxRenderer = function (opts) {
       for (let i = 0; i < lines.length; i++) {
         const line = lines[i];
         codeLines.push(`<code class="prettyprint"><span class="code-snippet_outer">${(line || '<br>')}</span></code>`);
-        numbers.push('<li></li>')
+        numbers.push('<li></li>');
       }
       let lang = infoString || '';
 
@@ -161,11 +161,11 @@ let WxRenderer = function (opts) {
     renderer.image = (href, title, text) => {
       let subText = '';
       if (text) {
-        subText = `<figcaption ${getStyles('figcaption')}>${text}</figcaption>`
+        subText = `<figcaption ${getStyles('figcaption')}>${text}</figcaption>`;
       }
       let figureStyles = getStyles('figure');
       let imgStyles = getStyles(ENV_STRETCH_IMAGE ? 'image' : 'image_org');
-      return `<figure ${figureStyles}><img ${imgStyles} src="${href}" title="${title}" alt="${text}"/>${subText}</figure>`
+      return `<figure ${figureStyles}><img ${imgStyles} src="${href}" title="${title}" alt="${text}"/>${subText}</figure>`;
     };
     renderer.link = (href, title, text) => {
       if (href.indexOf('https://mp.weixin.qq.com') === 0) {
@@ -187,6 +187,6 @@ let WxRenderer = function (opts) {
     renderer.tablecell = (text, flags) => `<td ${getStyles('td')}>${text}</td>`;
     renderer.hr = () => `<hr style="border-style: solid;border-width: 1px 0 0;border-color: rgba(0,0,0,0.1);-webkit-transform-origin: 0 0;-webkit-transform: scale(1, 0.5);transform-origin: 0 0;transform: scale(1, 0.5);">`;
 
-    return renderer
+    return renderer;
   }
 };

assets/scripts/themes/default-theme.js

@@ -65,6 +65,7 @@ let default_theme = {
             'background': 'rgba(27,31,35,.05)',
             'margin': '2em 8px'
         },
+
         blockquote_p: {
             'letter-spacing': '0.1em',
             'color': 'rgb(80, 80, 80)',
@@ -72,6 +73,7 @@ let default_theme = {
             'font-size': '1em',
             'display': 'inline',
         },
+
         code: {
             'font-size': '80%',
             'overflow': 'auto',
@@ -83,29 +85,35 @@ let default_theme = {
             'border': '1px solid rgb(236,236,236)',
             'margin': '20px 0',
         },
+
         image: {
             'border-radius': '4px',
             'display': 'block',
             'margin': '0.1em auto 0.5em',
             'width': '100% !important',
         },
+
         image_org: {
             'border-radius': '4px',
             'display': 'block'
         },
+
         ol: {
             'margin-left': '0',
             'padding-left': '1em'
         },
+
         ul: {
             'margin-left': '0',
             'padding-left': '1em',
             'list-style': 'circle'
         },
+
         footnotes: {
             'margin': '0.5em 8px',
             'font-size': '80%'
         },
+
         figure: {
             'margin': '1.5em 8px',
         }
@@ -116,6 +124,7 @@ let default_theme = {
             'display': 'block',
             'margin': '0.2em 8px'
         },
+
         codespan: {
             'font-size': '90%',
             'color': '#d14',
@@ -123,9 +132,11 @@ let default_theme = {
             'padding': '3px 5px',
             'border-radius': '4px',
         },
+
         link: {
             'color': '#576b95'
         },
+
         wx_link: {
             'color': '#576b95',
             'text-decoration': 'none',
@@ -136,22 +147,27 @@ let default_theme = {
             'color': 'rgba(255, 95, 46, 0.9)',
             'font-weight': 'bold',
         },
+
         table: {
             'border-collapse': 'collapse',
             'text-align': 'center',
             'margin': '1em 8px'
         },
+
         thead: {
             'background': 'rgba(0, 0, 0, 0.05)'
         },
+
         td: {
             'font-size': '80%',
             'border': '1px solid #dfdfdf',
             'padding': '0.25em 0.5em'
         },
+
         footnote: {
             'font-size': '12px'
         },
+        
         figcaption: {
             'text-align': 'center',
             'color': '#888',

index.html

@@ -3,8 +3,10 @@
 
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta name="keywords" content="md,markdown,markdown-editor,wechat,official-account,yanglbme,cseye">
+  <meta name="description" content="Wechat Markdown Editor | 一款高度简洁的微信 Markdown 编辑器">
+  <meta name="viewport" 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="assets/images/favicon.png">
   <link rel="apple-touch-icon-precomposed" href="assets/images/favicon.png">
@@ -88,16 +90,16 @@
     </el-container>
     <el-dialog title="关于" :visible.sync="aboutDialogVisible" width="30%" center>
       <div style="text-align: center;">
-        <h3>一款简洁美观的微信 Markdown 编辑器</h3>
+        <h3>一款高度简洁的微信 Markdown 编辑器</h3>
       </div>
       <div style="text-align: center;">
         <img src="assets/images/qrcode.jpg" style="max-width: 300px">
         <p>扫码关注我的公众号，原创技术文章第一时间推送！</p>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button type="success" plain @click="openWindow('https://github.com/cseye/md')">GitHub 仓库
+        <el-button type="success" plain @click="visit('https://github.com/cseye/md')">GitHub 仓库
         </el-button>
-        <el-button type="success" plain @click="openWindow('https://gitee.com/cseye/md')">Gitee 仓库
+        <el-button type="success" plain @click="visit('https://gitee.com/cseye/md')">Gitee 仓库
         </el-button>
       </span>
     </el-dialog>

libs/scripts/FuriganaMD.js

@@ -1,7 +1,7 @@
-// 注音功能来自于
+/**
-// https://github.com/amclees/furigana-markdown
+ * 注音功能来自于：https://github.com/amclees/furigana-markdown
-// 详见上述文档
+ * 详见上述文档
-
+ */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
     typeof define === 'function' && define.amd ? define(factory) :
@@ -9,7 +9,7 @@
 }(this, (function () {
   'use strict';
 
-// This function escapes special characters for use in a regex constructor.
+  // This function escapes special characters for use in a regex constructor.
   function escapeForRegex(string) {
     return string.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
   }