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 @@
-
-
-
+
+
+