mirror of
https://github.com/doocs/md.git
synced 2024-11-24 19:10:34 +08:00
feat: code optimisation
代码优化
This commit is contained in:
yanglbme
parent
98df1b6325
commit
c3b04aac21
@ -24,7 +24,7 @@ let app = new Vue({
|
||||
sizeOption: [
|
||||
{ label: '13px', value: '13px', desc: '稍小' },
|
||||
{ label: '14px', value: '14px', desc: '推荐' },
|
||||
{ label: '15px', value: '15px', desc: '稍大' },
|
||||
{ label: '15px', value: '15px', desc: '稍大' }
|
||||
],
|
||||
colorOption: [
|
||||
{ label: '橘红', value: 'rgba(255, 95, 46, 0.9)', hex: '#FF5F2E' },
|
||||
@ -47,7 +47,7 @@ let app = new Vue({
|
||||
lineWrapping: true,
|
||||
styleActiveLine: true,
|
||||
theme: this.currentEditorTheme,
|
||||
mode: 'text/x-markdown',
|
||||
mode: 'text/x-markdown'
|
||||
}
|
||||
);
|
||||
this.editor.on("change", (cm, change) => {
|
||||
@ -65,9 +65,9 @@ let app = new Vue({
|
||||
} else {
|
||||
axios({
|
||||
method: 'get',
|
||||
url: './assets/default-content.md',
|
||||
url: './assets/default-content.md'
|
||||
}).then(resp => {
|
||||
this.editor.setValue(resp.data)
|
||||
this.editor.setValue(resp.data);
|
||||
})
|
||||
}
|
||||
},
|
||||
@ -82,33 +82,33 @@ let app = new Vue({
|
||||
// 附加的一些 style
|
||||
output += this.wxRenderer.buildAddition();
|
||||
}
|
||||
return output
|
||||
return output;
|
||||
},
|
||||
editorThemeChanged(editorTheme) {
|
||||
this.editor.setOption('theme', editorTheme)
|
||||
this.editor.setOption('theme', editorTheme);
|
||||
},
|
||||
fontChanged(fonts) {
|
||||
this.wxRenderer.setOptions({
|
||||
fonts: fonts
|
||||
});
|
||||
this.refresh()
|
||||
this.refresh();
|
||||
},
|
||||
sizeChanged(size) {
|
||||
this.wxRenderer.setOptions({
|
||||
size: size
|
||||
});
|
||||
this.refresh()
|
||||
this.refresh();
|
||||
},
|
||||
colorChanged(color) {
|
||||
let theme = setColor(color)
|
||||
this.wxRenderer.setOptions({
|
||||
theme: theme
|
||||
})
|
||||
this.refresh()
|
||||
});
|
||||
this.refresh();
|
||||
},
|
||||
// 刷新右侧预览
|
||||
refresh() {
|
||||
this.output = this.renderWeChat(this.editor.getValue(0))
|
||||
this.output = this.renderWeChat(this.editor.getValue(0));
|
||||
},
|
||||
// 将左侧编辑器内容保存到 LocalStorage
|
||||
saveEditorContent() {
|
||||
@ -156,7 +156,7 @@ let app = new Vue({
|
||||
});
|
||||
}
|
||||
},
|
||||
openWindow(url) {
|
||||
visit(url) {
|
||||
window.open(url);
|
||||
}
|
||||
},
|
||||
|
||||
@ -7,7 +7,7 @@ let WxRenderer = function (opts) {
|
||||
let footnoteIndex = 0;
|
||||
let styleMapping = null;
|
||||
|
||||
let CODE_FONT_FAMILY = "Menlo, Operator Mono, Consolas, Monaco, monospace";
|
||||
const CODE_FONT_FAMILY = "Menlo, Operator Mono, Consolas, Monaco, monospace";
|
||||
|
||||
let merge = (base, extend) => Object.assign({}, base, extend);
|
||||
|
||||
@ -25,7 +25,7 @@ let WxRenderer = function (opts) {
|
||||
style['font-family'] = CODE_FONT_FAMILY;
|
||||
style['white-space'] = 'normal';
|
||||
}
|
||||
mapping[ele] = merge(base, style)
|
||||
mapping[ele] = merge(base, style);
|
||||
}
|
||||
}
|
||||
|
||||
@ -33,12 +33,12 @@ let WxRenderer = function (opts) {
|
||||
if (themeTpl.block.hasOwnProperty(ele)) {
|
||||
let style = themeTpl.block[ele];
|
||||
if (ele === 'code') {
|
||||
style['font-family'] = CODE_FONT_FAMILY
|
||||
style['font-family'] = CODE_FONT_FAMILY;
|
||||
}
|
||||
mapping[ele] = merge(base_block, style)
|
||||
mapping[ele] = merge(base_block, style);
|
||||
}
|
||||
}
|
||||
return mapping
|
||||
return mapping;
|
||||
};
|
||||
|
||||
let getStyles = (tokenName, addition) => {
|
||||
@ -46,9 +46,9 @@ let WxRenderer = function (opts) {
|
||||
let dict = styleMapping[tokenName];
|
||||
if (!dict) return '';
|
||||
for (const key in dict) {
|
||||
arr.push(key + ':' + dict[key])
|
||||
arr.push(key + ':' + dict[key]);
|
||||
}
|
||||
return `style="${arr.join(';') + (addition || '')}"`
|
||||
return `style="${arr.join(';') + (addition || '')}"`;
|
||||
};
|
||||
|
||||
let addFootnote = (title, link) => {
|
||||
@ -59,11 +59,11 @@ let WxRenderer = function (opts) {
|
||||
this.buildFootnotes = () => {
|
||||
let footnoteArray = footnotes.map(x => {
|
||||
if (x[1] === x[2]) {
|
||||
return `<code style="font-size: 90%; opacity: 0.6;">[${x[0]}]</code>: <i>${x[1]}</i><br/>`
|
||||
return `<code style="font-size: 90%; opacity: 0.6;">[${x[0]}]</code>: <i>${x[1]}</i><br/>`;
|
||||
}
|
||||
return `<code style="font-size: 90%; opacity: 0.6;">[${x[0]}]</code> ${x[1]}: <i>${x[2]}</i><br/>`
|
||||
return `<code style="font-size: 90%; opacity: 0.6;">[${x[0]}]</code> ${x[1]}: <i>${x[2]}</i><br/>`;
|
||||
});
|
||||
return `<h4 ${getStyles('h4')}>引用链接</h4><p ${getStyles('footnotes')}>${footnoteArray.join('\n')}</p>`
|
||||
return `<h4 ${getStyles('h4')}>引用链接</h4><p ${getStyles('footnotes')}>${footnoteArray.join('\n')}</p>`;
|
||||
};
|
||||
|
||||
this.buildAddition = () => {
|
||||
@ -87,7 +87,7 @@ let WxRenderer = function (opts) {
|
||||
}
|
||||
|
||||
this.setOptions = newOpts => {
|
||||
this.opts = merge(this.opts, newOpts)
|
||||
this.opts = merge(this.opts, newOpts);
|
||||
};
|
||||
|
||||
this.hasFootnotes = () => footnotes.length !== 0;
|
||||
@ -116,7 +116,7 @@ let WxRenderer = function (opts) {
|
||||
|
||||
renderer.blockquote = text => {
|
||||
text = text.replace(/<p.*?>/, `<p ${getStyles('blockquote_p')}>`);
|
||||
return `<blockquote ${getStyles('blockquote')}>${text}</blockquote>`
|
||||
return `<blockquote ${getStyles('blockquote')}>${text}</blockquote>`;
|
||||
};
|
||||
renderer.code = (text, infoString) => {
|
||||
text = text.replace(/</g, "<");
|
||||
@ -129,7 +129,7 @@ let WxRenderer = function (opts) {
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
const line = lines[i];
|
||||
codeLines.push(`<code class="prettyprint"><span class="code-snippet_outer">${(line || '<br>')}</span></code>`);
|
||||
numbers.push('<li></li>')
|
||||
numbers.push('<li></li>');
|
||||
}
|
||||
let lang = infoString || '';
|
||||
|
||||
@ -161,11 +161,11 @@ let WxRenderer = function (opts) {
|
||||
renderer.image = (href, title, text) => {
|
||||
let subText = '';
|
||||
if (text) {
|
||||
subText = `<figcaption ${getStyles('figcaption')}>${text}</figcaption>`
|
||||
subText = `<figcaption ${getStyles('figcaption')}>${text}</figcaption>`;
|
||||
}
|
||||
let figureStyles = getStyles('figure');
|
||||
let imgStyles = getStyles(ENV_STRETCH_IMAGE ? 'image' : 'image_org');
|
||||
return `<figure ${figureStyles}><img ${imgStyles} src="${href}" title="${title}" alt="${text}"/>${subText}</figure>`
|
||||
return `<figure ${figureStyles}><img ${imgStyles} src="${href}" title="${title}" alt="${text}"/>${subText}</figure>`;
|
||||
};
|
||||
renderer.link = (href, title, text) => {
|
||||
if (href.indexOf('https://mp.weixin.qq.com') === 0) {
|
||||
@ -187,6 +187,6 @@ let WxRenderer = function (opts) {
|
||||
renderer.tablecell = (text, flags) => `<td ${getStyles('td')}>${text}</td>`;
|
||||
renderer.hr = () => `<hr style="border-style: solid;border-width: 1px 0 0;border-color: rgba(0,0,0,0.1);-webkit-transform-origin: 0 0;-webkit-transform: scale(1, 0.5);transform-origin: 0 0;transform: scale(1, 0.5);">`;
|
||||
|
||||
return renderer
|
||||
return renderer;
|
||||
}
|
||||
};
|
||||
|
||||
@ -65,6 +65,7 @@ let default_theme = {
|
||||
'background': 'rgba(27,31,35,.05)',
|
||||
'margin': '2em 8px'
|
||||
},
|
||||
|
||||
blockquote_p: {
|
||||
'letter-spacing': '0.1em',
|
||||
'color': 'rgb(80, 80, 80)',
|
||||
@ -72,6 +73,7 @@ let default_theme = {
|
||||
'font-size': '1em',
|
||||
'display': 'inline',
|
||||
},
|
||||
|
||||
code: {
|
||||
'font-size': '80%',
|
||||
'overflow': 'auto',
|
||||
@ -83,29 +85,35 @@ let default_theme = {
|
||||
'border': '1px solid rgb(236,236,236)',
|
||||
'margin': '20px 0',
|
||||
},
|
||||
|
||||
image: {
|
||||
'border-radius': '4px',
|
||||
'display': 'block',
|
||||
'margin': '0.1em auto 0.5em',
|
||||
'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',
|
||||
}
|
||||
@ -116,6 +124,7 @@ let default_theme = {
|
||||
'display': 'block',
|
||||
'margin': '0.2em 8px'
|
||||
},
|
||||
|
||||
codespan: {
|
||||
'font-size': '90%',
|
||||
'color': '#d14',
|
||||
@ -123,9 +132,11 @@ let default_theme = {
|
||||
'padding': '3px 5px',
|
||||
'border-radius': '4px',
|
||||
},
|
||||
|
||||
link: {
|
||||
'color': '#576b95'
|
||||
},
|
||||
|
||||
wx_link: {
|
||||
'color': '#576b95',
|
||||
'text-decoration': 'none',
|
||||
@ -136,22 +147,27 @@ let default_theme = {
|
||||
'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',
|
||||
|
||||
12
index.html
12
index.html
@ -3,8 +3,10 @@
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="keywords" content="md,markdown,markdown-editor,wechat,official-account,yanglbme,cseye">
|
||||
<meta name="description" content="Wechat Markdown Editor | 一款高度简洁的微信 Markdown 编辑器">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<title>微信 Markdown 编辑器</title>
|
||||
<link rel="shortcut icon" href="assets/images/favicon.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="assets/images/favicon.png">
|
||||
@ -88,16 +90,16 @@
|
||||
</el-container>
|
||||
<el-dialog title="关于" :visible.sync="aboutDialogVisible" width="30%" center>
|
||||
<div style="text-align: center;">
|
||||
<h3>一款简洁美观的微信 Markdown 编辑器</h3>
|
||||
<h3>一款高度简洁的微信 Markdown 编辑器</h3>
|
||||
</div>
|
||||
<div style="text-align: center;">
|
||||
<img src="assets/images/qrcode.jpg" style="max-width: 300px">
|
||||
<p>扫码关注我的公众号，原创技术文章第一时间推送！</p>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="success" plain @click="openWindow('https://github.com/cseye/md')">GitHub 仓库
|
||||
<el-button type="success" plain @click="visit('https://github.com/cseye/md')">GitHub 仓库
|
||||
</el-button>
|
||||
<el-button type="success" plain @click="openWindow('https://gitee.com/cseye/md')">Gitee 仓库
|
||||
<el-button type="success" plain @click="visit('https://gitee.com/cseye/md')">Gitee 仓库
|
||||
</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
// 注音功能来自于
|
||||
// https://github.com/amclees/furigana-markdown
|
||||
// 详见上述文档
|
||||
|
||||
/**
|
||||
* 注音功能来自于：https://github.com/amclees/furigana-markdown
|
||||
* 详见上述文档
|
||||
*/
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
|
||||
Loading…
Reference in New Issue
Block a user