diff --git a/README_CN.md b/README_CN.md
index b8120a2..79c13b4 100644
--- a/README_CN.md
+++ b/README_CN.md
@@ -14,6 +14,34 @@
## 为什么要二次改造？
每个人的审美都不一样，我希望能在基础 CSS 样式的基础上进行改造，定义一款自己喜欢的微信 Markdown 编辑器。
+## 如何扩展样式？
+- 首先在 `assets/scripts/themes/` 文件夹下添加一个 js 文件作为扩展的主题样式，如 `pink.js`，内容的格式与其他主题保持一致，let 变量命名为 `pinkTheme`。
+- 然后在 `assets/scripts/editor.js` 中，找到变量 `themeOption`，添加一个选项（建议将 author 设置为色值的十六进制），如：
+ ```javascript
+ themeOption: [
+ { label: '橘红', value: 'orange', author: '#ff5f2e' },
+ { label: '淡绿', value: 'lightgreen', author: '#42b983'},
+ { label: '暗青', value: 'darkcyan', author: '#008b8b'},
+ { label: '粉色', value: 'pink', author: '#ff1cae'},
+ ],
+ ```
+ 接着在下方的 `styleThemes` 中添加 一个 pink 主题，如：
+ ```javascript
+ styleThemes: {
+ orange: orangeTheme,
+ lightgreen: lightgreenTheme,
+ darkcyan: darkcyanTheme,
+ pink: pinkTheme,
+ },
+ ```
+- 最后在 `index.html` 文件末尾引入 pink.js 文件，如：
+ ```javascript
+
+
+
+
+ ```
+
## 我的公众号
可以用微信扫码关注我的公众号“Doocs开源社区”，原创技术文章第一时间推送。
diff --git a/assets/scripts/editor.js b/assets/scripts/editor.js
index 827e30d..d2b73be 100644
--- a/assets/scripts/editor.js
+++ b/assets/scripts/editor.js
@@ -27,17 +27,21 @@ let app = new Vue({
{ label: '16px', value: '16px', desc: '稍大' },
],
themeOption: [
- { label: 'default', value: 'default', author: '默认' },
+ { label: '橘红', value: 'orange', author: '#FF5F2E' },
+ { label: '淡绿', value: 'lightgreen', author: '#42B983'},
+ { label: '暗青', value: 'darkcyan', author: '#008B8B'}
],
styleThemes: {
- default: defaultTheme
+ 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[0].value;
+ d.currentTheme = d.themeOption[1].value;
return d;
},
mounted() {
@@ -57,7 +61,7 @@ let app = new Vue({
self.saveEditorContent();
});
this.wxRenderer = new WxRenderer({
- theme: this.styleThemes.default,
+ theme: this.styleThemes.lightgreen,
fonts: this.currentFont,
size: this.currentSize
});
diff --git a/assets/scripts/themes/darkcyan.js b/assets/scripts/themes/darkcyan.js
new file mode 100644
index 0000000..04f58b4
--- /dev/null
+++ b/assets/scripts/themes/darkcyan.js
@@ -0,0 +1,147 @@
+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/lightgreen.js b/assets/scripts/themes/lightgreen.js
new file mode 100644
index 0000000..bcda9b1
--- /dev/null
+++ b/assets/scripts/themes/lightgreen.js
@@ -0,0 +1,147 @@
+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/default.js b/assets/scripts/themes/orange.js
similarity index 93%
rename from assets/scripts/themes/default.js
rename to assets/scripts/themes/orange.js
index ae949c2..761f341 100644
--- a/assets/scripts/themes/default.js
+++ b/assets/scripts/themes/orange.js
@@ -1,4 +1,4 @@
-let defaultTheme = {
+let orangeTheme = {
BASE: {
'text-align': 'left',
'color': '#3f3f3f',
@@ -15,7 +15,7 @@ let defaultTheme = {
'display': 'table',
'margin': '2em auto 1em',
'padding': '0 1em',
- 'border-bottom': '2px solid #ff5f2e'
+ 'border-bottom': '2px solid rgba(255, 95, 46, 0.9)'
},
h2: {
'font-size': '1.1em',
@@ -24,7 +24,7 @@ let defaultTheme = {
'display': 'table',
'margin': '4em auto 2em',
'padding': '0 0.2em',
- 'background': '#ff5f2e',
+ 'background': 'rgba(255, 95, 46, 0.9)',
'color': '#fff'
},
h3: {
@@ -33,7 +33,7 @@ let defaultTheme = {
'margin': '2em 8px 0.75em 0',
'line-height': '1.2',
'padding-left': '8px',
- 'border-left': '3px solid #ff5f2e'
+ 'border-left': '3px solid rgba(255, 95, 46, 0.9)'
},
h4: {
'font-weight': 'bold',
@@ -119,7 +119,7 @@ let defaultTheme = {
'text-decoration': 'none',
},
strong: {
- 'color': '#ff5f2e',
+ 'color': 'rgba(255, 95, 46, 0.9)',
'font-weight': 'bold',
},
table: {
diff --git a/index.html b/index.html
index e57fe7c..4d391b5 100644
--- a/index.html
+++ b/index.html
@@ -128,7 +128,9 @@
-
+
+
+