feat: add default-theme

添加默认主题，色盘颜色自动渲染至文章

README_CN.md

@@ -14,33 +14,11 @@
 ## 为什么要二次改造？
 每个人的审美都不一样，我希望能在基础 CSS 样式的基础上进行改造，定义一款自己喜欢的微信 Markdown 编辑器。
 
-## 如何扩展样式？
+## 功能特性
-- 首先在 [`assets/scripts/themes/`](assets/scripts/themes/) 文件夹下添加一个 js 文件作为扩展的主题样式，如 `pink.js`，内容的格式与其他主题保持一致，let 变量命名为 `pinkTheme`。
+- [x] 支持所有基础 Markdown 语法
-- 然后在 [`assets/scripts/editor.js`](assets/scripts/editor.js) 中，找到变量 [`themeOption`](assets/scripts/editor.js#L29)，添加一个选项（建议将 author 设置为色值的十六进制），如：
+- [x] 支持单独进行字体、字号设置
-  ```javascript
+- [x] 支持色盘取色，并一键替换颜色
-  themeOption: [
+- [x] 支持链接微信图文，外链自动转换为索引并在文末引用
-    { label: '橘红', value: 'orange', author: '#ff5f2e' },
-    { label: '淡绿', value: 'lightgreen', author: '#42b983'},
-    { label: '暗青', value: 'darkcyan', author: '#008b8b'},
-    { label: '粉色', value: 'pink', author: '#ff1cae'},
-  ],
-  ```
-  接着在下方的 [`styleThemes`](assets/scripts/editor.js#L34) 中添加 一个 pink 主题，如：
-  ```javascript
-  styleThemes: {
-    orange: orangeTheme,
-    lightgreen: lightgreenTheme,
-    darkcyan: darkcyanTheme,
-    pink: pinkTheme,
-  },
-  ```
-- 最后在 [`index.html`](index.html#L131) 文件末尾引入 pink.js 文件，如：
-  ```javascript
-  <script src="assets/scripts/themes/orange.js"></script>
-  <script src="assets/scripts/themes/lightgreen.js"></script>
-  <script src="assets/scripts/themes/darkcyan.js"></script>
-  <script src="assets/scripts/themes/pink.js"></script>
-  ```
 
 ## 我的公众号
 可以用微信扫码关注我的公众号“Doocs开源社区”，原创技术文章第一时间推送。

assets/css/app.css

@@ -214,4 +214,13 @@ section {
 
 ::-webkit-scrollbar-thumb:hover {
   background-color: rgba(144, 146, 152, 0.5);
+}
+
+.CodeMirror-vscrollbar:focus {
+    outline: none;
+}
+
+.CodeMirror-scroll, .preview-wrapper {
+    overflow: unset!important;
+    overflow-y: scroll!important;
 }

assets/scripts/editor.js

@@ -26,26 +26,17 @@ let app = new Vue({
         { label: '15px', value: '15px', desc: '正常' },
         { label: '16px', value: '16px', desc: '稍大' },
       ],
-      themeOption: [
-        { label: '橘红', value: 'orange', author: '#FF5F2E' },
-        { label: '淡绿', value: 'lightgreen', author: '#42B983'},
-        { label: '暗青', value: 'darkcyan', author: '#008B8B'}
-      ],
       colorOption: [
-        { label: '淡绿', value: 'rgba(66, 185, 131, 0.9)' },
+        { label: '橘红', value: '#FF5F2EE6', author: '#FF5F2E' },
+        { label: '淡绿', value: 'rgba(66, 185, 131, 0.9)', author: '#42B983'},
+        { label: '暗青', value: '#008B8BE6', author: '#008B8B'}
       ],
-      styleThemes: {
-        orange: orangeTheme,
-        lightgreen: lightgreenTheme,
-        darkcyan: darkcyanTheme
-      },
       aboutDialogVisible: false
     };
     d.currentEditorTheme = d.editorThemes[0].value;
     d.currentFont = d.builtinFonts[0].value;
     d.currentSize = d.sizeOption[0].value;
-    d.currentTheme = d.themeOption[1].value;
+    d.currentColor = d.colorOption[1].value;
-    d.currentColor = d.colorOption[0].value;
     return d;
   },
   mounted() {
@@ -65,7 +56,7 @@ let app = new Vue({
       self.saveEditorContent();
     });
     this.wxRenderer = new WxRenderer({
-      theme: this.styleThemes.lightgreen,
+      theme: setColor(this.currentColor),
       fonts: this.currentFont,
       size: this.currentSize
     });
@@ -109,15 +100,12 @@ let app = new Vue({
       });
       this.refresh()
     },
-    themeChanged: function (themeName) {
-      let themeObject = this.styleThemes[themeName];
-      this.wxRenderer.setOptions({
-        theme: themeObject
-      });
-      this.refresh()
-    },
     colorChanged: function (color) {
-      // TODO
+      let theme = setColor(color)
+      this.wxRenderer.setOptions({
+        theme: theme
+      })
+      this.refresh()
     },
     // 刷新右侧预览
     refresh: function () {

assets/scripts/themes/darkcyan.js

@@ -1,147 +0,0 @@
-let darkcyanTheme = {
-  BASE: {
-    'text-align': 'left',
-    'color': '#3f3f3f',
-    'line-height': '1.75',
-  },
-  BASE_BLOCK: {
-    'margin': '1em 8px'
-  },
-  block: {
-    h1: {
-      'font-size': '1.2em',
-      'text-align': 'center',
-      'font-weight': 'bold',
-      'display': 'table',
-      'margin': '2em auto 1em',
-      'padding': '0 1em',
-      'border-bottom': '2px solid rgba(0, 139, 139, 0.9)'
-    },
-    h2: {
-      'font-size': '1.1em',
-      'text-align': 'center',
-      'font-weight': 'bold',
-      'display': 'table',
-      'margin': '4em auto 2em',
-      'padding': '0 0.2em',
-      'background': 'rgba(0, 139, 139, 0.9)',
-      'color': '#fff'
-    },
-    h3: {
-      'font-weight': 'bold',
-      'font-size': '1.1em',
-      'margin': '2em 8px 0.75em 0',
-      'line-height': '1.2',
-      'padding-left': '8px',
-      'border-left': '3px solid rgba(0, 139, 139, 0.9)'
-    },
-    h4: {
-      'font-weight': 'bold',
-      'font-size': '1em',
-      'margin': '2em 8px 0.5em',
-    },
-    p: {
-      'margin': '1.5em 8px',
-      'letter-spacing': '0.1em'
-    },
-    blockquote: {
-      'font-style': 'normal',
-      'border-left': 'none',
-      'padding': '1em',
-      'border-radius': '4px',
-      'color': '#FEEEED',
-      'background': 'rgba(27,31,35,.05)',
-      'margin': '2em 8px'
-    },
-    blockquote_p: {
-      'letter-spacing': '0.1em',
-      'color': 'rgb(80, 80, 80)',
-      'font-family': 'PingFangSC-light, PingFangTC-light, Open Sans, Helvetica Neue, sans-serif',
-      'font-size': '1em',
-      'display': 'inline',
-    },
-    code: {
-      'font-size': '80%',
-      'overflow': 'auto',
-      'color': '#333',
-      'background': 'rgb(247, 247, 247)',
-      'border-radius': '2px',
-      'padding': '10px',
-      'line-height': '1.5',
-      'border': '1px solid rgb(236,236,236)',
-      'margin': '20px 0',
-    },
-    image: {
-      'border-radius': '4px',
-      'display': 'block',
-      'margin': '0.5em auto',
-      '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',
-    }
-  },
-  inline: {
-    listitem: {
-      'text-indent': '-1em',
-      'display': 'block',
-      'margin': '0.5em 8px'
-    },
-    codespan: {
-      'font-size': '90%',
-      'color': '#d14',
-      'background': 'rgba(27,31,35,.05)',
-      'padding': '3px 5px',
-      'border-radius': '4px',
-    },
-    link: {
-      'color': '#576b95'
-    },
-    wx_link: {
-      'color': '#576b95',
-      'text-decoration': 'none',
-    },
-    strong: {
-      'color': 'rgba(0, 139, 139, 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',
-      'font-size': '0.8em'
-    }
-  }
-};

assets/scripts/themes/default-theme.js

@@ -0,0 +1,148 @@
+let default_theme = {
+    BASE: {
+        'text-align': 'left',
+        'color': '#3f3f3f',
+        'line-height': '1.75',
+    },
+    BASE_BLOCK: {
+        'margin': '1em 8px'
+    },
+    block: {
+        h1: {
+            'font-size': '1.2em',
+            'text-align': 'center',
+            'font-weight': 'bold',
+            'display': 'table',
+            'margin': '2em auto 1em',
+            'padding': '0 1em',
+            'border-bottom': '2px solid rgba(255, 95, 46, 0.9)'
+        },
+        h2: {
+            'font-size': '1.1em',
+            'text-align': 'center',
+            'font-weight': 'bold',
+            'display': 'table',
+            'margin': '4em auto 2em',
+            'padding': '0 0.2em',
+            'background': 'rgba(255, 95, 46, 0.9)',
+            'color': '#fff'
+        },
+        h3: {
+            'font-weight': 'bold',
+            'font-size': '1.1em',
+            'margin': '2em 8px 0.75em 0',
+            'line-height': '1.2',
+            'padding-left': '8px',
+            'border-left': '3px solid rgba(255, 95, 46, 0.9)'
+        },
+        h4: {
+            'font-weight': 'bold',
+            'font-size': '1em',
+            'margin': '2em 8px 0.5em',
+        },
+        p: {
+            'margin': '1.5em 8px',
+            'letter-spacing': '0.1em'
+        },
+        blockquote: {
+            'font-style': 'normal',
+            'border-left': 'none',
+            'padding': '1em',
+            'border-radius': '4px',
+            'color': '#FEEEED',
+            'background': 'rgba(27,31,35,.05)',
+            'margin': '2em 8px'
+        },
+        blockquote_p: {
+            'letter-spacing': '0.1em',
+            'color': 'rgb(80, 80, 80)',
+            'font-family': 'PingFangSC-light, PingFangTC-light, Open Sans, Helvetica Neue, sans-serif',
+            'font-size': '1em',
+            'display': 'inline',
+        },
+        code: {
+            'font-size': '80%',
+            'overflow': 'auto',
+            'color': '#333',
+            'background': 'rgb(247, 247, 247)',
+            'border-radius': '2px',
+            'padding': '10px',
+            'line-height': '1.5',
+            'border': '1px solid rgb(236,236,236)',
+            'margin': '20px 0',
+        },
+        image: {
+            'border-radius': '4px',
+            'display': 'block',
+            'margin': '0.5em auto',
+            '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',
+        }
+    },
+    inline: {
+        listitem: {
+            'text-indent': '-1em',
+            'display': 'block',
+            'margin': '0.5em 8px'
+        },
+        codespan: {
+            'font-size': '90%',
+            'color': '#d14',
+            'background': 'rgba(27,31,35,.05)',
+            'padding': '3px 5px',
+            'border-radius': '4px',
+        },
+        link: {
+            'color': '#576b95'
+        },
+        wx_link: {
+            'color': '#576b95',
+            'text-decoration': 'none',
+        },
+        strong: {
+            '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',
+            'font-size': '0.8em'
+        }
+    }
+};
+

assets/scripts/themes/lightgreen.js

@@ -1,147 +0,0 @@
-let lightgreenTheme = {
-  BASE: {
-    'text-align': 'left',
-    'color': '#3f3f3f',
-    'line-height': '1.75',
-  },
-  BASE_BLOCK: {
-    'margin': '1em 8px'
-  },
-  block: {
-    h1: {
-      'font-size': '1.2em',
-      'text-align': 'center',
-      'font-weight': 'bold',
-      'display': 'table',
-      'margin': '2em auto 1em',
-      'padding': '0 1em',
-      'border-bottom': '2px solid rgba(66, 185, 131, 0.9)'
-    },
-    h2: {
-      'font-size': '1.1em',
-      'text-align': 'center',
-      'font-weight': 'bold',
-      'display': 'table',
-      'margin': '4em auto 2em',
-      'padding': '0 0.2em',
-      'background': 'rgba(66, 185, 131, 0.9)',
-      'color': '#fff'
-    },
-    h3: {
-      'font-weight': 'bold',
-      'font-size': '1.1em',
-      'margin': '2em 8px 0.75em 0',
-      'line-height': '1.2',
-      'padding-left': '8px',
-      'border-left': '3px solid rgba(66, 185, 131, 0.9)'
-    },
-    h4: {
-      'font-weight': 'bold',
-      'font-size': '1em',
-      'margin': '2em 8px 0.5em',
-    },
-    p: {
-      'margin': '1.5em 8px',
-      'letter-spacing': '0.1em'
-    },
-    blockquote: {
-      'font-style': 'normal',
-      'border-left': 'none',
-      'padding': '1em',
-      'border-radius': '4px',
-      'color': '#FEEEED',
-      'background': 'rgba(27,31,35,.05)',
-      'margin': '2em 8px'
-    },
-    blockquote_p: {
-      'letter-spacing': '0.1em',
-      'color': 'rgb(80, 80, 80)',
-      'font-family': 'PingFangSC-light, PingFangTC-light, Open Sans, Helvetica Neue, sans-serif',
-      'font-size': '1em',
-      'display': 'inline',
-    },
-    code: {
-      'font-size': '80%',
-      'overflow': 'auto',
-      'color': '#333',
-      'background': 'rgb(247, 247, 247)',
-      'border-radius': '2px',
-      'padding': '10px',
-      'line-height': '1.5',
-      'border': '1px solid rgb(236,236,236)',
-      'margin': '20px 0',
-    },
-    image: {
-      'border-radius': '4px',
-      'display': 'block',
-      'margin': '0.5em auto',
-      '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',
-    }
-  },
-  inline: {
-    listitem: {
-      'text-indent': '-1em',
-      'display': 'block',
-      'margin': '0.5em 8px'
-    },
-    codespan: {
-      'font-size': '90%',
-      'color': '#d14',
-      'background': 'rgba(27,31,35,.05)',
-      'padding': '3px 5px',
-      'border-radius': '4px',
-    },
-    link: {
-      'color': '#576b95'
-    },
-    wx_link: {
-      'color': '#576b95',
-      'text-decoration': 'none',
-    },
-    strong: {
-      'color': 'rgba(66, 185, 131, 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',
-      'font-size': '0.8em'
-    }
-  }
-};

assets/scripts/themes/orange.js

@@ -1,147 +0,0 @@
-let orangeTheme = {
-  BASE: {
-    'text-align': 'left',
-    'color': '#3f3f3f',
-    'line-height': '1.75',
-  },
-  BASE_BLOCK: {
-    'margin': '1em 8px'
-  },
-  block: {
-    h1: {
-      'font-size': '1.2em',
-      'text-align': 'center',
-      'font-weight': 'bold',
-      'display': 'table',
-      'margin': '2em auto 1em',
-      'padding': '0 1em',
-      'border-bottom': '2px solid rgba(255, 95, 46, 0.9)'
-    },
-    h2: {
-      'font-size': '1.1em',
-      'text-align': 'center',
-      'font-weight': 'bold',
-      'display': 'table',
-      'margin': '4em auto 2em',
-      'padding': '0 0.2em',
-      'background': 'rgba(255, 95, 46, 0.9)',
-      'color': '#fff'
-    },
-    h3: {
-      'font-weight': 'bold',
-      'font-size': '1.1em',
-      'margin': '2em 8px 0.75em 0',
-      'line-height': '1.2',
-      'padding-left': '8px',
-      'border-left': '3px solid rgba(255, 95, 46, 0.9)'
-    },
-    h4: {
-      'font-weight': 'bold',
-      'font-size': '1em',
-      'margin': '2em 8px 0.5em',
-    },
-    p: {
-      'margin': '1.5em 8px',
-      'letter-spacing': '0.1em'
-    },
-    blockquote: {
-      'font-style': 'normal',
-      'border-left': 'none',
-      'padding': '1em',
-      'border-radius': '4px',
-      'color': '#FEEEED',
-      'background': 'rgba(27,31,35,.05)',
-      'margin': '2em 8px'
-    },
-    blockquote_p: {
-      'letter-spacing': '0.1em',
-      'color': 'rgb(80, 80, 80)',
-      'font-family': 'PingFangSC-light, PingFangTC-light, Open Sans, Helvetica Neue, sans-serif',
-      'font-size': '1em',
-      'display': 'inline',
-    },
-    code: {
-      'font-size': '80%',
-      'overflow': 'auto',
-      'color': '#333',
-      'background': 'rgb(247, 247, 247)',
-      'border-radius': '2px',
-      'padding': '10px',
-      'line-height': '1.5',
-      'border': '1px solid rgb(236,236,236)',
-      'margin': '20px 0',
-    },
-    image: {
-      'border-radius': '4px',
-      'display': 'block',
-      'margin': '0.5em auto',
-      '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',
-    }
-  },
-  inline: {
-    listitem: {
-      'text-indent': '-1em',
-      'display': 'block',
-      'margin': '0.5em 8px'
-    },
-    codespan: {
-      'font-size': '90%',
-      'color': '#d14',
-      'background': 'rgba(27,31,35,.05)',
-      'padding': '3px 5px',
-      'border-radius': '4px',
-    },
-    link: {
-      'color': '#576b95'
-    },
-    wx_link: {
-      'color': '#576b95',
-      'text-decoration': 'none',
-    },
-    strong: {
-      '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',
-      'font-size': '0.8em'
-    }
-  }
-};

assets/scripts/util.js

@@ -0,0 +1,12 @@
+function setColorWithTemplate(template) {
+    return function(color) {
+        let custom_theme = JSON.parse(JSON.stringify(template));
+        custom_theme.block.h1['border-bottom'] = `2px solid ${color}`;
+        custom_theme.block.h2['background'] = color;
+        custom_theme.block.h3['border-left'] = `3px solid ${color}`;
+        custom_theme.inline.strong['color'] = color;
+        return custom_theme
+    };
+}
+
+let setColor = setColorWithTemplate(default_theme);

index.html

@@ -61,11 +61,11 @@
               </el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="样式">
+          <el-form-item label="颜色">
-            <el-select v-model="currentTheme" size="mini" placeholder="选择主题样式" @change="themeChanged">
+            <el-select v-model="currentColor" size="mini" placeholder="选择颜色" @change="colorChanged">
-              <el-option v-for="theme in themeOption" :key="theme.value" :label="theme.label" :value="theme.value">
+              <el-option v-for="color in colorOption" :key="color.value" :label="color.label" :value="color.value">
-                <span class="select-item-left">{{ theme.label }}</span>
+                <span class="select-item-left">{{ color.label }}</span>
-                <span class="select-item-right">{{ theme.author }}</span>
+                <span class="select-item-right">{{ color.author }}</span>
               </el-option>
             </el-select>
           </el-form-item>
@@ -121,10 +121,10 @@
   <script src="libs/sync-scroll.js"></script>
   <script src="libs/FuriganaMD.js"></script>
 
-  <script src="assets/scripts/themes/orange.js"></script>
+  <script src="assets/scripts/themes/default-theme.js"></script>
-  <script src="assets/scripts/themes/lightgreen.js"></script>
+  
-  <script src="assets/scripts/themes/darkcyan.js"></script>
   <script src="assets/scripts/renderers/wx-renderer.js"></script>
+  <script src="assets/scripts/util.js"></script>
   <script src="assets/scripts/editor.js"></script>
   <script src="assets/scripts/loading.js"></script>