mirror of
https://github.com/doocs/md.git
synced 2024-11-24 19:10:34 +08:00
feat: add default-theme
添加默认主题，色盘颜色自动渲染至文章
This commit is contained in:
yanglbme
parent
9c65fa5738
commit
5f6ebd2281
32
README_CN.md
32
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
|
||||
<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>
|
||||
```
|
||||
## 功能特性
|
||||
- [x] 支持所有基础 Markdown 语法
|
||||
- [x] 支持单独进行字体、字号设置
|
||||
- [x] 支持色盘取色，并一键替换颜色
|
||||
- [x] 支持链接微信图文，外链自动转换为索引并在文末引用
|
||||
|
||||
## 我的公众号
|
||||
可以用微信扫码关注我的公众号“Doocs开源社区”，原创技术文章第一时间推送。
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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 () {
|
||||
|
||||
@ -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'
|
||||
}
|
||||
}
|
||||
};
|
||||
148
assets/scripts/themes/default-theme.js
Normal file
148
assets/scripts/themes/default-theme.js
Normal file
@ -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'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -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'
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -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'
|
||||
}
|
||||
}
|
||||
};
|
||||
12
assets/scripts/util.js
Normal file
12
assets/scripts/util.js
Normal file
@ -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);
|
||||
16
index.html
16
index.html
@ -61,11 +61,11 @@
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="样式">
|
||||
<el-select v-model="currentTheme" size="mini" placeholder="选择主题样式" @change="themeChanged">
|
||||
<el-option v-for="theme in themeOption" :key="theme.value" :label="theme.label" :value="theme.value">
|
||||
<span class="select-item-left">{{ theme.label }}</span>
|
||||
<span class="select-item-right">{{ theme.author }}</span>
|
||||
<el-form-item label="颜色">
|
||||
<el-select v-model="currentColor" size="mini" placeholder="选择颜色" @change="colorChanged">
|
||||
<el-option v-for="color in colorOption" :key="color.value" :label="color.label" :value="color.value">
|
||||
<span class="select-item-left">{{ color.label }}</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/lightgreen.js"></script>
|
||||
<script src="assets/scripts/themes/darkcyan.js"></script>
|
||||
<script src="assets/scripts/themes/default-theme.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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user