From cecd7dde55236a49bbc0f36a94b0a167db9aca74 Mon Sep 17 00:00:00 2001 From: yanglbme Date: Thu, 25 Jun 2020 17:20:37 +0800 Subject: [PATCH] fix: update code style MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 统一代码风格 * 修复超链接问题 * 新增待办列表 --- README.md | 3 + public/assets/css/app.css | 251 +++++++++-------- public/assets/css/loading.css | 62 ++--- public/assets/css/style-mirror.css | 144 +++++----- public/favicon.ico | Bin 4286 -> 0 bytes public/index.html | 63 ++--- public/libs/css/show-hint.css | 50 ++-- public/libs/css/style-mirror.css | 144 +++++----- src/components/Loading.vue | 13 +- src/element/index.js | 34 +-- src/scripts/closebrackets.js | 400 ++++++++++++++------------- src/scripts/config.js | 11 +- src/scripts/converter.js | 45 ++- src/scripts/format.js | 154 ++++++----- src/scripts/renderers/wx-renderer.js | 298 ++++++++++---------- src/scripts/sync-scroll.js | 30 +- src/scripts/util.js | 277 ++++++++++--------- 17 files changed, 1010 insertions(+), 969 deletions(-) delete mode 100644 public/favicon.ico diff --git a/README.md b/README.md index 776c5c6..d1e1a46 100644 --- a/README.md +++ b/README.md @@ -43,6 +43,9 @@ Markdown 文档自动即时渲染为微信图文，让你不再为微信文章 - [x] 支持自定义 CSS 样式并实时渲染 - [x] 支持一键恢复至默认内容及样式 - [x] 支持打开或关闭引用链接的选项 +- [ ] 新建右键点击菜单栏 +- [ ] 插入表格功能优化 + ![select-and-change-color-theme](https://imgkr.cn-bj.ufileos.com/32c05c23-6309-491f-bd0d-f22a62c944b4.gif) diff --git a/public/assets/css/app.css b/public/assets/css/app.css index 2cfeade..e51d6cc 100644 --- a/public/assets/css/app.css +++ b/public/assets/css/app.css @@ -1,234 +1,245 @@ * { - box-sizing: border-box; - margin: 0; - padding: 0; + box-sizing: border-box; + margin: 0; + padding: 0; } -input, button, textarea { - font-family: inherit; +input, +button, +textarea { + font-family: inherit; } -h1, h2, h3, h4, h5, h6 { - font-weight: normal; +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: normal; } em { - font-style: normal !important; + font-style: normal !important; } -html, body { - height: 100%; - font-family: 'PingFang SC', BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif; +html, +body { + height: 100%; + font-family: 'PingFang SC', BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif; } .el-message__icon { - display: none + display: none } .container { - height: 100%; - display: flex; - flex-direction: column; + height: 100%; + display: flex; + flex-direction: column; } .top { - height: 60px; - padding: 10px 20px; - display: flex; - align-items: center; - margin-right: 20px; + height: 60px; + padding: 10px 20px; + display: flex; + align-items: center; + margin-right: 20px; } .web-title { - margin: 0 15px 0 5px; + margin: 0 15px 0 5px; } .web-icon { - width: auto; - height: 1.5rem; - vertical-align: middle; + width: auto; + height: 1.5rem; + vertical-align: middle; } #editor { - height: 100%; - display: block; - border: none; - width: 100%; - padding: 10px; + height: 100%; + display: block; + border: none; + width: 100%; + padding: 10px; } section { - height: 100%; + height: 100%; } .main-body { - display: flex; - flex-direction: column; - padding-top: 0; - padding-bottom: 10px; + display: flex; + flex-direction: column; + padding-top: 0; + padding-bottom: 10px; } .ctrl { - flex-basis: 60px; - flex-grow: 1; - flex-shrink: 1; - display: flex; - align-items: center; + flex-basis: 60px; + flex-grow: 1; + flex-shrink: 1; + display: flex; + align-items: center; } .preview-wrapper { - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); - padding: 0; - align-items: center; - justify-content: center; - display: flex; - overflow: scroll; - word-break: break-all; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); + padding: 0; + align-items: center; + justify-content: center; + display: flex; + overflow: scroll; + word-break: break-all; } .main-section { - display: flex; - height: 100%; + display: flex; + height: 100%; } .hint { - opacity: 0.6; - margin: 20px 0; + opacity: 0.6; + margin: 20px 0; } .preview { - margin: 0 -20px; - width: 375px; - padding: 20px; - font-size: 14px; - box-sizing: border-box; - outline: none; - box-shadow: 0 0 60px rgba(0, 0, 0, 0.1); + margin: 0 -20px; + width: 375px; + padding: 20px; + font-size: 14px; + box-sizing: border-box; + outline: none; + box-shadow: 0 0 60px rgba(0, 0, 0, 0.1); } .preview table { - margin-bottom: 10px; - border-collapse: collapse; - display: table; - width: 100% !important; + margin-bottom: 10px; + border-collapse: collapse; + display: table; + width: 100% !important; } + /* .preview table tr:nth-child(even){ background: rgb(250, 250, 250); } */ .select-item-left { - float: left; + float: left; } .select-item-right { - float: right; - color: #8492a6; - font-size: 13px; + float: right; + color: #8492a6; + font-size: 13px; } .CodeMirror { - height: 100% !important; - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); - font-size: 14px; - padding: 20px; - width: 100% !important; - font-family: 'PingFang SC', BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif !important; + height: 100% !important; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); + font-size: 14px; + padding: 20px; + width: 100% !important; + font-family: 'PingFang SC', BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif !important; } /* ele ui */ .el-form-item { - margin-bottom: 0 !important; + margin-bottom: 0 !important; } .el-tooltip { - cursor: pointer; + cursor: pointer; } /*wechat code block*/ -.rich_media_content .code-snippet *, .rich_media_content .code-snippet__fix * { - max-width: 1000% !important; +.rich_media_content .code-snippet *, +.rich_media_content .code-snippet__fix * { + max-width: 1000% !important; } .code-snippet__fix { - word-wrap: break-word !important; - font-size: 14px; - margin: 10px 8px; - color: #333; - position: relative; - background-color: rgb(238,238,238); - border: 1px solid #f0f0f0; - border-radius: 2px; - display: flex; - line-height: 24px; + word-wrap: break-word !important; + font-size: 14px; + margin: 10px 8px; + color: #333; + position: relative; + background-color: rgb(238, 238, 238); + border: 1px solid #f0f0f0; + border-radius: 2px; + display: flex; + line-height: 24px; } .code-snippet__fix .code-snippet__line-index { - counter-reset: line; - flex-shrink: 0; - height: 100%; - padding: 1em; - list-style-type: none; + counter-reset: line; + flex-shrink: 0; + height: 100%; + padding: 1em; + list-style-type: none; } .code-snippet__fix .code-snippet__line-index li { - list-style-type: none; - text-align: right; + list-style-type: none; + text-align: right; } .code-snippet__fix .code-snippet__line-index li::before { - min-width: 1.5em; - text-align: right; - left: -2.5em; - counter-increment: line; - content: counter(line); - display: inline; - color: rgba(0, 0, 0, 0.15); + min-width: 1.5em; + text-align: right; + left: -2.5em; + counter-increment: line; + content: counter(line); + display: inline; + color: rgba(0, 0, 0, 0.15); } .code-snippet__fix pre { - overflow-x: auto; - padding: 1em 1em 1em 1em; - white-space: normal; - flex: 1; - -webkit-overflow-scrolling: touch; + overflow-x: auto; + padding: 1em 1em 1em 1em; + white-space: normal; + flex: 1; + -webkit-overflow-scrolling: touch; } .code-snippet__fix code { - text-align: left; - font-size: 14px; - white-space: pre; - display: flex; - position: relative; - font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; + text-align: left; + font-size: 14px; + white-space: pre; + display: flex; + position: relative; + font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; } ::-webkit-scrollbar { - width: 6px; - height: 6px; - background-color: #FFF; + width: 6px; + height: 6px; + background-color: #FFF; } ::-webkit-scrollbar-track { - border-radius: 6px; - background-color: rgba(200, 200, 200, 0.3); + border-radius: 6px; + background-color: rgba(200, 200, 200, 0.3); } ::-webkit-scrollbar-thumb { - border-radius: 6px; - background-color: rgba(144, 146, 152, 0.5); - transition: background-color .3s; + border-radius: 6px; + background-color: rgba(144, 146, 152, 0.5); + transition: background-color .3s; } ::-webkit-scrollbar-thumb:hover { - background-color: rgba(144, 146, 152, 0.5); + background-color: rgba(144, 146, 152, 0.5); } .CodeMirror-vscrollbar:focus { outline: none; } -.CodeMirror-scroll, .preview-wrapper { +.CodeMirror-scroll, +.preview-wrapper { overflow: unset; overflow-y: scroll; } \ No newline at end of file diff --git a/public/assets/css/loading.css b/public/assets/css/loading.css index aea6b19..d0ede5b 100644 --- a/public/assets/css/loading.css +++ b/public/assets/css/loading.css @@ -1,47 +1,47 @@ .loading { - text-align: center; - position: fixed; - width: 100%; - height: 100%; - overflow: hidden; - z-index: 99999; - background-color: #f2f2f2; + text-align: center; + position: fixed; + width: 100%; + height: 100%; + overflow: hidden; + z-index: 99999; + background-color: #f2f2f2; } .loading_night { - background-color: #303133; + background-color: #303133; } .loading-wrapper { - position: fixed; - top: 50%; - left: 50%; - -webkit-transform: translateX(-50%) translateY(-50%); - -moz-transform: translateX(-50%) translateY(-50%); - -ms-transform: translateX(-50%) translateY(-50%); - transform: translateX(-50%) translateY(-50%); + position: fixed; + top: 50%; + left: 50%; + -webkit-transform: translateX(-50%) translateY(-50%); + -moz-transform: translateX(-50%) translateY(-50%); + -ms-transform: translateX(-50%) translateY(-50%); + transform: translateX(-50%) translateY(-50%); } .loading-text { - line-height: 1.4; - font-size: 1.2rem; - font-weight: bold; - margin-bottom: 1rem; + line-height: 1.4; + font-size: 1.2rem; + font-weight: bold; + margin-bottom: 1rem; } .loading-anim { - width: 35px; - height: 35px; - border: 5px solid rgba(189, 189, 189, 0.25); - border-left-color: rgba(66, 185, 131, 0.9); - border-top-color: rgba(66, 185, 131, 0.9); - border-radius: 50%; - display: inline-block; - animation: rotate 600ms infinite linear; + width: 35px; + height: 35px; + border: 5px solid rgba(189, 189, 189, 0.25); + border-left-color: rgba(66, 185, 131, 0.9); + border-top-color: rgba(66, 185, 131, 0.9); + border-radius: 50%; + display: inline-block; + animation: rotate 600ms infinite linear; } @keyframes rotate { - to { - transform: rotate(1turn) - } -} + to { + transform: rotate(1turn) + } +} \ No newline at end of file diff --git a/public/assets/css/style-mirror.css b/public/assets/css/style-mirror.css index bf98442..8c74dff 100644 --- a/public/assets/css/style-mirror.css +++ b/public/assets/css/style-mirror.css @@ -14,91 +14,111 @@ font-size: 16px; padding: 20px; line-height: 25px; - } - .cm-s-style-mirror div.CodeMirror-selected { +} + +.cm-s-style-mirror div.CodeMirror-selected { background: #e0e0e0; - } - .cm-s-style-mirror .CodeMirror-line::selection, - .cm-s-style-mirror .CodeMirror-line > span::selection, - .cm-s-style-mirror .CodeMirror-line > span > span::selection { +} + +.cm-s-style-mirror .CodeMirror-line::selection, +.cm-s-style-mirror .CodeMirror-line>span::selection, +.cm-s-style-mirror .CodeMirror-line>span>span::selection { background: #e0e0e0; - } - .cm-s-style-mirror .CodeMirror-line::-moz-selection, - .cm-s-style-mirror .CodeMirror-line > span::-moz-selection, - .cm-s-style-mirror .CodeMirror-line > span > span::-moz-selection { +} + +.cm-s-style-mirror .CodeMirror-line::-moz-selection, +.cm-s-style-mirror .CodeMirror-line>span::-moz-selection, +.cm-s-style-mirror .CodeMirror-line>span>span::-moz-selection { background: #e0e0e0; - } - .cm-s-style-mirror .CodeMirror-gutters { +} + +.cm-s-style-mirror .CodeMirror-gutters { background: #f5f5f5; border-right: 0px; - } - .cm-s-style-mirror .CodeMirror-guttermarker { +} + +.cm-s-style-mirror .CodeMirror-guttermarker { color: #ac4142; - } - .cm-s-style-mirror .CodeMirror-guttermarker-subtle { +} + +.cm-s-style-mirror .CodeMirror-guttermarker-subtle { color: #b0b0b0; - } - .cm-s-style-mirror .CodeMirror-linenumber { +} + +.cm-s-style-mirror .CodeMirror-linenumber { color: #b0b0b0; - } - .cm-s-style-mirror .CodeMirror-cursor { +} + +.cm-s-style-mirror .CodeMirror-cursor { border-left: 1px solid #505050; - } - - .cm-s-style-mirror span.cm-comment { - color:green; - } - .cm-s-style-mirror span.cm-atom { +} + +.cm-s-style-mirror span.cm-comment { + color: green; +} + +.cm-s-style-mirror span.cm-atom { color: #aa759f; - } - .cm-s-style-mirror span.cm-number { +} + +.cm-s-style-mirror span.cm-number { color: #aa759f; - } - - .cm-s-style-mirror span.cm-property, - .cm-s-style-mirror span.cm-attribute { +} + +.cm-s-style-mirror span.cm-property, +.cm-s-style-mirror span.cm-attribute { color: #90a959; - } - .cm-s-style-mirror span.cm-keyword { +} + +.cm-s-style-mirror span.cm-keyword { color: #023a52; - } - .cm-s-style-mirror span.cm-string { +} + +.cm-s-style-mirror span.cm-string { color: #e46918; - } - - .cm-s-style-mirror span.cm-variable { +} + +.cm-s-style-mirror span.cm-variable { color: #90a959; - } - .cm-s-style-mirror span.cm-variable-2 { +} + +.cm-s-style-mirror span.cm-variable-2 { color: #00695f; - } - .cm-s-style-mirror span.cm-variable-3 { +} + +.cm-s-style-mirror span.cm-variable-3 { color: #2e6e8a; - } - .cm-s-style-mirror span.cm-def { +} + +.cm-s-style-mirror span.cm-def { color: #d28445; - } - .cm-s-style-mirror span.cm-bracket { +} + +.cm-s-style-mirror span.cm-bracket { color: #202020; - } - .cm-s-style-mirror span.cm-tag { - color:#000; - } - .cm-s-style-mirror span.cm-link { +} + +.cm-s-style-mirror span.cm-tag { + color: #000; +} + +.cm-s-style-mirror span.cm-link { color: #b26a00; - } - .cm-s-style-mirror span.cm-error { +} + +.cm-s-style-mirror span.cm-error { /* background: #ac4142; color: #f5f5f5; */ text-decoration: underline; text-decoration-style: wavy; text-decoration-color: #df8d8e; - } - .cm-s-style-mirror .CodeMirror-activeline-background { +} + +.cm-s-style-mirror .CodeMirror-activeline-background { background: #dddcdc; - } - .cm-s-style-mirror .CodeMirror-matchingbracket { - color: rgb(32,32,32) !important; - background-color: rgba(0,0,0,0.1) !important; - } - \ No newline at end of file +} + +.cm-s-style-mirror .CodeMirror-matchingbracket { + color: rgb(32, 32, 32) !important; + background-color: rgba(0, 0, 0, 0.1) !important; +} \ No newline at end of file diff --git a/public/favicon.ico b/public/favicon.ico deleted file mode 100644 index df36fcfb72584e00488330b560ebcf34a41c64c2..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S diff --git a/public/index.html b/public/index.html index 091d43d..0c1058e 100644 --- a/public/index.html +++ b/public/index.html @@ -1,55 +1,28 @@ - - - - - - - 微信 Markdown 编辑器 - - - - - - - - + + + + + + 微信 Markdown 编辑器 + + + + + + + + -
-
+
+
\ No newline at end of file diff --git a/public/libs/css/show-hint.css b/public/libs/css/show-hint.css index 5617ccc..776fa2a 100644 --- a/public/libs/css/show-hint.css +++ b/public/libs/css/show-hint.css @@ -1,36 +1,36 @@ .CodeMirror-hints { - position: absolute; - z-index: 10; - overflow: hidden; - list-style: none; + position: absolute; + z-index: 10; + overflow: hidden; + list-style: none; - margin: 0; - padding: 2px; + margin: 0; + padding: 2px; - -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2); - -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2); - box-shadow: 2px 3px 5px rgba(0,0,0,.2); - border-radius: 3px; - border: 1px solid silver; + -webkit-box-shadow: 2px 3px 5px rgba(0, 0, 0, .2); + -moz-box-shadow: 2px 3px 5px rgba(0, 0, 0, .2); + box-shadow: 2px 3px 5px rgba(0, 0, 0, .2); + border-radius: 3px; + border: 1px solid silver; - background: white; - font-size: 90%; - font-family: monospace; + background: white; + font-size: 90%; + font-family: monospace; - max-height: 20em; - overflow-y: auto; + max-height: 20em; + overflow-y: auto; } .CodeMirror-hint { - margin: 0; - padding: 0 4px; - border-radius: 2px; - white-space: pre; - color: black; - cursor: pointer; + margin: 0; + padding: 0 4px; + border-radius: 2px; + white-space: pre; + color: black; + cursor: pointer; } li.CodeMirror-hint-active { - background: #08f; - color: white; -} + background: #08f; + color: white; +} \ No newline at end of file diff --git a/public/libs/css/style-mirror.css b/public/libs/css/style-mirror.css index bf98442..8c74dff 100644 --- a/public/libs/css/style-mirror.css +++ b/public/libs/css/style-mirror.css @@ -14,91 +14,111 @@ font-size: 16px; padding: 20px; line-height: 25px; - } - .cm-s-style-mirror div.CodeMirror-selected { +} + +.cm-s-style-mirror div.CodeMirror-selected { background: #e0e0e0; - } - .cm-s-style-mirror .CodeMirror-line::selection, - .cm-s-style-mirror .CodeMirror-line > span::selection, - .cm-s-style-mirror .CodeMirror-line > span > span::selection { +} + +.cm-s-style-mirror .CodeMirror-line::selection, +.cm-s-style-mirror .CodeMirror-line>span::selection, +.cm-s-style-mirror .CodeMirror-line>span>span::selection { background: #e0e0e0; - } - .cm-s-style-mirror .CodeMirror-line::-moz-selection, - .cm-s-style-mirror .CodeMirror-line > span::-moz-selection, - .cm-s-style-mirror .CodeMirror-line > span > span::-moz-selection { +} + +.cm-s-style-mirror .CodeMirror-line::-moz-selection, +.cm-s-style-mirror .CodeMirror-line>span::-moz-selection, +.cm-s-style-mirror .CodeMirror-line>span>span::-moz-selection { background: #e0e0e0; - } - .cm-s-style-mirror .CodeMirror-gutters { +} + +.cm-s-style-mirror .CodeMirror-gutters { background: #f5f5f5; border-right: 0px; - } - .cm-s-style-mirror .CodeMirror-guttermarker { +} + +.cm-s-style-mirror .CodeMirror-guttermarker { color: #ac4142; - } - .cm-s-style-mirror .CodeMirror-guttermarker-subtle { +} + +.cm-s-style-mirror .CodeMirror-guttermarker-subtle { color: #b0b0b0; - } - .cm-s-style-mirror .CodeMirror-linenumber { +} + +.cm-s-style-mirror .CodeMirror-linenumber { color: #b0b0b0; - } - .cm-s-style-mirror .CodeMirror-cursor { +} + +.cm-s-style-mirror .CodeMirror-cursor { border-left: 1px solid #505050; - } - - .cm-s-style-mirror span.cm-comment { - color:green; - } - .cm-s-style-mirror span.cm-atom { +} + +.cm-s-style-mirror span.cm-comment { + color: green; +} + +.cm-s-style-mirror span.cm-atom { color: #aa759f; - } - .cm-s-style-mirror span.cm-number { +} + +.cm-s-style-mirror span.cm-number { color: #aa759f; - } - - .cm-s-style-mirror span.cm-property, - .cm-s-style-mirror span.cm-attribute { +} + +.cm-s-style-mirror span.cm-property, +.cm-s-style-mirror span.cm-attribute { color: #90a959; - } - .cm-s-style-mirror span.cm-keyword { +} + +.cm-s-style-mirror span.cm-keyword { color: #023a52; - } - .cm-s-style-mirror span.cm-string { +} + +.cm-s-style-mirror span.cm-string { color: #e46918; - } - - .cm-s-style-mirror span.cm-variable { +} + +.cm-s-style-mirror span.cm-variable { color: #90a959; - } - .cm-s-style-mirror span.cm-variable-2 { +} + +.cm-s-style-mirror span.cm-variable-2 { color: #00695f; - } - .cm-s-style-mirror span.cm-variable-3 { +} + +.cm-s-style-mirror span.cm-variable-3 { color: #2e6e8a; - } - .cm-s-style-mirror span.cm-def { +} + +.cm-s-style-mirror span.cm-def { color: #d28445; - } - .cm-s-style-mirror span.cm-bracket { +} + +.cm-s-style-mirror span.cm-bracket { color: #202020; - } - .cm-s-style-mirror span.cm-tag { - color:#000; - } - .cm-s-style-mirror span.cm-link { +} + +.cm-s-style-mirror span.cm-tag { + color: #000; +} + +.cm-s-style-mirror span.cm-link { color: #b26a00; - } - .cm-s-style-mirror span.cm-error { +} + +.cm-s-style-mirror span.cm-error { /* background: #ac4142; color: #f5f5f5; */ text-decoration: underline; text-decoration-style: wavy; text-decoration-color: #df8d8e; - } - .cm-s-style-mirror .CodeMirror-activeline-background { +} + +.cm-s-style-mirror .CodeMirror-activeline-background { background: #dddcdc; - } - .cm-s-style-mirror .CodeMirror-matchingbracket { - color: rgb(32,32,32) !important; - background-color: rgba(0,0,0,0.1) !important; - } - \ No newline at end of file +} + +.cm-s-style-mirror .CodeMirror-matchingbracket { + color: rgb(32, 32, 32) !important; + background-color: rgba(0, 0, 0, 0.1) !important; +} \ No newline at end of file diff --git a/src/components/Loading.vue b/src/components/Loading.vue index da6502d..a630ce9 100644 --- a/src/components/Loading.vue +++ b/src/components/Loading.vue @@ -1,16 +1,17 @@ ` - } - - this.setOptions = newOpts => { - this.opts = merge(this.opts, newOpts) - } - - this.hasFootnotes = () => footnotes.length !== 0 - - this.getRenderer = (status) => { - footnotes = [] - footnoteIndex = 0 - - styleMapping = this.buildTheme(this.opts.theme) - let renderer = new marked.Renderer() - - renderer.heading = (text, level) => { - switch (level) { - case 1: - return `

${text}

` - case 2: - return `

${text}

` - case 3: - return `

${text}

` - default: - return `

${text}

` - } - } - renderer.paragraph = text => { - if (text.indexOf('${text}

` } - renderer.blockquote = text => { - text = text.replace(//, `

`) - return `

${text}
` + this.setOptions = newOpts => { + this.opts = merge(this.opts, newOpts) } - renderer.code = (text, infoString) => { - text = text.replace(//g, '>') - let lines = text.split('\n') - let codeLines = [] - let numbers = [] + this.hasFootnotes = () => footnotes.length !== 0 - for (let i = 0; i < lines.length; i++) { - const line = lines[i] - codeLines.push(`${(line || '
')}`) - numbers.push('
  • ') - } - let lang = infoString || '' + this.getRenderer = (status) => { + footnotes = [] + footnoteIndex = 0 - return ` + styleMapping = this.buildTheme(this.opts.theme) + let renderer = new marked.Renderer() + + renderer.heading = (text, level) => { + switch (level) { + case 1: + return `

    ${text}

    ` + case 2: + return `

    ${text}

    ` + case 3: + return `

    ${text}

    ` + default: + return `

    ${text}

    ` + } + } + renderer.paragraph = text => { + if (text.indexOf('${text}

    ` + } + + renderer.blockquote = text => { + text = text.replace(//, `

    `) + return `

    ${text}
    ` + } + renderer.code = (text, infoString) => { + text = text.replace(//g, '>') + + let lines = text.split('\n') + let codeLines = [] + let numbers = [] + + for (let i = 0; i < lines.length; i++) { + const line = lines[i] + codeLines.push(`${(line || '
    ')}    `) + numbers.push('
  • ') + } + let lang = infoString || '' + + return `
      ${numbers.join('')}
    @@ -145,53 +145,53 @@ const WxRenderer = function (opts) {
    ` - } - renderer.codespan = (text, infoString) => `${text}` - renderer.listitem = text => `<%s/>${text}` - - renderer.list = (text, ordered, start) => { - text = text.replace(/<\/*p.*?>/g, '') - let segments = text.split(`<%s/>`) - if (!ordered) { - text = segments.join('•') - return `

    ${text}

    ` - } - text = segments[0] - for (let i = 1; i < segments.length; i++) { - text = text + i + '.' + segments[i] - } - return `

    ${text}

    ` - } - renderer.image = (href, title, text) => { - let subText = '' - if (text) { - subText = `
    ${text}
    ` - } - let figureStyles = getStyles('figure') - let imgStyles = getStyles(ENV_STRETCH_IMAGE ? 'image' : 'image_org') - return `
    ${text}${subText}
    ` - } - renderer.link = (href, title, text) => { - if (href.indexOf('https://mp.weixin.qq.com') === 0) { - return `${text}` - } else if (href === text) { - return text - } else { - if (status) { - let ref = addFootnote(title || text, href) - return `${text}[${ref}]` - } else { - return text } - } + renderer.codespan = (text, infoString) => `${text}` + renderer.listitem = text => `<%s/>${text}` + + renderer.list = (text, ordered, start) => { + text = text.replace(/<\/*p.*?>/g, '') + let segments = text.split(`<%s/>`) + if (!ordered) { + text = segments.join('•') + return `

    ${text}

    ` + } + text = segments[0] + for (let i = 1; i < segments.length; i++) { + text = text + i + '.' + segments[i] + } + return `

    ${text}

    ` + } + renderer.image = (href, title, text) => { + let subText = '' + if (text) { + subText = `
    ${text}
    ` + } + let figureStyles = getStyles('figure') + let imgStyles = getStyles(ENV_STRETCH_IMAGE ? 'image' : 'image_org') + return `
    ${text}${subText}
    ` + } + renderer.link = (href, title, text) => { + if (href.indexOf('https://mp.weixin.qq.com') === 0) { + return `${text}` + } else if (href === text) { + return text + } else { + if (status) { + let ref = addFootnote(title || text, href) + return `${text}[${ref}]` + } else { + return text + } + } + } + renderer.strong = text => `${text}` + renderer.em = text => `${text}` + renderer.table = (header, body) => `
    ${header}${body}
    ` + // renderer.tablerow = (text) => `${text}`; + renderer.tablecell = (text, flags) => `${text}` + renderer.hr = () => `
    ` + return renderer } - renderer.strong = text => `${text}` - renderer.em = text => `${text}` - renderer.table = (header, body) => `
    ${header}${body}
    ` - // renderer.tablerow = (text) => `${text}`; - renderer.tablecell = (text, flags) => `${text}` - renderer.hr = () => `
    ` - return renderer - } } export default WxRenderer diff --git a/src/scripts/sync-scroll.js b/src/scripts/sync-scroll.js index c9e31bb..611ce62 100644 --- a/src/scripts/sync-scroll.js +++ b/src/scripts/sync-scroll.js @@ -1,23 +1,23 @@ // 左右栏同步滚动 $(document).ready(() => { - let timeout; - $('div.CodeMirror-scroll, #preview').on("scroll", function callback() { - clearTimeout(timeout); + let timeout; + $('div.CodeMirror-scroll, #preview').on("scroll", function callback() { + clearTimeout(timeout); - let source = $(this), - target = $(source.is("#preview") ? 'div.CodeMirror-scroll' : '#preview'); + let source = $(this), + target = $(source.is("#preview") ? 'div.CodeMirror-scroll' : '#preview'); - target.off("scroll"); + target.off("scroll"); - let source0 = source[0]; - let target0 = target[0]; + let source0 = source[0]; + let target0 = target[0]; - let percentage = source0.scrollTop / (source0.scrollHeight - source0.offsetHeight); - let height = percentage * (target0.scrollHeight - target0.offsetHeight); - target0.scrollTo(0, height); + let percentage = source0.scrollTop / (source0.scrollHeight - source0.offsetHeight); + let height = percentage * (target0.scrollHeight - target0.offsetHeight); + target0.scrollTo(0, height); - timeout = setTimeout(() => { - target.on("scroll", callback); - }, 100); - }); + timeout = setTimeout(() => { + target.on("scroll", callback); + }, 100); + }); }); diff --git a/src/scripts/util.js b/src/scripts/util.js index 106b214..aa48894 100644 --- a/src/scripts/util.js +++ b/src/scripts/util.js @@ -1,11 +1,25 @@ -import default_theme from './themes/default-theme' +import default_theme from './themes/default-theme' import prettier from 'prettier/standalone' import prettierMarkdown from 'prettier/parser-markdown' // 设置自定义颜色 -export function setColorWithTemplate (template) { - return function (color) { +export 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.block.h4['color'] = color + custom_theme.inline.strong['color'] = color + return custom_theme + } +} + +export const setColorWithCustomTemplate = function setColorWithCustomTemplate( + template, + color +) { let custom_theme = JSON.parse(JSON.stringify(template)) custom_theme.block.h1['border-bottom'] = `2px solid ${color}` custom_theme.block.h2['background'] = color @@ -13,83 +27,69 @@ export function setColorWithTemplate (template) { custom_theme.block.h4['color'] = color custom_theme.inline.strong['color'] = color return custom_theme - } -} - -export const setColorWithCustomTemplate = function setColorWithCustomTemplate ( - template, - 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.block.h4['color'] = color - custom_theme.inline.strong['color'] = color - return custom_theme } // 设置自定义字体大小 -export function setFontSizeWithTemplate (template) { - return function (fontSize) { - let custom_theme = JSON.parse(JSON.stringify(template)) - custom_theme.block.h1['font-size'] = `${fontSize * 1.14}px` - custom_theme.block.h2['font-size'] = `${fontSize * 1.1}px` - custom_theme.block.h3['font-size'] = `${fontSize}px` - custom_theme.block.h4['font-size'] = `${fontSize}px` - return custom_theme - } +export function setFontSizeWithTemplate(template) { + return function (fontSize) { + let custom_theme = JSON.parse(JSON.stringify(template)) + custom_theme.block.h1['font-size'] = `${fontSize * 1.14}px` + custom_theme.block.h2['font-size'] = `${fontSize * 1.1}px` + custom_theme.block.h3['font-size'] = `${fontSize}px` + custom_theme.block.h4['font-size'] = `${fontSize}px` + return custom_theme + } } export const setColor = setColorWithTemplate(default_theme) export const setFontSize = setFontSizeWithTemplate(default_theme) -export function customCssWithTemplate (jsonString, color, theme) { - let custom_theme = JSON.parse(JSON.stringify(theme)) - // block - 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.block.h4['color'] = color - custom_theme.inline.strong['color'] = color +export function customCssWithTemplate(jsonString, color, theme) { + let custom_theme = JSON.parse(JSON.stringify(theme)) + // block + 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.block.h4['color'] = color + custom_theme.inline.strong['color'] = color - custom_theme.block.h1 = Object.assign(custom_theme.block.h1, jsonString.h1) - custom_theme.block.h2 = Object.assign(custom_theme.block.h2, jsonString.h2) - custom_theme.block.h3 = Object.assign(custom_theme.block.h3, jsonString.h3) - custom_theme.block.h4 = Object.assign(custom_theme.block.h4, jsonString.h4) - custom_theme.block.p = Object.assign(custom_theme.block.p, jsonString.p) - custom_theme.block.blockquote = Object.assign( - custom_theme.block.blockquote, - jsonString.blockquote - ) - custom_theme.block.blockquote_p = Object.assign( - custom_theme.block.blockquote_p, - jsonString.blockquote_p - ) - custom_theme.block.image = Object.assign( - custom_theme.block.image, - jsonString.image - ) + custom_theme.block.h1 = Object.assign(custom_theme.block.h1, jsonString.h1) + custom_theme.block.h2 = Object.assign(custom_theme.block.h2, jsonString.h2) + custom_theme.block.h3 = Object.assign(custom_theme.block.h3, jsonString.h3) + custom_theme.block.h4 = Object.assign(custom_theme.block.h4, jsonString.h4) + custom_theme.block.p = Object.assign(custom_theme.block.p, jsonString.p) + custom_theme.block.blockquote = Object.assign( + custom_theme.block.blockquote, + jsonString.blockquote + ) + custom_theme.block.blockquote_p = Object.assign( + custom_theme.block.blockquote_p, + jsonString.blockquote_p + ) + custom_theme.block.image = Object.assign( + custom_theme.block.image, + jsonString.image + ) - // inline - custom_theme.inline.strong = Object.assign( - custom_theme.inline.strong, - jsonString.strong - ) - custom_theme.inline.codespan = Object.assign( - custom_theme.inline.codespan, - jsonString.codespan - ) - custom_theme.inline.link = Object.assign( - custom_theme.inline.link, - jsonString.link - ) - custom_theme.inline.wx_link = Object.assign( - custom_theme.inline.wx_link, - jsonString.wx_link - ) + // inline + custom_theme.inline.strong = Object.assign( + custom_theme.inline.strong, + jsonString.strong + ) + custom_theme.inline.codespan = Object.assign( + custom_theme.inline.codespan, + jsonString.codespan + ) + custom_theme.inline.link = Object.assign( + custom_theme.inline.link, + jsonString.link + ) + custom_theme.inline.wx_link = Object.assign( + custom_theme.inline.wx_link, + jsonString.wx_link + ) - return custom_theme + return custom_theme } /** @@ -97,77 +97,78 @@ export function customCssWithTemplate (jsonString, color, theme) { * * @param {css字符串} css */ -export function css2json (css) { - // 移除CSS所有注释 - while ( - (open = css.indexOf('/*')) !== -1 && - (close = css.indexOf('*/')) !== -1 - ) { - css = css.substring(0, open) + css.substring(close + 2) - } - - // 初始化返回值 - let json = {} - - while (css.length > 0 && css.indexOf('{') !== -1 && css.indexOf('}') !== -1) { - // 存储第一个左/右花括号的下标 - const lbracket = css.indexOf('{') - const rbracket = css.indexOf('}') - - // 第一步：将声明转换为Object，如： - // `font: 'Times New Roman' 1em; color: #ff0000; margin-top: 1em;` - // ==> - // `{"font": "'Times New Roman' 1em", "color": "#ff0000", "margin-top": "1em"}` - - // 辅助方法：将array转为object - function toObject (array) { - let ret = {} - array.forEach(e => { - const index = e.indexOf(':') - const property = e.substring(0, index).trim() - const value = e.substring(index + 1).trim() - ret[property] = value - }) - return ret +export function css2json(css) { + // 移除CSS所有注释 + let open, close; + while ( + (open = css.indexOf('/*')) !== -1 && + (close = css.indexOf('*/')) !== -1 + ) { + css = css.substring(0, open) + css.substring(close + 2) } - // 切割声明块并移除空白符，然后放入数组中 - let declarations = css - .substring(lbracket + 1, rbracket) - .split(';') - .map(e => e.trim()) - .filter(e => e.length > 0) // 移除所有""空值 + // 初始化返回值 + let json = {} - // 转为Object对象 - declarations = toObject(declarations) + while (css.length > 0 && css.indexOf('{') !== -1 && css.indexOf('}') !== -1) { + // 存储第一个左/右花括号的下标 + const lbracket = css.indexOf('{') + const rbracket = css.indexOf('}') - // 第二步：选择器处理，每个选择器会与它对应的声明相关联，如： - // `h1, p#bar {color: red}` - // ==> - // {"h1": {color: red}, "p#bar": {color: red}} + // 第一步：将声明转换为Object，如： + // `font: 'Times New Roman' 1em; color: #ff0000; margin-top: 1em;` + // ==> + // `{"font": "'Times New Roman' 1em", "color": "#ff0000", "margin-top": "1em"}` - let selectors = css - .substring(0, lbracket) - // 以,切割，并移除空格：`"h1, p#bar, span.foo"` => ["h1", "p#bar", "span.foo"] - .split(',') - .map(selector => selector.trim()) + // 辅助方法：将array转为object + function toObject(array) { + let ret = {} + array.forEach(e => { + const index = e.indexOf(':') + const property = e.substring(0, index).trim() + const value = e.substring(index + 1).trim() + ret[property] = value + }) + return ret + } - // 迭代赋值 - selectors.forEach(selector => { - // 若不存在，则先初始化 - if (!json[selector]) json[selector] = {} - // 赋值到JSON - Object.keys(declarations).forEach(key => { - json[selector][key] = declarations[key] - }) - }) + // 切割声明块并移除空白符，然后放入数组中 + let declarations = css + .substring(lbracket + 1, rbracket) + .split(';') + .map(e => e.trim()) + .filter(e => e.length > 0) // 移除所有""空值 - // 继续下个声明块 - css = css.slice(rbracket + 1).trim() - } + // 转为Object对象 + declarations = toObject(declarations) - // 返回JSON形式的结果串 - return json + // 第二步：选择器处理，每个选择器会与它对应的声明相关联，如： + // `h1, p#bar {color: red}` + // ==> + // {"h1": {color: red}, "p#bar": {color: red}} + + let selectors = css + .substring(0, lbracket) + // 以,切割，并移除空格：`"h1, p#bar, span.foo"` => ["h1", "p#bar", "span.foo"] + .split(',') + .map(selector => selector.trim()) + + // 迭代赋值 + selectors.forEach(selector => { + // 若不存在，则先初始化 + if (!json[selector]) json[selector] = {} + // 赋值到JSON + Object.keys(declarations).forEach(key => { + json[selector][key] = declarations[key] + }) + }) + + // 继续下个声明块 + css = css.slice(rbracket + 1).trim() + } + + // 返回JSON形式的结果串 + return json } @@ -197,9 +198,9 @@ export function isImageIllegal(file) { } export function formatDoc(content) { - const doc = prettier.format(content, { - parser: 'markdown', - plugins: [prettierMarkdown] - }) - return doc -} \ No newline at end of file + const doc = prettier.format(content, { + parser: 'markdown', + plugins: [prettierMarkdown] + }) + return doc +}