diff --git a/README_CN.md b/README_CN.md index 430d518..2300056 100644 --- a/README_CN.md +++ b/README_CN.md @@ -14,33 +14,11 @@ ## 为什么要二次改造? 每个人的审美都不一样,我希望能在基础 CSS 样式的基础上进行改造,定义一款自己喜欢的微信 Markdown 编辑器。 -## 如何扩展样式? -- 首先在 [`assets/scripts/themes/`](assets/scripts/themes/) 文件夹下添加一个 js 文件作为扩展的主题样式,如 `pink.js`,内容的格式与其他主题保持一致,let 变量命名为 `pinkTheme`。 -- 然后在 [`assets/scripts/editor.js`](assets/scripts/editor.js) 中,找到变量 [`themeOption`](assets/scripts/editor.js#L29),添加一个选项(建议将 author 设置为色值的十六进制),如: - ```javascript - themeOption: [ - { 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 - - - - - ``` +## 功能特性 +- [x] 支持所有基础 Markdown 语法 +- [x] 支持单独进行字体、字号设置 +- [x] 支持色盘取色,并一键替换颜色 +- [x] 支持链接微信图文,外链自动转换为索引并在文末引用 ## 我的公众号 可以用微信扫码关注我的公众号“Doocs开源社区”,原创技术文章第一时间推送。 diff --git a/assets/css/app.css b/assets/css/app.css index ae9bce6..28cd7a2 100644 --- a/assets/css/app.css +++ b/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; } \ No newline at end of file diff --git a/assets/scripts/editor.js b/assets/scripts/editor.js index 5925664..5ed1da3 100644 --- a/assets/scripts/editor.js +++ b/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[0].value; + d.currentColor = d.colorOption[1].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 () { diff --git a/assets/scripts/themes/darkcyan.js b/assets/scripts/themes/darkcyan.js deleted file mode 100644 index 04f58b4..0000000 --- a/assets/scripts/themes/darkcyan.js +++ /dev/null @@ -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' - } - } -}; \ No newline at end of file diff --git a/assets/scripts/themes/default-theme.js b/assets/scripts/themes/default-theme.js new file mode 100644 index 0000000..660eb58 --- /dev/null +++ b/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' + } + } +}; + diff --git a/assets/scripts/themes/lightgreen.js b/assets/scripts/themes/lightgreen.js deleted file mode 100644 index bcda9b1..0000000 --- a/assets/scripts/themes/lightgreen.js +++ /dev/null @@ -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' - } - } -}; \ No newline at end of file diff --git a/assets/scripts/themes/orange.js b/assets/scripts/themes/orange.js deleted file mode 100644 index 761f341..0000000 --- a/assets/scripts/themes/orange.js +++ /dev/null @@ -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' - } - } -}; \ No newline at end of file diff --git a/assets/scripts/util.js b/assets/scripts/util.js new file mode 100644 index 0000000..f7f44c5 --- /dev/null +++ b/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); diff --git a/index.html b/index.html index 0f3eea4..e315782 100644 --- a/index.html +++ b/index.html @@ -61,11 +61,11 @@ - - - - {{ theme.label }} - {{ theme.author }} + + + + {{ color.label }} + {{ color.author }} @@ -121,10 +121,10 @@ - - - + + +