├── .vscode └── extensions.json ├── README.md ├── assets ├── index.087582a9.js ├── index.087582a9.js.map ├── index.0c018ea8.js ├── index.0c0f448f.js ├── index.10c808da.js ├── index.10c808da.js.map ├── index.17062140.js ├── index.17062140.js.map ├── index.1ae0a331.css ├── index.23bb81b3.js ├── index.2ca8d1af.css ├── index.307df57e.css ├── index.3da8312c.css ├── index.3f48d014.js ├── index.417f99cf.css ├── index.4ec01998.css ├── index.4f13e4de.css ├── index.4febfb5d.js ├── index.53356a78.js ├── index.58b534b8.css ├── index.59299003.css ├── index.6497caff.js ├── index.82c22f55.css ├── index.86ac3985.css ├── index.b8999e71.css ├── index.cc34a44e.js ├── index.d5ac9c3e.js ├── index.d5ac9c3e.js.map ├── index.e2664d1b.css ├── index.ec365a63.css ├── index.ed47f019.css ├── index.f153ed92.js ├── index.f6a600c2.js ├── index.f6a600c2.js.map ├── index.fa4275cd.js ├── index.fa71bd79.css └── index.fac70e70.js ├── demo ├── .gitignore ├── index.html ├── package.json ├── public │ └── favicon.ico ├── src │ ├── App.vue │ ├── article.md │ ├── lib │ │ └── rehype-highlight.js │ ├── main.js │ └── themes │ │ ├── markdown-nice.less │ │ └── sspai.less └── vite.config.js ├── favicon.ico └── index.html /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 基于`CodeMirror`和`unified`实现的一个能精确同步滚动的`Markdown`编辑器 2 | 3 | 文章：[如何实现一个能精确同步滚动的Markdown编辑器](https://juejin.cn/post/7100562751596003342) 4 | -------------------------------------------------------------------------------- /assets/index.1ae0a331.css: -------------------------------------------------------------------------------- 1 | .CodeMirror{font-family:monospace;height:300px;color:#000;direction:ltr}.CodeMirror-lines{padding:4px 0}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{padding:0 4px}.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{background-color:#fff}.CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}.CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}.CodeMirror-guttermarker{color:#000}.CodeMirror-guttermarker-subtle{color:#999}.CodeMirror-cursor{border-left:1px solid black;border-right:none;width:0}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}.cm-fat-cursor div.CodeMirror-cursors{z-index:1}.cm-fat-cursor .CodeMirror-line::selection,.cm-fat-cursor .CodeMirror-line>span::selection,.cm-fat-cursor .CodeMirror-line>span>span::selection{background:transparent}.cm-fat-cursor .CodeMirror-line::-moz-selection,.cm-fat-cursor .CodeMirror-line>span::-moz-selection,.cm-fat-cursor .CodeMirror-line>span>span::-moz-selection{background:transparent}.cm-fat-cursor{caret-color:transparent}@-moz-keyframes blink{50%{background-color:transparent}}@-webkit-keyframes blink{50%{background-color:transparent}}@keyframes blink{50%{background-color:transparent}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-rulers{position:absolute;left:0;right:0;top:-50px;bottom:0;overflow:hidden}.CodeMirror-ruler{border-left:1px solid #ccc;top:0;bottom:0;position:absolute}.cm-s-default .cm-header{color:#00f}.cm-s-default .cm-quote{color:#090}.cm-negative{color:#d44}.cm-positive{color:#292}.cm-header,.cm-strong{font-weight:700}.cm-em{font-style:italic}.cm-link{text-decoration:underline}.cm-strikethrough{text-decoration:line-through}.cm-s-default .cm-keyword{color:#708}.cm-s-default .cm-atom{color:#219}.cm-s-default .cm-number{color:#164}.cm-s-default .cm-def{color:#00f}.cm-s-default .cm-variable-2{color:#05a}.cm-s-default .cm-variable-3,.cm-s-default .cm-type{color:#085}.cm-s-default .cm-comment{color:#a50}.cm-s-default .cm-string{color:#a11}.cm-s-default .cm-string-2{color:#f50}.cm-s-default .cm-meta,.cm-s-default .cm-qualifier{color:#555}.cm-s-default .cm-builtin{color:#30a}.cm-s-default .cm-bracket{color:#997}.cm-s-default .cm-tag{color:#170}.cm-s-default .cm-attribute{color:#00c}.cm-s-default .cm-hr{color:#999}.cm-s-default .cm-link{color:#00c}.cm-s-default .cm-error,.cm-invalidchar{color:red}.CodeMirror-composing{border-bottom:2px solid}div.CodeMirror span.CodeMirror-matchingbracket{color:#0b0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#a22}.CodeMirror-matchingtag{background:rgba(255,150,0,.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{position:relative;overflow:hidden;background:white}.CodeMirror-scroll{overflow:scroll!important;margin-bottom:-50px;margin-right:-50px;padding-bottom:50px;height:100%;outline:none;position:relative;z-index:0}.CodeMirror-sizer{position:relative;border-right:50px solid transparent}.CodeMirror-vscrollbar,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{position:absolute;z-index:6;display:none;outline:none}.CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}.CodeMirror-scrollbar-filler{right:0;bottom:0}.CodeMirror-gutter-filler{left:0;bottom:0}.CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}.CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-50px}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:none!important;border:none!important}.CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}.CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}.CodeMirror-gutter-wrapper ::selection{background-color:transparent}.CodeMirror-gutter-wrapper ::-moz-selection{background-color:transparent}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border-width:0;background:transparent;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-font-variant-ligatures:contextual;font-variant-ligatures:contextual}.CodeMirror-wrap pre.CodeMirror-line,.CodeMirror-wrap pre.CodeMirror-line-like{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-linebackground{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}.CodeMirror-linewidget{position:relative;z-index:2;padding:.1px}.CodeMirror-rtl pre{direction:rtl}.CodeMirror-code{outline:none}.CodeMirror-scroll,.CodeMirror-sizer,.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber{-moz-box-sizing:content-box;box-sizing:content-box}.CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}.CodeMirror-cursor{position:absolute;pointer-events:none}.CodeMirror-measure pre{position:static}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}div.CodeMirror-dragcursors,.CodeMirror-focused div.CodeMirror-cursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{background:#d7d4f0}.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}.cm-searching{background-color:#ffa;background-color:#ff06}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:""}span.CodeMirror-selectedtext{background:none}.previewArea h1{font-size:2.2em;font-weight:700;line-height:1.1;padding-top:16px;margin-bottom:4px}.previewArea h2,.previewArea h3,.previewArea h4,.previewArea h5,.previewArea h6{line-height:1.5em;margin-top:2.2em;margin-bottom:4px}.previewArea h2{font-size:1.4em;margin:40px 10px 20px 0;padding-left:9px;border-left:6px solid #ff7e79;font-weight:700;line-height:1.4}.previewArea h3{font-weight:700;font-size:1.2em;line-height:1.4;margin:10px 0 5px;padding-top:10px}.previewArea h4{font-weight:700;text-transform:uppercase;font-size:1.1em;line-height:1.4;margin:10px 0 5px;padding-top:10px}.previewArea h5,.previewArea h6{font-size:.9em}.previewArea h5{font-weight:700;text-transform:uppercase}.previewArea h6{font-weight:400;color:#aaa}.previewArea img{width:100%;border-radius:5px;display:block;margin-bottom:15px;height:auto}.previewArea dl,.previewArea ol,.previewArea ul{margin-top:12px;margin-bottom:20px;padding-left:5%;line-height:1.8}.previewArea p{margin:0 0 20px;padding:0;line-height:1.8}.previewArea a{color:#f22f27;text-decoration:none}.previewArea a:hover{color:#f55852;text-decoration:underline}.previewArea a:focus{outline-offset:-2px}.previewArea blockquote{font-size:1em;font-style:normal;padding:30px 38px;margin:0 0 15px;position:relative;line-height:1.8;text-indent:0;border:none;color:#888}.previewArea blockquote:before{content:"\201c";left:12px;top:0;color:#e0e0e0;font-size:4em;font-family:Arial,serif;line-height:1em;font-weight:700;position:absolute}.previewArea blockquote:after{content:"\201d";right:12px;bottom:-26px;color:#e0e0e0;font-size:4em;font-family:Arial,serif;line-height:1em;font-weight:700;position:absolute;bottom:-31px}.previewArea strong,.previewArea dfn{font-weight:700}.previewArea em,.previewArea dfn{font-style:italic;font-weight:400}.previewArea del{text-decoration:line-through}.previewArea pre{margin:0 0 25px;font-size:13px;line-height:1.42857;word-break:break-all;word-wrap:break-word;border-radius:4px;white-space:pre-wrap;display:block;background:#f8f8f8;padding:10px 20px;border:none;color:#666;font-family:Courier,sans-serif}.previewArea code{color:#c7254e;background-color:#f9f2f4;border-radius:4px;font-family:Menlo,Monaco,Consolas,Courier New,monospace;padding:2px 4px;font-size:90%}.previewArea p>code{color:#c7264e;background-color:#f9f2f4;font-size:.95em;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px}.previewArea figure{margin:1em 0}.previewArea figcaption{font-size:.75em;padding:.5em 2em;margin-bottom:2em}.previewArea figure img{margin-bottom:0}.previewArea hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.previewArea ol p,.previewArea ul p{margin-bottom:0}.previewArea li{margin-bottom:.75em;margin-top:.75em}.previewArea ol#footnotes{font-size:.95em;padding-top:1em;border-top:1px solid #eaeaea;counter-reset:footer-counter;list-style:none;color:#555;padding-left:5%;margin:20px 0}.previewArea ol#footnotes li{margin-bottom:10px;margin-left:16px;font-weight:400;line-height:2;list-style-type:none}.previewArea ol#footnotes li:before{content:counter(footer-counter) ". ";counter-increment:footer-counter;font-weight:800;font-size:.95em}@keyframes highfade{0%{background-color:none}20%{background-color:#ff0}to{background-color:none}}@-webkit-keyframes highfade{0%{background-color:none}20%{background-color:#ff0}to{background-color:none}}.previewArea a:target,.previewArea ol#footnotes li:target,.previewArea sup a:target{animation-name:highfade;animation-duration:2s;animation-iteration-count:1;animation-timing-function:ease-in-out;-webkit-animation-name:highfade;-webkit-animation-duration:2s;-webkit-animation-iteration-count:1;-webkit-animation-timing-function:ease-in-out}.previewArea a:target{border:0;outline:0}.container[data-v-58f1a4be]{position:fixed;left:0;top:0;width:100%;height:100%;display:flex}.container .editorArea[data-v-58f1a4be]{width:50%;height:100%;border-right:1px solid #e1e4e8}.container .editorArea[data-v-58f1a4be] .CodeMirror{height:100%;font-size:16px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;box-sizing:border-box;background-color:#f8f9fa}.container .previewArea[data-v-58f1a4be]{position:relative;width:50%;height:100%;padding:20px;overflow:auto} 2 | -------------------------------------------------------------------------------- /assets/index.2ca8d1af.css: -------------------------------------------------------------------------------- 1 | .CodeMirror{font-family:monospace;height:300px;color:#000;direction:ltr}.CodeMirror-lines{padding:4px 0}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{padding:0 4px}.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{background-color:#fff}.CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}.CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}.CodeMirror-guttermarker{color:#000}.CodeMirror-guttermarker-subtle{color:#999}.CodeMirror-cursor{border-left:1px solid black;border-right:none;width:0}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}.cm-fat-cursor div.CodeMirror-cursors{z-index:1}.cm-fat-cursor .CodeMirror-line::selection,.cm-fat-cursor .CodeMirror-line>span::selection,.cm-fat-cursor .CodeMirror-line>span>span::selection{background:transparent}.cm-fat-cursor .CodeMirror-line::-moz-selection,.cm-fat-cursor .CodeMirror-line>span::-moz-selection,.cm-fat-cursor .CodeMirror-line>span>span::-moz-selection{background:transparent}.cm-fat-cursor{caret-color:transparent}@-moz-keyframes blink{50%{background-color:transparent}}@-webkit-keyframes blink{50%{background-color:transparent}}@keyframes blink{50%{background-color:transparent}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-rulers{position:absolute;left:0;right:0;top:-50px;bottom:0;overflow:hidden}.CodeMirror-ruler{border-left:1px solid #ccc;top:0;bottom:0;position:absolute}.cm-s-default .cm-header{color:#00f}.cm-s-default .cm-quote{color:#090}.cm-negative{color:#d44}.cm-positive{color:#292}.cm-header,.cm-strong{font-weight:700}.cm-em{font-style:italic}.cm-link{text-decoration:underline}.cm-strikethrough{text-decoration:line-through}.cm-s-default .cm-keyword{color:#708}.cm-s-default .cm-atom{color:#219}.cm-s-default .cm-number{color:#164}.cm-s-default .cm-def{color:#00f}.cm-s-default .cm-variable-2{color:#05a}.cm-s-default .cm-variable-3,.cm-s-default .cm-type{color:#085}.cm-s-default .cm-comment{color:#a50}.cm-s-default .cm-string{color:#a11}.cm-s-default .cm-string-2{color:#f50}.cm-s-default .cm-meta,.cm-s-default .cm-qualifier{color:#555}.cm-s-default .cm-builtin{color:#30a}.cm-s-default .cm-bracket{color:#997}.cm-s-default .cm-tag{color:#170}.cm-s-default .cm-attribute{color:#00c}.cm-s-default .cm-hr{color:#999}.cm-s-default .cm-link{color:#00c}.cm-s-default .cm-error,.cm-invalidchar{color:red}.CodeMirror-composing{border-bottom:2px solid}div.CodeMirror span.CodeMirror-matchingbracket{color:#0b0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#a22}.CodeMirror-matchingtag{background:rgba(255,150,0,.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{position:relative;overflow:hidden;background:white}.CodeMirror-scroll{overflow:scroll!important;margin-bottom:-50px;margin-right:-50px;padding-bottom:50px;height:100%;outline:none;position:relative;z-index:0}.CodeMirror-sizer{position:relative;border-right:50px solid transparent}.CodeMirror-vscrollbar,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{position:absolute;z-index:6;display:none;outline:none}.CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}.CodeMirror-scrollbar-filler{right:0;bottom:0}.CodeMirror-gutter-filler{left:0;bottom:0}.CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}.CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-50px}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:none!important;border:none!important}.CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}.CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}.CodeMirror-gutter-wrapper ::selection{background-color:transparent}.CodeMirror-gutter-wrapper ::-moz-selection{background-color:transparent}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border-width:0;background:transparent;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-font-variant-ligatures:contextual;font-variant-ligatures:contextual}.CodeMirror-wrap pre.CodeMirror-line,.CodeMirror-wrap pre.CodeMirror-line-like{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-linebackground{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}.CodeMirror-linewidget{position:relative;z-index:2;padding:.1px}.CodeMirror-rtl pre{direction:rtl}.CodeMirror-code{outline:none}.CodeMirror-scroll,.CodeMirror-sizer,.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber{-moz-box-sizing:content-box;box-sizing:content-box}.CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}.CodeMirror-cursor{position:absolute;pointer-events:none}.CodeMirror-measure pre{position:static}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}div.CodeMirror-dragcursors,.CodeMirror-focused div.CodeMirror-cursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{background:#d7d4f0}.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}.cm-searching{background-color:#ffa;background-color:#ff06}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:""}span.CodeMirror-selectedtext{background:none}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*! 2 | Theme: Agate 3 | Author: (c) Taufik Nurrohman 4 | Maintainer: @taufik-nurrohman 5 | Updated: 2021-04-24 6 | 7 | #333 8 | #62c8f3 9 | #7bd694 10 | #888 11 | #a2fca2 12 | #ade5fc 13 | #b8d8a2 14 | #c6b4f0 15 | #d36363 16 | #fc9b9b 17 | #fcc28c 18 | #ffa 19 | #fff 20 | */.hljs{background:#333;color:#fff}.hljs-doctag,.hljs-meta-keyword,.hljs-name,.hljs-strong{font-weight:700}.hljs-code,.hljs-emphasis{font-style:italic}.hljs-section,.hljs-tag{color:#62c8f3}.hljs-selector-class,.hljs-selector-id,.hljs-template-variable,.hljs-variable{color:#ade5fc}.hljs-meta-string,.hljs-string{color:#a2fca2}.hljs-attr,.hljs-quote,.hljs-selector-attr{color:#7bd694}.hljs-tag .hljs-attr{color:inherit}.hljs-attribute,.hljs-title,.hljs-type{color:#ffa}.hljs-number,.hljs-symbol{color:#d36363}.hljs-bullet,.hljs-template-tag{color:#b8d8a2}.hljs-built_in,.hljs-keyword,.hljs-literal,.hljs-selector-tag{color:#fcc28c}.hljs-code,.hljs-comment,.hljs-formula{color:#888}.hljs-link,.hljs-regexp,.hljs-selector-pseudo{color:#c6b4f0}.hljs-meta{color:#fc9b9b}.hljs-deletion{background:#fc9b9b;color:#333}.hljs-addition{background:#a2fca2;color:#333}.hljs-subst{color:#fff}.hljs a{color:inherit}.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}.hljs mark{background:#555;color:inherit}.previewArea h1{font-size:2.2em;font-weight:700;line-height:1.1;padding-top:16px;margin-bottom:4px}.previewArea h2,.previewArea h3,.previewArea h4,.previewArea h5,.previewArea h6{line-height:1.5em;margin-top:2.2em;margin-bottom:4px}.previewArea h2{font-size:1.4em;margin:40px 10px 20px 0;padding-left:9px;border-left:6px solid #ff7e79;font-weight:700;line-height:1.4}.previewArea h3{font-weight:700;font-size:1.2em;line-height:1.4;margin:10px 0 5px;padding-top:10px}.previewArea h4{font-weight:700;text-transform:uppercase;font-size:1.1em;line-height:1.4;margin:10px 0 5px;padding-top:10px}.previewArea h5,.previewArea h6{font-size:.9em}.previewArea h5{font-weight:700;text-transform:uppercase}.previewArea h6{font-weight:400;color:#aaa}.previewArea img{width:100%;border-radius:5px;display:block;margin-bottom:15px;height:auto}.previewArea dl,.previewArea ol,.previewArea ul{margin-top:12px;margin-bottom:20px;padding-left:5%;line-height:1.8}.previewArea p{margin:0 0 20px;padding:0;line-height:1.8}.previewArea a{color:#f22f27;text-decoration:none}.previewArea a:hover{color:#f55852;text-decoration:underline}.previewArea a:focus{outline-offset:-2px}.previewArea blockquote{font-size:1em;font-style:normal;padding:30px 38px;margin:0 0 15px;position:relative;line-height:1.8;text-indent:0;border:none;color:#888}.previewArea blockquote:before{content:"\201c";left:12px;top:0;color:#e0e0e0;font-size:4em;font-family:Arial,serif;line-height:1em;font-weight:700;position:absolute}.previewArea blockquote:after{content:"\201d";right:12px;bottom:-26px;color:#e0e0e0;font-size:4em;font-family:Arial,serif;line-height:1em;font-weight:700;position:absolute;bottom:-31px}.previewArea strong,.previewArea dfn{font-weight:700}.previewArea em,.previewArea dfn{font-style:italic;font-weight:400}.previewArea del{text-decoration:line-through}.previewArea p>code{color:#c7264e;background-color:#f9f2f4;font-size:.95em;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px}.previewArea figure{margin:1em 0}.previewArea figcaption{font-size:.75em;padding:.5em 2em;margin-bottom:2em}.previewArea figure img{margin-bottom:0}.previewArea hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.previewArea ol p,.previewArea ul p{margin-bottom:0}.previewArea li{margin-bottom:.75em;margin-top:.75em}.previewArea ol#footnotes{font-size:.95em;padding-top:1em;border-top:1px solid #eaeaea;counter-reset:footer-counter;list-style:none;color:#555;padding-left:5%;margin:20px 0}.previewArea ol#footnotes li{margin-bottom:10px;margin-left:16px;font-weight:400;line-height:2;list-style-type:none}.previewArea ol#footnotes li:before{content:counter(footer-counter) ". ";counter-increment:footer-counter;font-weight:800;font-size:.95em}@keyframes highfade{0%{background-color:none}20%{background-color:#ff0}to{background-color:none}}@-webkit-keyframes highfade{0%{background-color:none}20%{background-color:#ff0}to{background-color:none}}.previewArea a:target,.previewArea ol#footnotes li:target,.previewArea sup a:target{animation-name:highfade;animation-duration:2s;animation-iteration-count:1;animation-timing-function:ease-in-out;-webkit-animation-name:highfade;-webkit-animation-duration:2s;-webkit-animation-iteration-count:1;-webkit-animation-timing-function:ease-in-out}.previewArea a:target{border:0;outline:0}.previewArea table{display:table;text-align:left}.previewArea tbody{border:0}.previewArea table tr{border:0;border-top:1px solid #ccc;background-color:#fff}.previewArea table tr:nth-child(2n){background-color:#f8f8f8}.previewArea table tr th,.previewArea table tr td{font-size:16px;border:1px solid #ccc;padding:5px 10px;text-align:left}.previewArea table tr th{font-weight:700;background-color:#f0f0f0}*{box-sizing:border-box;margin:0;padding:0}.container[data-v-4326d240]{position:fixed;left:0;top:0;width:100%;height:100%;display:flex}.container .editorArea[data-v-4326d240]{width:50%;height:100%;border-right:1px solid #e1e4e8;flex-shrink:0}.container .editorArea[data-v-4326d240] .CodeMirror{height:100%;font-size:16px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;box-sizing:border-box;background-color:#f8f9fa}.container .previewArea[data-v-4326d240]{position:relative;width:50%;height:100%;padding:20px;overflow:auto;flex-shrink:0} 21 | -------------------------------------------------------------------------------- /assets/index.307df57e.css: -------------------------------------------------------------------------------- 1 | .CodeMirror{font-family:monospace;height:300px;color:#000;direction:ltr}.CodeMirror-lines{padding:4px 0}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{padding:0 4px}.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{background-color:#fff}.CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}.CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}.CodeMirror-guttermarker{color:#000}.CodeMirror-guttermarker-subtle{color:#999}.CodeMirror-cursor{border-left:1px solid black;border-right:none;width:0}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}.cm-fat-cursor div.CodeMirror-cursors{z-index:1}.cm-fat-cursor .CodeMirror-line::selection,.cm-fat-cursor .CodeMirror-line>span::selection,.cm-fat-cursor .CodeMirror-line>span>span::selection{background:transparent}.cm-fat-cursor .CodeMirror-line::-moz-selection,.cm-fat-cursor .CodeMirror-line>span::-moz-selection,.cm-fat-cursor .CodeMirror-line>span>span::-moz-selection{background:transparent}.cm-fat-cursor{caret-color:transparent}@-moz-keyframes blink{50%{background-color:transparent}}@-webkit-keyframes blink{50%{background-color:transparent}}@keyframes blink{50%{background-color:transparent}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-rulers{position:absolute;left:0;right:0;top:-50px;bottom:0;overflow:hidden}.CodeMirror-ruler{border-left:1px solid #ccc;top:0;bottom:0;position:absolute}.cm-s-default .cm-header{color:#00f}.cm-s-default .cm-quote{color:#090}.cm-negative{color:#d44}.cm-positive{color:#292}.cm-header,.cm-strong{font-weight:700}.cm-em{font-style:italic}.cm-link{text-decoration:underline}.cm-strikethrough{text-decoration:line-through}.cm-s-default .cm-keyword{color:#708}.cm-s-default .cm-atom{color:#219}.cm-s-default .cm-number{color:#164}.cm-s-default .cm-def{color:#00f}.cm-s-default .cm-variable-2{color:#05a}.cm-s-default .cm-variable-3,.cm-s-default .cm-type{color:#085}.cm-s-default .cm-comment{color:#a50}.cm-s-default .cm-string{color:#a11}.cm-s-default .cm-string-2{color:#f50}.cm-s-default .cm-meta,.cm-s-default .cm-qualifier{color:#555}.cm-s-default .cm-builtin{color:#30a}.cm-s-default .cm-bracket{color:#997}.cm-s-default .cm-tag{color:#170}.cm-s-default .cm-attribute{color:#00c}.cm-s-default .cm-hr{color:#999}.cm-s-default .cm-link{color:#00c}.cm-s-default .cm-error,.cm-invalidchar{color:red}.CodeMirror-composing{border-bottom:2px solid}div.CodeMirror span.CodeMirror-matchingbracket{color:#0b0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#a22}.CodeMirror-matchingtag{background:rgba(255,150,0,.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{position:relative;overflow:hidden;background:white}.CodeMirror-scroll{overflow:scroll!important;margin-bottom:-50px;margin-right:-50px;padding-bottom:50px;height:100%;outline:none;position:relative;z-index:0}.CodeMirror-sizer{position:relative;border-right:50px solid transparent}.CodeMirror-vscrollbar,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{position:absolute;z-index:6;display:none;outline:none}.CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}.CodeMirror-scrollbar-filler{right:0;bottom:0}.CodeMirror-gutter-filler{left:0;bottom:0}.CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}.CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-50px}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:none!important;border:none!important}.CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}.CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}.CodeMirror-gutter-wrapper ::selection{background-color:transparent}.CodeMirror-gutter-wrapper ::-moz-selection{background-color:transparent}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border-width:0;background:transparent;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-font-variant-ligatures:contextual;font-variant-ligatures:contextual}.CodeMirror-wrap pre.CodeMirror-line,.CodeMirror-wrap pre.CodeMirror-line-like{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-linebackground{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}.CodeMirror-linewidget{position:relative;z-index:2;padding:.1px}.CodeMirror-rtl pre{direction:rtl}.CodeMirror-code{outline:none}.CodeMirror-scroll,.CodeMirror-sizer,.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber{-moz-box-sizing:content-box;box-sizing:content-box}.CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}.CodeMirror-cursor{position:absolute;pointer-events:none}.CodeMirror-measure pre{position:static}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}div.CodeMirror-dragcursors,.CodeMirror-focused div.CodeMirror-cursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{background:#d7d4f0}.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}.cm-searching{background-color:#ffa;background-color:#ff06}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:""}span.CodeMirror-selectedtext{background:none}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*! 2 | Theme: Agate 3 | Author: (c) Taufik Nurrohman 4 | Maintainer: @taufik-nurrohman 5 | Updated: 2021-04-24 6 | 7 | #333 8 | #62c8f3 9 | #7bd694 10 | #888 11 | #a2fca2 12 | #ade5fc 13 | #b8d8a2 14 | #c6b4f0 15 | #d36363 16 | #fc9b9b 17 | #fcc28c 18 | #ffa 19 | #fff 20 | */.hljs{background:#333;color:#fff}.hljs-doctag,.hljs-meta-keyword,.hljs-name,.hljs-strong{font-weight:700}.hljs-code,.hljs-emphasis{font-style:italic}.hljs-section,.hljs-tag{color:#62c8f3}.hljs-selector-class,.hljs-selector-id,.hljs-template-variable,.hljs-variable{color:#ade5fc}.hljs-meta-string,.hljs-string{color:#a2fca2}.hljs-attr,.hljs-quote,.hljs-selector-attr{color:#7bd694}.hljs-tag .hljs-attr{color:inherit}.hljs-attribute,.hljs-title,.hljs-type{color:#ffa}.hljs-number,.hljs-symbol{color:#d36363}.hljs-bullet,.hljs-template-tag{color:#b8d8a2}.hljs-built_in,.hljs-keyword,.hljs-literal,.hljs-selector-tag{color:#fcc28c}.hljs-code,.hljs-comment,.hljs-formula{color:#888}.hljs-link,.hljs-regexp,.hljs-selector-pseudo{color:#c6b4f0}.hljs-meta{color:#fc9b9b}.hljs-deletion{background:#fc9b9b;color:#333}.hljs-addition{background:#a2fca2;color:#333}.hljs-subst{color:#fff}.hljs a{color:inherit}.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}.hljs mark{background:#555;color:inherit}.previewArea h1{font-size:2.2em;font-weight:700;line-height:1.1;padding-top:16px;margin-bottom:4px}.previewArea h2,.previewArea h3,.previewArea h4,.previewArea h5,.previewArea h6{line-height:1.5em;margin-top:2.2em;margin-bottom:4px}.previewArea h2{font-size:1.4em;margin:40px 10px 20px 0;padding-left:9px;border-left:6px solid #ff7e79;font-weight:700;line-height:1.4}.previewArea h3{font-weight:700;font-size:1.2em;line-height:1.4;margin:10px 0 5px;padding-top:10px}.previewArea h4{font-weight:700;text-transform:uppercase;font-size:1.1em;line-height:1.4;margin:10px 0 5px;padding-top:10px}.previewArea h5,.previewArea h6{font-size:.9em}.previewArea h5{font-weight:700;text-transform:uppercase}.previewArea h6{font-weight:400;color:#aaa}.previewArea img{width:100%;border-radius:5px;display:block;margin-bottom:15px;height:auto}.previewArea dl,.previewArea ol,.previewArea ul{margin-top:12px;margin-bottom:20px;padding-left:5%;line-height:1.8}.previewArea p{margin:0 0 20px;padding:0;line-height:1.8}.previewArea a{color:#f22f27;text-decoration:none}.previewArea a:hover{color:#f55852;text-decoration:underline}.previewArea a:focus{outline-offset:-2px}.previewArea blockquote{font-size:1em;font-style:normal;padding:30px 38px;margin:0 0 15px;position:relative;line-height:1.8;text-indent:0;border:none;color:#888}.previewArea blockquote:before{content:"\201c";left:12px;top:0;color:#e0e0e0;font-size:4em;font-family:Arial,serif;line-height:1em;font-weight:700;position:absolute}.previewArea blockquote:after{content:"\201d";right:12px;bottom:-26px;color:#e0e0e0;font-size:4em;font-family:Arial,serif;line-height:1em;font-weight:700;position:absolute;bottom:-31px}.previewArea strong,.previewArea dfn{font-weight:700}.previewArea em,.previewArea dfn{font-style:italic;font-weight:400}.previewArea del{text-decoration:line-through}.previewArea p>code{color:#c7264e;background-color:#f9f2f4;font-size:.95em;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px}.previewArea figure{margin:1em 0}.previewArea figcaption{font-size:.75em;padding:.5em 2em;margin-bottom:2em}.previewArea figure img{margin-bottom:0}.previewArea hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.previewArea ol p,.previewArea ul p{margin-bottom:0}.previewArea li{margin-bottom:.75em;margin-top:.75em}.previewArea ol#footnotes{font-size:.95em;padding-top:1em;border-top:1px solid #eaeaea;counter-reset:footer-counter;list-style:none;color:#555;padding-left:5%;margin:20px 0}.previewArea ol#footnotes li{margin-bottom:10px;margin-left:16px;font-weight:400;line-height:2;list-style-type:none}.previewArea ol#footnotes li:before{content:counter(footer-counter) ". ";counter-increment:footer-counter;font-weight:800;font-size:.95em}@keyframes highfade{0%{background-color:none}20%{background-color:#ff0}to{background-color:none}}@-webkit-keyframes highfade{0%{background-color:none}20%{background-color:#ff0}to{background-color:none}}.previewArea a:target,.previewArea ol#footnotes li:target,.previewArea sup a:target{animation-name:highfade;animation-duration:2s;animation-iteration-count:1;animation-timing-function:ease-in-out;-webkit-animation-name:highfade;-webkit-animation-duration:2s;-webkit-animation-iteration-count:1;-webkit-animation-timing-function:ease-in-out}.previewArea a:target{border:0;outline:0}.previewArea table{display:table;text-align:left}.previewArea tbody{border:0}.previewArea table tr{border:0;border-top:1px solid #ccc;background-color:#fff}.previewArea table tr:nth-child(2n){background-color:#f8f8f8}.previewArea table tr th,.previewArea table tr td{font-size:16px;border:1px solid #ccc;padding:5px 10px;text-align:left}.previewArea table tr th{font-weight:700;background-color:#f0f0f0}*{box-sizing:border-box;margin:0;padding:0}.container[data-v-53ef317a]{position:fixed;left:0;top:0;width:100%;height:100%;display:flex}.container .editorArea[data-v-53ef317a]{width:50%;height:100%;border-right:1px solid #e1e4e8;flex-shrink:0}.container .editorArea[data-v-53ef317a] .CodeMirror{height:100%;font-size:16px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;box-sizing:border-box;background-color:#f8f9fa}.container .previewArea[data-v-53ef317a]{position:relative;width:50%;height:100%;padding:20px;overflow:auto;flex-shrink:0} 21 | -------------------------------------------------------------------------------- /assets/index.3da8312c.css: -------------------------------------------------------------------------------- 1 | .CodeMirror{font-family:monospace;height:300px;color:#000;direction:ltr}.CodeMirror-lines{padding:4px 0}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{padding:0 4px}.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{background-color:#fff}.CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}.CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}.CodeMirror-guttermarker{color:#000}.CodeMirror-guttermarker-subtle{color:#999}.CodeMirror-cursor{border-left:1px solid black;border-right:none;width:0}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}.cm-fat-cursor div.CodeMirror-cursors{z-index:1}.cm-fat-cursor .CodeMirror-line::selection,.cm-fat-cursor .CodeMirror-line>span::selection,.cm-fat-cursor .CodeMirror-line>span>span::selection{background:transparent}.cm-fat-cursor .CodeMirror-line::-moz-selection,.cm-fat-cursor .CodeMirror-line>span::-moz-selection,.cm-fat-cursor .CodeMirror-line>span>span::-moz-selection{background:transparent}.cm-fat-cursor{caret-color:transparent}@-moz-keyframes blink{50%{background-color:transparent}}@-webkit-keyframes blink{50%{background-color:transparent}}@keyframes blink{50%{background-color:transparent}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-rulers{position:absolute;left:0;right:0;top:-50px;bottom:0;overflow:hidden}.CodeMirror-ruler{border-left:1px solid #ccc;top:0;bottom:0;position:absolute}.cm-s-default .cm-header{color:#00f}.cm-s-default .cm-quote{color:#090}.cm-negative{color:#d44}.cm-positive{color:#292}.cm-header,.cm-strong{font-weight:700}.cm-em{font-style:italic}.cm-link{text-decoration:underline}.cm-strikethrough{text-decoration:line-through}.cm-s-default .cm-keyword{color:#708}.cm-s-default .cm-atom{color:#219}.cm-s-default .cm-number{color:#164}.cm-s-default .cm-def{color:#00f}.cm-s-default .cm-variable-2{color:#05a}.cm-s-default .cm-variable-3,.cm-s-default .cm-type{color:#085}.cm-s-default .cm-comment{color:#a50}.cm-s-default .cm-string{color:#a11}.cm-s-default .cm-string-2{color:#f50}.cm-s-default .cm-meta,.cm-s-default .cm-qualifier{color:#555}.cm-s-default .cm-builtin{color:#30a}.cm-s-default .cm-bracket{color:#997}.cm-s-default .cm-tag{color:#170}.cm-s-default .cm-attribute{color:#00c}.cm-s-default .cm-hr{color:#999}.cm-s-default .cm-link{color:#00c}.cm-s-default .cm-error,.cm-invalidchar{color:red}.CodeMirror-composing{border-bottom:2px solid}div.CodeMirror span.CodeMirror-matchingbracket{color:#0b0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#a22}.CodeMirror-matchingtag{background:rgba(255,150,0,.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{position:relative;overflow:hidden;background:white}.CodeMirror-scroll{overflow:scroll!important;margin-bottom:-50px;margin-right:-50px;padding-bottom:50px;height:100%;outline:none;position:relative;z-index:0}.CodeMirror-sizer{position:relative;border-right:50px solid transparent}.CodeMirror-vscrollbar,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{position:absolute;z-index:6;display:none;outline:none}.CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}.CodeMirror-scrollbar-filler{right:0;bottom:0}.CodeMirror-gutter-filler{left:0;bottom:0}.CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}.CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-50px}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:none!important;border:none!important}.CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}.CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}.CodeMirror-gutter-wrapper ::selection{background-color:transparent}.CodeMirror-gutter-wrapper ::-moz-selection{background-color:transparent}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border-width:0;background:transparent;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-font-variant-ligatures:contextual;font-variant-ligatures:contextual}.CodeMirror-wrap pre.CodeMirror-line,.CodeMirror-wrap pre.CodeMirror-line-like{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-linebackground{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}.CodeMirror-linewidget{position:relative;z-index:2;padding:.1px}.CodeMirror-rtl pre{direction:rtl}.CodeMirror-code{outline:none}.CodeMirror-scroll,.CodeMirror-sizer,.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber{-moz-box-sizing:content-box;box-sizing:content-box}.CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}.CodeMirror-cursor{position:absolute;pointer-events:none}.CodeMirror-measure pre{position:static}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}div.CodeMirror-dragcursors,.CodeMirror-focused div.CodeMirror-cursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{background:#d7d4f0}.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}.cm-searching{background-color:#ffa;background-color:#ff06}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:""}span.CodeMirror-selectedtext{background:none}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*! 2 | Theme: Agate 3 | Author: (c) Taufik Nurrohman 4 | Maintainer: @taufik-nurrohman 5 | Updated: 2021-04-24 6 | 7 | #333 8 | #62c8f3 9 | #7bd694 10 | #888 11 | #a2fca2 12 | #ade5fc 13 | #b8d8a2 14 | #c6b4f0 15 | #d36363 16 | #fc9b9b 17 | #fcc28c 18 | #ffa 19 | #fff 20 | */.hljs{background:#333;color:#fff}.hljs-doctag,.hljs-meta-keyword,.hljs-name,.hljs-strong{font-weight:700}.hljs-code,.hljs-emphasis{font-style:italic}.hljs-section,.hljs-tag{color:#62c8f3}.hljs-selector-class,.hljs-selector-id,.hljs-template-variable,.hljs-variable{color:#ade5fc}.hljs-meta-string,.hljs-string{color:#a2fca2}.hljs-attr,.hljs-quote,.hljs-selector-attr{color:#7bd694}.hljs-tag .hljs-attr{color:inherit}.hljs-attribute,.hljs-title,.hljs-type{color:#ffa}.hljs-number,.hljs-symbol{color:#d36363}.hljs-bullet,.hljs-template-tag{color:#b8d8a2}.hljs-built_in,.hljs-keyword,.hljs-literal,.hljs-selector-tag{color:#fcc28c}.hljs-code,.hljs-comment,.hljs-formula{color:#888}.hljs-link,.hljs-regexp,.hljs-selector-pseudo{color:#c6b4f0}.hljs-meta{color:#fc9b9b}.hljs-deletion{background:#fc9b9b;color:#333}.hljs-addition{background:#a2fca2;color:#333}.hljs-subst{color:#fff}.hljs a{color:inherit}.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}.hljs mark{background:#555;color:inherit}.previewArea h1{font-size:2.2em;font-weight:700;line-height:1.1;padding-top:16px;margin-bottom:4px}.previewArea h2,.previewArea h3,.previewArea h4,.previewArea h5,.previewArea h6{line-height:1.5em;margin-top:2.2em;margin-bottom:4px}.previewArea h2{font-size:1.4em;margin:40px 10px 20px 0;padding-left:9px;border-left:6px solid #ff7e79;font-weight:700;line-height:1.4}.previewArea h3{font-weight:700;font-size:1.2em;line-height:1.4;margin:10px 0 5px;padding-top:10px}.previewArea h4{font-weight:700;text-transform:uppercase;font-size:1.1em;line-height:1.4;margin:10px 0 5px;padding-top:10px}.previewArea h5,.previewArea h6{font-size:.9em}.previewArea h5{font-weight:700;text-transform:uppercase}.previewArea h6{font-weight:400;color:#aaa}.previewArea img{width:100%;border-radius:5px;display:block;margin-bottom:15px;height:auto}.previewArea dl,.previewArea ol,.previewArea ul{margin-top:12px;margin-bottom:20px;padding-left:5%;line-height:1.8}.previewArea p{margin:0 0 20px;padding:0;line-height:1.8}.previewArea a{color:#f22f27;text-decoration:none}.previewArea a:hover{color:#f55852;text-decoration:underline}.previewArea a:focus{outline-offset:-2px}.previewArea blockquote{font-size:1em;font-style:normal;padding:30px 38px;margin:0 0 15px;position:relative;line-height:1.8;text-indent:0;border:none;color:#888}.previewArea blockquote:before{content:"\201c";left:12px;top:0;color:#e0e0e0;font-size:4em;font-family:Arial,serif;line-height:1em;font-weight:700;position:absolute}.previewArea blockquote:after{content:"\201d";right:12px;bottom:-26px;color:#e0e0e0;font-size:4em;font-family:Arial,serif;line-height:1em;font-weight:700;position:absolute;bottom:-31px}.previewArea strong,.previewArea dfn{font-weight:700}.previewArea em,.previewArea dfn{font-style:italic;font-weight:400}.previewArea del{text-decoration:line-through}.previewArea p>code{color:#c7264e;background-color:#f9f2f4;font-size:.95em;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px}.previewArea figure{margin:1em 0}.previewArea figcaption{font-size:.75em;padding:.5em 2em;margin-bottom:2em}.previewArea figure img{margin-bottom:0}.previewArea hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.previewArea ol p,.previewArea ul p{margin-bottom:0}.previewArea li{margin-bottom:.75em;margin-top:.75em}.previewArea ol#footnotes{font-size:.95em;padding-top:1em;border-top:1px solid #eaeaea;counter-reset:footer-counter;list-style:none;color:#555;padding-left:5%;margin:20px 0}.previewArea ol#footnotes li{margin-bottom:10px;margin-left:16px;font-weight:400;line-height:2;list-style-type:none}.previewArea ol#footnotes li:before{content:counter(footer-counter) ". ";counter-increment:footer-counter;font-weight:800;font-size:.95em}@keyframes highfade{0%{background-color:none}20%{background-color:#ff0}to{background-color:none}}@-webkit-keyframes highfade{0%{background-color:none}20%{background-color:#ff0}to{background-color:none}}.previewArea a:target,.previewArea ol#footnotes li:target,.previewArea sup a:target{animation-name:highfade;animation-duration:2s;animation-iteration-count:1;animation-timing-function:ease-in-out;-webkit-animation-name:highfade;-webkit-animation-duration:2s;-webkit-animation-iteration-count:1;-webkit-animation-timing-function:ease-in-out}.previewArea a:target{border:0;outline:0}.previewArea table{display:table;text-align:left}.previewArea tbody{border:0}.previewArea table tr{border:0;border-top:1px solid #ccc;background-color:#fff}.previewArea table tr:nth-child(2n){background-color:#f8f8f8}.previewArea table tr th,.previewArea table tr td{font-size:16px;border:1px solid #ccc;padding:5px 10px;text-align:left}.previewArea table tr th{font-weight:700;background-color:#f0f0f0}*{box-sizing:border-box;margin:0;padding:0}.container[data-v-10d6d698]{position:fixed;left:0;top:0;width:100%;height:100%;display:flex}.container .editorArea[data-v-10d6d698]{width:50%;height:100%;border-right:1px solid #e1e4e8;flex-shrink:0}.container .editorArea[data-v-10d6d698] .CodeMirror{height:100%;font-size:16px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;box-sizing:border-box;background-color:#f8f9fa}.container .previewArea[data-v-10d6d698]{position:relative;width:50%;height:100%;padding:20px;overflow:auto;flex-shrink:0} 21 | -------------------------------------------------------------------------------- /assets/index.417f99cf.css: -------------------------------------------------------------------------------- 1 | .CodeMirror{font-family:monospace;height:300px;color:#000;direction:ltr}.CodeMirror-lines{padding:4px 0}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{padding:0 4px}.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{background-color:#fff}.CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}.CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}.CodeMirror-guttermarker{color:#000}.CodeMirror-guttermarker-subtle{color:#999}.CodeMirror-cursor{border-left:1px solid black;border-right:none;width:0}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}.cm-fat-cursor div.CodeMirror-cursors{z-index:1}.cm-fat-cursor .CodeMirror-line::selection,.cm-fat-cursor .CodeMirror-line>span::selection,.cm-fat-cursor .CodeMirror-line>span>span::selection{background:transparent}.cm-fat-cursor .CodeMirror-line::-moz-selection,.cm-fat-cursor .CodeMirror-line>span::-moz-selection,.cm-fat-cursor .CodeMirror-line>span>span::-moz-selection{background:transparent}.cm-fat-cursor{caret-color:transparent}@-moz-keyframes blink{50%{background-color:transparent}}@-webkit-keyframes blink{50%{background-color:transparent}}@keyframes blink{50%{background-color:transparent}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-rulers{position:absolute;left:0;right:0;top:-50px;bottom:0;overflow:hidden}.CodeMirror-ruler{border-left:1px solid #ccc;top:0;bottom:0;position:absolute}.cm-s-default .cm-header{color:#00f}.cm-s-default .cm-quote{color:#090}.cm-negative{color:#d44}.cm-positive{color:#292}.cm-header,.cm-strong{font-weight:700}.cm-em{font-style:italic}.cm-link{text-decoration:underline}.cm-strikethrough{text-decoration:line-through}.cm-s-default .cm-keyword{color:#708}.cm-s-default .cm-atom{color:#219}.cm-s-default .cm-number{color:#164}.cm-s-default .cm-def{color:#00f}.cm-s-default .cm-variable-2{color:#05a}.cm-s-default .cm-variable-3,.cm-s-default .cm-type{color:#085}.cm-s-default .cm-comment{color:#a50}.cm-s-default .cm-string{color:#a11}.cm-s-default .cm-string-2{color:#f50}.cm-s-default .cm-meta,.cm-s-default .cm-qualifier{color:#555}.cm-s-default .cm-builtin{color:#30a}.cm-s-default .cm-bracket{color:#997}.cm-s-default .cm-tag{color:#170}.cm-s-default .cm-attribute{color:#00c}.cm-s-default .cm-hr{color:#999}.cm-s-default .cm-link{color:#00c}.cm-s-default .cm-error,.cm-invalidchar{color:red}.CodeMirror-composing{border-bottom:2px solid}div.CodeMirror span.CodeMirror-matchingbracket{color:#0b0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#a22}.CodeMirror-matchingtag{background:rgba(255,150,0,.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{position:relative;overflow:hidden;background:white}.CodeMirror-scroll{overflow:scroll!important;margin-bottom:-50px;margin-right:-50px;padding-bottom:50px;height:100%;outline:none;position:relative;z-index:0}.CodeMirror-sizer{position:relative;border-right:50px solid transparent}.CodeMirror-vscrollbar,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{position:absolute;z-index:6;display:none;outline:none}.CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}.CodeMirror-scrollbar-filler{right:0;bottom:0}.CodeMirror-gutter-filler{left:0;bottom:0}.CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}.CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-50px}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:none!important;border:none!important}.CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}.CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}.CodeMirror-gutter-wrapper ::selection{background-color:transparent}.CodeMirror-gutter-wrapper ::-moz-selection{background-color:transparent}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border-width:0;background:transparent;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-font-variant-ligatures:contextual;font-variant-ligatures:contextual}.CodeMirror-wrap pre.CodeMirror-line,.CodeMirror-wrap pre.CodeMirror-line-like{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-linebackground{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}.CodeMirror-linewidget{position:relative;z-index:2;padding:.1px}.CodeMirror-rtl pre{direction:rtl}.CodeMirror-code{outline:none}.CodeMirror-scroll,.CodeMirror-sizer,.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber{-moz-box-sizing:content-box;box-sizing:content-box}.CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}.CodeMirror-cursor{position:absolute;pointer-events:none}.CodeMirror-measure pre{position:static}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}div.CodeMirror-dragcursors,.CodeMirror-focused div.CodeMirror-cursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{background:#d7d4f0}.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}.cm-searching{background-color:#ffa;background-color:#ff06}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:""}span.CodeMirror-selectedtext{background:none}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*! 2 | Theme: Agate 3 | Author: (c) Taufik Nurrohman 4 | Maintainer: @taufik-nurrohman 5 | Updated: 2021-04-24 6 | 7 | #333 8 | #62c8f3 9 | #7bd694 10 | #888 11 | #a2fca2 12 | #ade5fc 13 | #b8d8a2 14 | #c6b4f0 15 | #d36363 16 | #fc9b9b 17 | #fcc28c 18 | #ffa 19 | #fff 20 | */.hljs{background:#333;color:#fff}.hljs-doctag,.hljs-meta-keyword,.hljs-name,.hljs-strong{font-weight:700}.hljs-code,.hljs-emphasis{font-style:italic}.hljs-section,.hljs-tag{color:#62c8f3}.hljs-selector-class,.hljs-selector-id,.hljs-template-variable,.hljs-variable{color:#ade5fc}.hljs-meta-string,.hljs-string{color:#a2fca2}.hljs-attr,.hljs-quote,.hljs-selector-attr{color:#7bd694}.hljs-tag .hljs-attr{color:inherit}.hljs-attribute,.hljs-title,.hljs-type{color:#ffa}.hljs-number,.hljs-symbol{color:#d36363}.hljs-bullet,.hljs-template-tag{color:#b8d8a2}.hljs-built_in,.hljs-keyword,.hljs-literal,.hljs-selector-tag{color:#fcc28c}.hljs-code,.hljs-comment,.hljs-formula{color:#888}.hljs-link,.hljs-regexp,.hljs-selector-pseudo{color:#c6b4f0}.hljs-meta{color:#fc9b9b}.hljs-deletion{background:#fc9b9b;color:#333}.hljs-addition{background:#a2fca2;color:#333}.hljs-subst{color:#fff}.hljs a{color:inherit}.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}.hljs mark{background:#555;color:inherit}.previewArea h1{font-size:2.2em;font-weight:700;line-height:1.1;padding-top:16px;margin-bottom:4px}.previewArea h2,.previewArea h3,.previewArea h4,.previewArea h5,.previewArea h6{line-height:1.5em;margin-top:2.2em;margin-bottom:4px}.previewArea h2{font-size:1.4em;margin:40px 10px 20px 0;padding-left:9px;border-left:6px solid #ff7e79;font-weight:700;line-height:1.4}.previewArea h3{font-weight:700;font-size:1.2em;line-height:1.4;margin:10px 0 5px;padding-top:10px}.previewArea h4{font-weight:700;text-transform:uppercase;font-size:1.1em;line-height:1.4;margin:10px 0 5px;padding-top:10px}.previewArea h5,.previewArea h6{font-size:.9em}.previewArea h5{font-weight:700;text-transform:uppercase}.previewArea h6{font-weight:400;color:#aaa}.previewArea img{width:100%;border-radius:5px;display:block;margin-bottom:15px;height:auto}.previewArea dl,.previewArea ol,.previewArea ul{margin-top:12px;margin-bottom:20px;padding-left:5%;line-height:1.8}.previewArea p{margin:0 0 20px;padding:0;line-height:1.8}.previewArea a{color:#f22f27;text-decoration:none}.previewArea a:hover{color:#f55852;text-decoration:underline}.previewArea a:focus{outline-offset:-2px}.previewArea blockquote{font-size:1em;font-style:normal;padding:30px 38px;margin:0 0 15px;position:relative;line-height:1.8;text-indent:0;border:none;color:#888}.previewArea blockquote:before{content:"\201c";left:12px;top:0;color:#e0e0e0;font-size:4em;font-family:Arial,serif;line-height:1em;font-weight:700;position:absolute}.previewArea blockquote:after{content:"\201d";right:12px;bottom:-26px;color:#e0e0e0;font-size:4em;font-family:Arial,serif;line-height:1em;font-weight:700;position:absolute;bottom:-31px}.previewArea strong,.previewArea dfn{font-weight:700}.previewArea em,.previewArea dfn{font-style:italic;font-weight:400}.previewArea del{text-decoration:line-through}.previewArea p>code{color:#c7264e;background-color:#f9f2f4;font-size:.95em;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px}.previewArea figure{margin:1em 0}.previewArea figcaption{font-size:.75em;padding:.5em 2em;margin-bottom:2em}.previewArea figure img{margin-bottom:0}.previewArea hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.previewArea ol p,.previewArea ul p{margin-bottom:0}.previewArea li{margin-bottom:.75em;margin-top:.75em}.previewArea ol#footnotes{font-size:.95em;padding-top:1em;border-top:1px solid #eaeaea;counter-reset:footer-counter;list-style:none;color:#555;padding-left:5%;margin:20px 0}.previewArea ol#footnotes li{margin-bottom:10px;margin-left:16px;font-weight:400;line-height:2;list-style-type:none}.previewArea ol#footnotes li:before{content:counter(footer-counter) ". ";counter-increment:footer-counter;font-weight:800;font-size:.95em}@keyframes highfade{0%{background-color:none}20%{background-color:#ff0}to{background-color:none}}@-webkit-keyframes highfade{0%{background-color:none}20%{background-color:#ff0}to{background-color:none}}.previewArea a:target,.previewArea ol#footnotes li:target,.previewArea sup a:target{animation-name:highfade;animation-duration:2s;animation-iteration-count:1;animation-timing-function:ease-in-out;-webkit-animation-name:highfade;-webkit-animation-duration:2s;-webkit-animation-iteration-count:1;-webkit-animation-timing-function:ease-in-out}.previewArea a:target{border:0;outline:0}.previewArea table{display:table;text-align:left}.previewArea tbody{border:0}.previewArea table tr{border:0;border-top:1px solid #ccc;background-color:#fff}.previewArea table tr:nth-child(2n){background-color:#f8f8f8}.previewArea table tr th,.previewArea table tr td{font-size:16px;border:1px solid #ccc;padding:5px 10px;text-align:left}.previewArea table tr th{font-weight:700;background-color:#f0f0f0}*{box-sizing:border-box;margin:0;padding:0}.container[data-v-4fd5a6df]{position:fixed;left:0;top:0;width:100%;height:100%;display:flex}.container .editorArea[data-v-4fd5a6df]{width:50%;height:100%;border-right:1px solid #e1e4e8;flex-shrink:0}.container .editorArea[data-v-4fd5a6df] .CodeMirror{height:100%;font-size:16px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;box-sizing:border-box;background-color:#f8f9fa}.container .previewArea[data-v-4fd5a6df]{position:relative;width:50%;height:100%;padding:20px;overflow:auto;flex-shrink:0} 21 | -------------------------------------------------------------------------------- /assets/index.4ec01998.css: -------------------------------------------------------------------------------- 1 | .CodeMirror{font-family:monospace;height:300px;color:#000;direction:ltr}.CodeMirror-lines{padding:4px 0}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{padding:0 4px}.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{background-color:#fff}.CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}.CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}.CodeMirror-guttermarker{color:#000}.CodeMirror-guttermarker-subtle{color:#999}.CodeMirror-cursor{border-left:1px solid black;border-right:none;width:0}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}.cm-fat-cursor div.CodeMirror-cursors{z-index:1}.cm-fat-cursor .CodeMirror-line::selection,.cm-fat-cursor .CodeMirror-line>span::selection,.cm-fat-cursor .CodeMirror-line>span>span::selection{background:transparent}.cm-fat-cursor .CodeMirror-line::-moz-selection,.cm-fat-cursor .CodeMirror-line>span::-moz-selection,.cm-fat-cursor .CodeMirror-line>span>span::-moz-selection{background:transparent}.cm-fat-cursor{caret-color:transparent}@-moz-keyframes blink{50%{background-color:transparent}}@-webkit-keyframes blink{50%{background-color:transparent}}@keyframes blink{50%{background-color:transparent}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-rulers{position:absolute;left:0;right:0;top:-50px;bottom:0;overflow:hidden}.CodeMirror-ruler{border-left:1px solid #ccc;top:0;bottom:0;position:absolute}.cm-s-default .cm-header{color:#00f}.cm-s-default .cm-quote{color:#090}.cm-negative{color:#d44}.cm-positive{color:#292}.cm-header,.cm-strong{font-weight:700}.cm-em{font-style:italic}.cm-link{text-decoration:underline}.cm-strikethrough{text-decoration:line-through}.cm-s-default .cm-keyword{color:#708}.cm-s-default .cm-atom{color:#219}.cm-s-default .cm-number{color:#164}.cm-s-default .cm-def{color:#00f}.cm-s-default .cm-variable-2{color:#05a}.cm-s-default .cm-variable-3,.cm-s-default .cm-type{color:#085}.cm-s-default .cm-comment{color:#a50}.cm-s-default .cm-string{color:#a11}.cm-s-default .cm-string-2{color:#f50}.cm-s-default .cm-meta,.cm-s-default .cm-qualifier{color:#555}.cm-s-default .cm-builtin{color:#30a}.cm-s-default .cm-bracket{color:#997}.cm-s-default .cm-tag{color:#170}.cm-s-default .cm-attribute{color:#00c}.cm-s-default .cm-hr{color:#999}.cm-s-default .cm-link{color:#00c}.cm-s-default .cm-error,.cm-invalidchar{color:red}.CodeMirror-composing{border-bottom:2px solid}div.CodeMirror span.CodeMirror-matchingbracket{color:#0b0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#a22}.CodeMirror-matchingtag{background:rgba(255,150,0,.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{position:relative;overflow:hidden;background:white}.CodeMirror-scroll{overflow:scroll!important;margin-bottom:-50px;margin-right:-50px;padding-bottom:50px;height:100%;outline:none;position:relative;z-index:0}.CodeMirror-sizer{position:relative;border-right:50px solid transparent}.CodeMirror-vscrollbar,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{position:absolute;z-index:6;display:none;outline:none}.CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}.CodeMirror-scrollbar-filler{right:0;bottom:0}.CodeMirror-gutter-filler{left:0;bottom:0}.CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}.CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-50px}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:none!important;border:none!important}.CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}.CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}.CodeMirror-gutter-wrapper ::selection{background-color:transparent}.CodeMirror-gutter-wrapper ::-moz-selection{background-color:transparent}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border-width:0;background:transparent;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-font-variant-ligatures:contextual;font-variant-ligatures:contextual}.CodeMirror-wrap pre.CodeMirror-line,.CodeMirror-wrap pre.CodeMirror-line-like{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-linebackground{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}.CodeMirror-linewidget{position:relative;z-index:2;padding:.1px}.CodeMirror-rtl pre{direction:rtl}.CodeMirror-code{outline:none}.CodeMirror-scroll,.CodeMirror-sizer,.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber{-moz-box-sizing:content-box;box-sizing:content-box}.CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}.CodeMirror-cursor{position:absolute;pointer-events:none}.CodeMirror-measure pre{position:static}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}div.CodeMirror-dragcursors,.CodeMirror-focused div.CodeMirror-cursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{background:#d7d4f0}.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}.cm-searching{background-color:#ffa;background-color:#ff06}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:""}span.CodeMirror-selectedtext{background:none}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*! 2 | Theme: Agate 3 | Author: (c) Taufik Nurrohman 4 | Maintainer: @taufik-nurrohman 5 | Updated: 2021-04-24 6 | 7 | #333 8 | #62c8f3 9 | #7bd694 10 | #888 11 | #a2fca2 12 | #ade5fc 13 | #b8d8a2 14 | #c6b4f0 15 | #d36363 16 | #fc9b9b 17 | #fcc28c 18 | #ffa 19 | #fff 20 | */.hljs{background:#333;color:#fff}.hljs-doctag,.hljs-meta-keyword,.hljs-name,.hljs-strong{font-weight:700}.hljs-code,.hljs-emphasis{font-style:italic}.hljs-section,.hljs-tag{color:#62c8f3}.hljs-selector-class,.hljs-selector-id,.hljs-template-variable,.hljs-variable{color:#ade5fc}.hljs-meta-string,.hljs-string{color:#a2fca2}.hljs-attr,.hljs-quote,.hljs-selector-attr{color:#7bd694}.hljs-tag .hljs-attr{color:inherit}.hljs-attribute,.hljs-title,.hljs-type{color:#ffa}.hljs-number,.hljs-symbol{color:#d36363}.hljs-bullet,.hljs-template-tag{color:#b8d8a2}.hljs-built_in,.hljs-keyword,.hljs-literal,.hljs-selector-tag{color:#fcc28c}.hljs-code,.hljs-comment,.hljs-formula{color:#888}.hljs-link,.hljs-regexp,.hljs-selector-pseudo{color:#c6b4f0}.hljs-meta{color:#fc9b9b}.hljs-deletion{background:#fc9b9b;color:#333}.hljs-addition{background:#a2fca2;color:#333}.hljs-subst{color:#fff}.hljs a{color:inherit}.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}.hljs mark{background:#555;color:inherit}.previewArea h1{font-size:2.2em;font-weight:700;line-height:1.1;padding-top:16px;margin-bottom:4px}.previewArea h2,.previewArea h3,.previewArea h4,.previewArea h5,.previewArea h6{line-height:1.5em;margin-top:2.2em;margin-bottom:4px}.previewArea h2{font-size:1.4em;margin:40px 10px 20px 0;padding-left:9px;border-left:6px solid #ff7e79;font-weight:700;line-height:1.4}.previewArea h3{font-weight:700;font-size:1.2em;line-height:1.4;margin:10px 0 5px;padding-top:10px}.previewArea h4{font-weight:700;text-transform:uppercase;font-size:1.1em;line-height:1.4;margin:10px 0 5px;padding-top:10px}.previewArea h5,.previewArea h6{font-size:.9em}.previewArea h5{font-weight:700;text-transform:uppercase}.previewArea h6{font-weight:400;color:#aaa}.previewArea img{width:100%;border-radius:5px;display:block;margin-bottom:15px;height:auto}.previewArea dl,.previewArea ol,.previewArea ul{margin-top:12px;margin-bottom:20px;padding-left:5%;line-height:1.8}.previewArea p{margin:0 0 20px;padding:0;line-height:1.8}.previewArea a{color:#f22f27;text-decoration:none}.previewArea a:hover{color:#f55852;text-decoration:underline}.previewArea a:focus{outline-offset:-2px}.previewArea blockquote{font-size:1em;font-style:normal;padding:30px 38px;margin:0 0 15px;position:relative;line-height:1.8;text-indent:0;border:none;color:#888}.previewArea blockquote:before{content:"\201c";left:12px;top:0;color:#e0e0e0;font-size:4em;font-family:Arial,serif;line-height:1em;font-weight:700;position:absolute}.previewArea blockquote:after{content:"\201d";right:12px;bottom:-26px;color:#e0e0e0;font-size:4em;font-family:Arial,serif;line-height:1em;font-weight:700;position:absolute;bottom:-31px}.previewArea strong,.previewArea dfn{font-weight:700}.previewArea em,.previewArea dfn{font-style:italic;font-weight:400}.previewArea del{text-decoration:line-through}.previewArea p>code{color:#c7264e;background-color:#f9f2f4;font-size:.95em;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px}.previewArea figure{margin:1em 0}.previewArea figcaption{font-size:.75em;padding:.5em 2em;margin-bottom:2em}.previewArea figure img{margin-bottom:0}.previewArea hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.previewArea ol p,.previewArea ul p{margin-bottom:0}.previewArea li{margin-bottom:.75em;margin-top:.75em}.previewArea ol#footnotes{font-size:.95em;padding-top:1em;border-top:1px solid #eaeaea;counter-reset:footer-counter;list-style:none;color:#555;padding-left:5%;margin:20px 0}.previewArea ol#footnotes li{margin-bottom:10px;margin-left:16px;font-weight:400;line-height:2;list-style-type:none}.previewArea ol#footnotes li:before{content:counter(footer-counter) ". ";counter-increment:footer-counter;font-weight:800;font-size:.95em}@keyframes highfade{0%{background-color:none}20%{background-color:#ff0}to{background-color:none}}@-webkit-keyframes highfade{0%{background-color:none}20%{background-color:#ff0}to{background-color:none}}.previewArea a:target,.previewArea ol#footnotes li:target,.previewArea sup a:target{animation-name:highfade;animation-duration:2s;animation-iteration-count:1;animation-timing-function:ease-in-out;-webkit-animation-name:highfade;-webkit-animation-duration:2s;-webkit-animation-iteration-count:1;-webkit-animation-timing-function:ease-in-out}.previewArea a:target{border:0;outline:0}.previewArea table{display:table;text-align:left}.previewArea tbody{border:0}.previewArea table tr{border:0;border-top:1px solid #ccc;background-color:#fff}.previewArea table tr:nth-child(2n){background-color:#f8f8f8}.previewArea table tr th,.previewArea table tr td{font-size:16px;border:1px solid #ccc;padding:5px 10px;text-align:left}.previewArea table tr th{font-weight:700;background-color:#f0f0f0}*{box-sizing:border-box;margin:0;padding:0}.container[data-v-74f3bcd4]{position:fixed;left:0;top:0;width:100%;height:100%;display:flex}.container .editorArea[data-v-74f3bcd4]{width:50%;height:100%;border-right:1px solid #e1e4e8;flex-shrink:0}.container .editorArea[data-v-74f3bcd4] .CodeMirror{height:100%;font-size:16px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;box-sizing:border-box;background-color:#f8f9fa}.container .previewArea[data-v-74f3bcd4]{position:relative;width:50%;height:100%;padding:20px;overflow:auto;flex-shrink:0} 21 | -------------------------------------------------------------------------------- /assets/index.4f13e4de.css: -------------------------------------------------------------------------------- 1 | .CodeMirror{font-family:monospace;height:300px;color:#000;direction:ltr}.CodeMirror-lines{padding:4px 0}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{padding:0 4px}.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{background-color:#fff}.CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}.CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}.CodeMirror-guttermarker{color:#000}.CodeMirror-guttermarker-subtle{color:#999}.CodeMirror-cursor{border-left:1px solid black;border-right:none;width:0}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}.cm-fat-cursor div.CodeMirror-cursors{z-index:1}.cm-fat-cursor .CodeMirror-line::selection,.cm-fat-cursor .CodeMirror-line>span::selection,.cm-fat-cursor .CodeMirror-line>span>span::selection{background:transparent}.cm-fat-cursor .CodeMirror-line::-moz-selection,.cm-fat-cursor .CodeMirror-line>span::-moz-selection,.cm-fat-cursor .CodeMirror-line>span>span::-moz-selection{background:transparent}.cm-fat-cursor{caret-color:transparent}@-moz-keyframes blink{50%{background-color:transparent}}@-webkit-keyframes blink{50%{background-color:transparent}}@keyframes blink{50%{background-color:transparent}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-rulers{position:absolute;left:0;right:0;top:-50px;bottom:0;overflow:hidden}.CodeMirror-ruler{border-left:1px solid #ccc;top:0;bottom:0;position:absolute}.cm-s-default .cm-header{color:#00f}.cm-s-default .cm-quote{color:#090}.cm-negative{color:#d44}.cm-positive{color:#292}.cm-header,.cm-strong{font-weight:700}.cm-em{font-style:italic}.cm-link{text-decoration:underline}.cm-strikethrough{text-decoration:line-through}.cm-s-default .cm-keyword{color:#708}.cm-s-default .cm-atom{color:#219}.cm-s-default .cm-number{color:#164}.cm-s-default .cm-def{color:#00f}.cm-s-default .cm-variable-2{color:#05a}.cm-s-default .cm-variable-3,.cm-s-default .cm-type{color:#085}.cm-s-default .cm-comment{color:#a50}.cm-s-default .cm-string{color:#a11}.cm-s-default .cm-string-2{color:#f50}.cm-s-default .cm-meta,.cm-s-default .cm-qualifier{color:#555}.cm-s-default .cm-builtin{color:#30a}.cm-s-default .cm-bracket{color:#997}.cm-s-default .cm-tag{color:#170}.cm-s-default .cm-attribute{color:#00c}.cm-s-default .cm-hr{color:#999}.cm-s-default .cm-link{color:#00c}.cm-s-default .cm-error,.cm-invalidchar{color:red}.CodeMirror-composing{border-bottom:2px solid}div.CodeMirror span.CodeMirror-matchingbracket{color:#0b0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#a22}.CodeMirror-matchingtag{background:rgba(255,150,0,.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{position:relative;overflow:hidden;background:white}.CodeMirror-scroll{overflow:scroll!important;margin-bottom:-50px;margin-right:-50px;padding-bottom:50px;height:100%;outline:none;position:relative;z-index:0}.CodeMirror-sizer{position:relative;border-right:50px solid transparent}.CodeMirror-vscrollbar,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{position:absolute;z-index:6;display:none;outline:none}.CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}.CodeMirror-scrollbar-filler{right:0;bottom:0}.CodeMirror-gutter-filler{left:0;bottom:0}.CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}.CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-50px}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:none!important;border:none!important}.CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}.CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}.CodeMirror-gutter-wrapper ::selection{background-color:transparent}.CodeMirror-gutter-wrapper ::-moz-selection{background-color:transparent}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border-width:0;background:transparent;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-font-variant-ligatures:contextual;font-variant-ligatures:contextual}.CodeMirror-wrap pre.CodeMirror-line,.CodeMirror-wrap pre.CodeMirror-line-like{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-linebackground{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}.CodeMirror-linewidget{position:relative;z-index:2;padding:.1px}.CodeMirror-rtl pre{direction:rtl}.CodeMirror-code{outline:none}.CodeMirror-scroll,.CodeMirror-sizer,.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber{-moz-box-sizing:content-box;box-sizing:content-box}.CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}.CodeMirror-cursor{position:absolute;pointer-events:none}.CodeMirror-measure pre{position:static}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}div.CodeMirror-dragcursors,.CodeMirror-focused div.CodeMirror-cursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{background:#d7d4f0}.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}.cm-searching{background-color:#ffa;background-color:#ff06}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:""}span.CodeMirror-selectedtext{background:none}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*! 2 | Theme: Agate 3 | Author: (c) Taufik Nurrohman 4 | Maintainer: @taufik-nurrohman 5 | Updated: 2021-04-24 6 | 7 | #333 8 | #62c8f3 9 | #7bd694 10 | #888 11 | #a2fca2 12 | #ade5fc 13 | #b8d8a2 14 | #c6b4f0 15 | #d36363 16 | #fc9b9b 17 | #fcc28c 18 | #ffa 19 | #fff 20 | */.hljs{background:#333;color:#fff}.hljs-doctag,.hljs-meta-keyword,.hljs-name,.hljs-strong{font-weight:700}.hljs-code,.hljs-emphasis{font-style:italic}.hljs-section,.hljs-tag{color:#62c8f3}.hljs-selector-class,.hljs-selector-id,.hljs-template-variable,.hljs-variable{color:#ade5fc}.hljs-meta-string,.hljs-string{color:#a2fca2}.hljs-attr,.hljs-quote,.hljs-selector-attr{color:#7bd694}.hljs-tag .hljs-attr{color:inherit}.hljs-attribute,.hljs-title,.hljs-type{color:#ffa}.hljs-number,.hljs-symbol{color:#d36363}.hljs-bullet,.hljs-template-tag{color:#b8d8a2}.hljs-built_in,.hljs-keyword,.hljs-literal,.hljs-selector-tag{color:#fcc28c}.hljs-code,.hljs-comment,.hljs-formula{color:#888}.hljs-link,.hljs-regexp,.hljs-selector-pseudo{color:#c6b4f0}.hljs-meta{color:#fc9b9b}.hljs-deletion{background:#fc9b9b;color:#333}.hljs-addition{background:#a2fca2;color:#333}.hljs-subst{color:#fff}.hljs a{color:inherit}.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}.hljs mark{background:#555;color:inherit}.previewArea h1{font-size:2.2em;font-weight:700;line-height:1.1;padding-top:16px;margin-bottom:4px}.previewArea h2,.previewArea h3,.previewArea h4,.previewArea h5,.previewArea h6{line-height:1.5em;margin-top:2.2em;margin-bottom:4px}.previewArea h2{font-size:1.4em;margin:40px 10px 20px 0;padding-left:9px;border-left:6px solid #ff7e79;font-weight:700;line-height:1.4}.previewArea h3{font-weight:700;font-size:1.2em;line-height:1.4;margin:10px 0 5px;padding-top:10px}.previewArea h4{font-weight:700;text-transform:uppercase;font-size:1.1em;line-height:1.4;margin:10px 0 5px;padding-top:10px}.previewArea h5,.previewArea h6{font-size:.9em}.previewArea h5{font-weight:700;text-transform:uppercase}.previewArea h6{font-weight:400;color:#aaa}.previewArea img{width:100%;border-radius:5px;display:block;margin-bottom:15px;height:auto}.previewArea dl,.previewArea ol,.previewArea ul{margin-top:12px;margin-bottom:20px;padding-left:5%;line-height:1.8}.previewArea p{margin:0 0 20px;padding:0;line-height:1.8}.previewArea a{color:#f22f27;text-decoration:none}.previewArea a:hover{color:#f55852;text-decoration:underline}.previewArea a:focus{outline-offset:-2px}.previewArea blockquote{font-size:1em;font-style:normal;padding:30px 38px;margin:0 0 15px;position:relative;line-height:1.8;text-indent:0;border:none;color:#888}.previewArea blockquote:before{content:"\201c";left:12px;top:0;color:#e0e0e0;font-size:4em;font-family:Arial,serif;line-height:1em;font-weight:700;position:absolute}.previewArea blockquote:after{content:"\201d";right:12px;bottom:-26px;color:#e0e0e0;font-size:4em;font-family:Arial,serif;line-height:1em;font-weight:700;position:absolute;bottom:-31px}.previewArea strong,.previewArea dfn{font-weight:700}.previewArea em,.previewArea dfn{font-style:italic;font-weight:400}.previewArea del{text-decoration:line-through}.previewArea p>code{color:#c7264e;background-color:#f9f2f4;font-size:.95em;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px}.previewArea figure{margin:1em 0}.previewArea figcaption{font-size:.75em;padding:.5em 2em;margin-bottom:2em}.previewArea figure img{margin-bottom:0}.previewArea hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.previewArea ol p,.previewArea ul p{margin-bottom:0}.previewArea li{margin-bottom:.75em;margin-top:.75em}.previewArea ol#footnotes{font-size:.95em;padding-top:1em;border-top:1px solid #eaeaea;counter-reset:footer-counter;list-style:none;color:#555;padding-left:5%;margin:20px 0}.previewArea ol#footnotes li{margin-bottom:10px;margin-left:16px;font-weight:400;line-height:2;list-style-type:none}.previewArea ol#footnotes li:before{content:counter(footer-counter) ". ";counter-increment:footer-counter;font-weight:800;font-size:.95em}@keyframes highfade{0%{background-color:none}20%{background-color:#ff0}to{background-color:none}}@-webkit-keyframes highfade{0%{background-color:none}20%{background-color:#ff0}to{background-color:none}}.previewArea a:target,.previewArea ol#footnotes li:target,.previewArea sup a:target{animation-name:highfade;animation-duration:2s;animation-iteration-count:1;animation-timing-function:ease-in-out;-webkit-animation-name:highfade;-webkit-animation-duration:2s;-webkit-animation-iteration-count:1;-webkit-animation-timing-function:ease-in-out}.previewArea a:target{border:0;outline:0}.previewArea table{display:table;text-align:left}.previewArea tbody{border:0}.previewArea table tr{border:0;border-top:1px solid #ccc;background-color:#fff}.previewArea table tr:nth-child(2n){background-color:#f8f8f8}.previewArea table tr th,.previewArea table tr td{font-size:16px;border:1px solid #ccc;padding:5px 10px;text-align:left}.previewArea table tr th{font-weight:700;background-color:#f0f0f0}*{box-sizing:border-box;margin:0;padding:0}.container[data-v-9017e838]{position:fixed;left:0;top:0;width:100%;height:100%;display:flex}.container .editorArea[data-v-9017e838]{width:50%;height:100%;border-right:1px solid #e1e4e8;flex-shrink:0}.container .editorArea[data-v-9017e838] .CodeMirror{height:100%;font-size:16px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;box-sizing:border-box;background-color:#f8f9fa}.container .previewArea[data-v-9017e838]{position:relative;width:50%;height:100%;padding:20px;overflow:auto;flex-shrink:0} 21 | -------------------------------------------------------------------------------- /assets/index.58b534b8.css: -------------------------------------------------------------------------------- 1 | .CodeMirror{font-family:monospace;height:300px;color:#000;direction:ltr}.CodeMirror-lines{padding:4px 0}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{padding:0 4px}.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{background-color:#fff}.CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}.CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}.CodeMirror-guttermarker{color:#000}.CodeMirror-guttermarker-subtle{color:#999}.CodeMirror-cursor{border-left:1px solid black;border-right:none;width:0}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}.cm-fat-cursor div.CodeMirror-cursors{z-index:1}.cm-fat-cursor .CodeMirror-line::selection,.cm-fat-cursor .CodeMirror-line>span::selection,.cm-fat-cursor .CodeMirror-line>span>span::selection{background:transparent}.cm-fat-cursor .CodeMirror-line::-moz-selection,.cm-fat-cursor .CodeMirror-line>span::-moz-selection,.cm-fat-cursor .CodeMirror-line>span>span::-moz-selection{background:transparent}.cm-fat-cursor{caret-color:transparent}@-moz-keyframes blink{50%{background-color:transparent}}@-webkit-keyframes blink{50%{background-color:transparent}}@keyframes blink{50%{background-color:transparent}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-rulers{position:absolute;left:0;right:0;top:-50px;bottom:0;overflow:hidden}.CodeMirror-ruler{border-left:1px solid #ccc;top:0;bottom:0;position:absolute}.cm-s-default .cm-header{color:#00f}.cm-s-default .cm-quote{color:#090}.cm-negative{color:#d44}.cm-positive{color:#292}.cm-header,.cm-strong{font-weight:700}.cm-em{font-style:italic}.cm-link{text-decoration:underline}.cm-strikethrough{text-decoration:line-through}.cm-s-default .cm-keyword{color:#708}.cm-s-default .cm-atom{color:#219}.cm-s-default .cm-number{color:#164}.cm-s-default .cm-def{color:#00f}.cm-s-default .cm-variable-2{color:#05a}.cm-s-default .cm-variable-3,.cm-s-default .cm-type{color:#085}.cm-s-default .cm-comment{color:#a50}.cm-s-default .cm-string{color:#a11}.cm-s-default .cm-string-2{color:#f50}.cm-s-default .cm-meta,.cm-s-default .cm-qualifier{color:#555}.cm-s-default .cm-builtin{color:#30a}.cm-s-default .cm-bracket{color:#997}.cm-s-default .cm-tag{color:#170}.cm-s-default .cm-attribute{color:#00c}.cm-s-default .cm-hr{color:#999}.cm-s-default .cm-link{color:#00c}.cm-s-default .cm-error,.cm-invalidchar{color:red}.CodeMirror-composing{border-bottom:2px solid}div.CodeMirror span.CodeMirror-matchingbracket{color:#0b0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#a22}.CodeMirror-matchingtag{background:rgba(255,150,0,.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{position:relative;overflow:hidden;background:white}.CodeMirror-scroll{overflow:scroll!important;margin-bottom:-50px;margin-right:-50px;padding-bottom:50px;height:100%;outline:none;position:relative;z-index:0}.CodeMirror-sizer{position:relative;border-right:50px solid transparent}.CodeMirror-vscrollbar,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{position:absolute;z-index:6;display:none;outline:none}.CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}.CodeMirror-scrollbar-filler{right:0;bottom:0}.CodeMirror-gutter-filler{left:0;bottom:0}.CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}.CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-50px}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:none!important;border:none!important}.CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}.CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}.CodeMirror-gutter-wrapper ::selection{background-color:transparent}.CodeMirror-gutter-wrapper ::-moz-selection{background-color:transparent}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border-width:0;background:transparent;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-font-variant-ligatures:contextual;font-variant-ligatures:contextual}.CodeMirror-wrap pre.CodeMirror-line,.CodeMirror-wrap pre.CodeMirror-line-like{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-linebackground{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}.CodeMirror-linewidget{position:relative;z-index:2;padding:.1px}.CodeMirror-rtl pre{direction:rtl}.CodeMirror-code{outline:none}.CodeMirror-scroll,.CodeMirror-sizer,.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber{-moz-box-sizing:content-box;box-sizing:content-box}.CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}.CodeMirror-cursor{position:absolute;pointer-events:none}.CodeMirror-measure pre{position:static}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}div.CodeMirror-dragcursors,.CodeMirror-focused div.CodeMirror-cursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{background:#d7d4f0}.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}.cm-searching{background-color:#ffa;background-color:#ff06}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:""}span.CodeMirror-selectedtext{background:none}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*! 2 | Theme: Agate 3 | Author: (c) Taufik Nurrohman 4 | Maintainer: @taufik-nurrohman 5 | Updated: 2021-04-24 6 | 7 | #333 8 | #62c8f3 9 | #7bd694 10 | #888 11 | #a2fca2 12 | #ade5fc 13 | #b8d8a2 14 | #c6b4f0 15 | #d36363 16 | #fc9b9b 17 | #fcc28c 18 | #ffa 19 | #fff 20 | */.hljs{background:#333;color:#fff}.hljs-doctag,.hljs-meta-keyword,.hljs-name,.hljs-strong{font-weight:700}.hljs-code,.hljs-emphasis{font-style:italic}.hljs-section,.hljs-tag{color:#62c8f3}.hljs-selector-class,.hljs-selector-id,.hljs-template-variable,.hljs-variable{color:#ade5fc}.hljs-meta-string,.hljs-string{color:#a2fca2}.hljs-attr,.hljs-quote,.hljs-selector-attr{color:#7bd694}.hljs-tag .hljs-attr{color:inherit}.hljs-attribute,.hljs-title,.hljs-type{color:#ffa}.hljs-number,.hljs-symbol{color:#d36363}.hljs-bullet,.hljs-template-tag{color:#b8d8a2}.hljs-built_in,.hljs-keyword,.hljs-literal,.hljs-selector-tag{color:#fcc28c}.hljs-code,.hljs-comment,.hljs-formula{color:#888}.hljs-link,.hljs-regexp,.hljs-selector-pseudo{color:#c6b4f0}.hljs-meta{color:#fc9b9b}.hljs-deletion{background:#fc9b9b;color:#333}.hljs-addition{background:#a2fca2;color:#333}.hljs-subst{color:#fff}.hljs a{color:inherit}.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}.hljs mark{background:#555;color:inherit}.previewArea h1{font-size:2.2em;font-weight:700;line-height:1.1;padding-top:16px;margin-bottom:4px}.previewArea h2,.previewArea h3,.previewArea h4,.previewArea h5,.previewArea h6{line-height:1.5em;margin-top:2.2em;margin-bottom:4px}.previewArea h2{font-size:1.4em;margin:40px 10px 20px 0;padding-left:9px;border-left:6px solid #ff7e79;font-weight:700;line-height:1.4}.previewArea h3{font-weight:700;font-size:1.2em;line-height:1.4;margin:10px 0 5px;padding-top:10px}.previewArea h4{font-weight:700;text-transform:uppercase;font-size:1.1em;line-height:1.4;margin:10px 0 5px;padding-top:10px}.previewArea h5,.previewArea h6{font-size:.9em}.previewArea h5{font-weight:700;text-transform:uppercase}.previewArea h6{font-weight:400;color:#aaa}.previewArea img{width:100%;border-radius:5px;display:block;margin-bottom:15px;height:auto}.previewArea dl,.previewArea ol,.previewArea ul{margin-top:12px;margin-bottom:20px;padding-left:5%;line-height:1.8}.previewArea p{margin:0 0 20px;padding:0;line-height:1.8}.previewArea a{color:#f22f27;text-decoration:none}.previewArea a:hover{color:#f55852;text-decoration:underline}.previewArea a:focus{outline-offset:-2px}.previewArea blockquote{font-size:1em;font-style:normal;padding:30px 38px;margin:0 0 15px;position:relative;line-height:1.8;text-indent:0;border:none;color:#888}.previewArea blockquote:before{content:"\201c";left:12px;top:0;color:#e0e0e0;font-size:4em;font-family:Arial,serif;line-height:1em;font-weight:700;position:absolute}.previewArea blockquote:after{content:"\201d";right:12px;bottom:-26px;color:#e0e0e0;font-size:4em;font-family:Arial,serif;line-height:1em;font-weight:700;position:absolute;bottom:-31px}.previewArea strong,.previewArea dfn{font-weight:700}.previewArea em,.previewArea dfn{font-style:italic;font-weight:400}.previewArea del{text-decoration:line-through}.previewArea p>code{color:#c7264e;background-color:#f9f2f4;font-size:.95em;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px}.previewArea figure{margin:1em 0}.previewArea figcaption{font-size:.75em;padding:.5em 2em;margin-bottom:2em}.previewArea figure img{margin-bottom:0}.previewArea hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.previewArea ol p,.previewArea ul p{margin-bottom:0}.previewArea li{margin-bottom:.75em;margin-top:.75em}.previewArea ol#footnotes{font-size:.95em;padding-top:1em;border-top:1px solid #eaeaea;counter-reset:footer-counter;list-style:none;color:#555;padding-left:5%;margin:20px 0}.previewArea ol#footnotes li{margin-bottom:10px;margin-left:16px;font-weight:400;line-height:2;list-style-type:none}.previewArea ol#footnotes li:before{content:counter(footer-counter) ". ";counter-increment:footer-counter;font-weight:800;font-size:.95em}@keyframes highfade{0%{background-color:none}20%{background-color:#ff0}to{background-color:none}}@-webkit-keyframes highfade{0%{background-color:none}20%{background-color:#ff0}to{background-color:none}}.previewArea a:target,.previewArea ol#footnotes li:target,.previewArea sup a:target{animation-name:highfade;animation-duration:2s;animation-iteration-count:1;animation-timing-function:ease-in-out;-webkit-animation-name:highfade;-webkit-animation-duration:2s;-webkit-animation-iteration-count:1;-webkit-animation-timing-function:ease-in-out}.previewArea a:target{border:0;outline:0}.previewArea table{display:table;text-align:left}.previewArea tbody{border:0}.previewArea table tr{border:0;border-top:1px solid #ccc;background-color:#fff}.previewArea table tr:nth-child(2n){background-color:#f8f8f8}.previewArea table tr th,.previewArea table tr td{font-size:16px;border:1px solid #ccc;padding:5px 10px;text-align:left}.previewArea table tr th{font-weight:700;background-color:#f0f0f0}*{box-sizing:border-box;margin:0;padding:0}.container[data-v-1fa6a7ba]{position:fixed;left:0;top:0;width:100%;height:100%;display:flex}.container .editorArea[data-v-1fa6a7ba]{width:50%;height:100%;border-right:1px solid #e1e4e8;flex-shrink:0}.container .editorArea[data-v-1fa6a7ba] .CodeMirror{height:100%;font-size:16px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;box-sizing:border-box;background-color:#f8f9fa}.container .previewArea[data-v-1fa6a7ba]{position:relative;width:50%;height:100%;padding:20px;overflow:auto;flex-shrink:0} 21 | -------------------------------------------------------------------------------- /assets/index.59299003.css: -------------------------------------------------------------------------------- 1 | .CodeMirror{font-family:monospace;height:300px;color:#000;direction:ltr}.CodeMirror-lines{padding:4px 0}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{padding:0 4px}.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{background-color:#fff}.CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}.CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}.CodeMirror-guttermarker{color:#000}.CodeMirror-guttermarker-subtle{color:#999}.CodeMirror-cursor{border-left:1px solid black;border-right:none;width:0}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}.cm-fat-cursor div.CodeMirror-cursors{z-index:1}.cm-fat-cursor .CodeMirror-line::selection,.cm-fat-cursor .CodeMirror-line>span::selection,.cm-fat-cursor .CodeMirror-line>span>span::selection{background:transparent}.cm-fat-cursor .CodeMirror-line::-moz-selection,.cm-fat-cursor .CodeMirror-line>span::-moz-selection,.cm-fat-cursor .CodeMirror-line>span>span::-moz-selection{background:transparent}.cm-fat-cursor{caret-color:transparent}@-moz-keyframes blink{50%{background-color:transparent}}@-webkit-keyframes blink{50%{background-color:transparent}}@keyframes blink{50%{background-color:transparent}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-rulers{position:absolute;left:0;right:0;top:-50px;bottom:0;overflow:hidden}.CodeMirror-ruler{border-left:1px solid #ccc;top:0;bottom:0;position:absolute}.cm-s-default .cm-header{color:#00f}.cm-s-default .cm-quote{color:#090}.cm-negative{color:#d44}.cm-positive{color:#292}.cm-header,.cm-strong{font-weight:700}.cm-em{font-style:italic}.cm-link{text-decoration:underline}.cm-strikethrough{text-decoration:line-through}.cm-s-default .cm-keyword{color:#708}.cm-s-default .cm-atom{color:#219}.cm-s-default .cm-number{color:#164}.cm-s-default .cm-def{color:#00f}.cm-s-default .cm-variable-2{color:#05a}.cm-s-default .cm-variable-3,.cm-s-default .cm-type{color:#085}.cm-s-default .cm-comment{color:#a50}.cm-s-default .cm-string{color:#a11}.cm-s-default .cm-string-2{color:#f50}.cm-s-default .cm-meta,.cm-s-default .cm-qualifier{color:#555}.cm-s-default .cm-builtin{color:#30a}.cm-s-default .cm-bracket{color:#997}.cm-s-default .cm-tag{color:#170}.cm-s-default .cm-attribute{color:#00c}.cm-s-default .cm-hr{color:#999}.cm-s-default .cm-link{color:#00c}.cm-s-default .cm-error,.cm-invalidchar{color:red}.CodeMirror-composing{border-bottom:2px solid}div.CodeMirror span.CodeMirror-matchingbracket{color:#0b0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#a22}.CodeMirror-matchingtag{background:rgba(255,150,0,.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{position:relative;overflow:hidden;background:white}.CodeMirror-scroll{overflow:scroll!important;margin-bottom:-50px;margin-right:-50px;padding-bottom:50px;height:100%;outline:none;position:relative;z-index:0}.CodeMirror-sizer{position:relative;border-right:50px solid transparent}.CodeMirror-vscrollbar,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{position:absolute;z-index:6;display:none;outline:none}.CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}.CodeMirror-scrollbar-filler{right:0;bottom:0}.CodeMirror-gutter-filler{left:0;bottom:0}.CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}.CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-50px}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:none!important;border:none!important}.CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}.CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}.CodeMirror-gutter-wrapper ::selection{background-color:transparent}.CodeMirror-gutter-wrapper ::-moz-selection{background-color:transparent}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border-width:0;background:transparent;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-font-variant-ligatures:contextual;font-variant-ligatures:contextual}.CodeMirror-wrap pre.CodeMirror-line,.CodeMirror-wrap pre.CodeMirror-line-like{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-linebackground{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}.CodeMirror-linewidget{position:relative;z-index:2;padding:.1px}.CodeMirror-rtl pre{direction:rtl}.CodeMirror-code{outline:none}.CodeMirror-scroll,.CodeMirror-sizer,.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber{-moz-box-sizing:content-box;box-sizing:content-box}.CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}.CodeMirror-cursor{position:absolute;pointer-events:none}.CodeMirror-measure pre{position:static}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}div.CodeMirror-dragcursors,.CodeMirror-focused div.CodeMirror-cursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{background:#d7d4f0}.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}.cm-searching{background-color:#ffa;background-color:#ff06}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:""}span.CodeMirror-selectedtext{background:none}.previewArea h1{font-size:2.2em;font-weight:700;line-height:1.1;padding-top:16px;margin-bottom:4px}.previewArea h2,.previewArea h3,.previewArea h4,.previewArea h5,.previewArea h6{line-height:1.5em;margin-top:2.2em;margin-bottom:4px}.previewArea h2{font-size:1.4em;margin:40px 10px 20px 0;padding-left:9px;border-left:6px solid #ff7e79;font-weight:700;line-height:1.4}.previewArea h3{font-weight:700;font-size:1.2em;line-height:1.4;margin:10px 0 5px;padding-top:10px}.previewArea h4{font-weight:700;text-transform:uppercase;font-size:1.1em;line-height:1.4;margin:10px 0 5px;padding-top:10px}.previewArea h5,.previewArea h6{font-size:.9em}.previewArea h5{font-weight:700;text-transform:uppercase}.previewArea h6{font-weight:400;color:#aaa}.previewArea img{width:100%;border-radius:5px;display:block;margin-bottom:15px;height:auto}.previewArea dl,.previewArea ol,.previewArea ul{margin-top:12px;margin-bottom:20px;padding-left:5%;line-height:1.8}.previewArea p{margin:0 0 20px;padding:0;line-height:1.8}.previewArea a{color:#f22f27;text-decoration:none}.previewArea a:hover{color:#f55852;text-decoration:underline}.previewArea a:focus{outline-offset:-2px}.previewArea blockquote{font-size:1em;font-style:normal;padding:30px 38px;margin:0 0 15px;position:relative;line-height:1.8;text-indent:0;border:none;color:#888}.previewArea blockquote:before{content:"\201c";left:12px;top:0;color:#e0e0e0;font-size:4em;font-family:Arial,serif;line-height:1em;font-weight:700;position:absolute}.previewArea blockquote:after{content:"\201d";right:12px;bottom:-26px;color:#e0e0e0;font-size:4em;font-family:Arial,serif;line-height:1em;font-weight:700;position:absolute;bottom:-31px}.previewArea strong,.previewArea dfn{font-weight:700}.previewArea em,.previewArea dfn{font-style:italic;font-weight:400}.previewArea del{text-decoration:line-through}.previewArea pre{margin:0 0 25px;font-size:13px;line-height:1.42857;word-break:break-all;word-wrap:break-word;border-radius:4px;white-space:pre-wrap;display:block;background:#f8f8f8;padding:10px 20px;border:none;color:#666;font-family:Courier,sans-serif}.previewArea code{color:#c7254e;background-color:#f9f2f4;border-radius:4px;font-family:Menlo,Monaco,Consolas,Courier New,monospace;padding:2px 4px;font-size:90%}.previewArea p>code{color:#c7264e;background-color:#f9f2f4;font-size:.95em;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px}.previewArea figure{margin:1em 0}.previewArea figcaption{font-size:.75em;padding:.5em 2em;margin-bottom:2em}.previewArea figure img{margin-bottom:0}.previewArea hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.previewArea ol p,.previewArea ul p{margin-bottom:0}.previewArea li{margin-bottom:.75em;margin-top:.75em}.previewArea ol#footnotes{font-size:.95em;padding-top:1em;border-top:1px solid #eaeaea;counter-reset:footer-counter;list-style:none;color:#555;padding-left:5%;margin:20px 0}.previewArea ol#footnotes li{margin-bottom:10px;margin-left:16px;font-weight:400;line-height:2;list-style-type:none}.previewArea ol#footnotes li:before{content:counter(footer-counter) ". ";counter-increment:footer-counter;font-weight:800;font-size:.95em}@keyframes highfade{0%{background-color:none}20%{background-color:#ff0}to{background-color:none}}@-webkit-keyframes highfade{0%{background-color:none}20%{background-color:#ff0}to{background-color:none}}.previewArea a:target,.previewArea ol#footnotes li:target,.previewArea sup a:target{animation-name:highfade;animation-duration:2s;animation-iteration-count:1;animation-timing-function:ease-in-out;-webkit-animation-name:highfade;-webkit-animation-duration:2s;-webkit-animation-iteration-count:1;-webkit-animation-timing-function:ease-in-out}.previewArea a:target{border:0;outline:0}*{box-sizing:border-box;margin:0;padding:0}.container[data-v-3ae3f134]{position:fixed;left:0;top:0;width:100%;height:100%;display:flex}.container .editorArea[data-v-3ae3f134]{width:50%;height:100%;border-right:1px solid #e1e4e8;flex-shrink:0}.container .editorArea[data-v-3ae3f134] .CodeMirror{height:100%;font-size:16px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;box-sizing:border-box;background-color:#f8f9fa}.container .previewArea[data-v-3ae3f134]{position:relative;width:50%;height:100%;padding:20px;overflow:auto;flex-shrink:0} 2 | -------------------------------------------------------------------------------- /assets/index.82c22f55.css: -------------------------------------------------------------------------------- 1 | .CodeMirror{font-family:monospace;height:300px;color:#000;direction:ltr}.CodeMirror-lines{padding:4px 0}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{padding:0 4px}.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{background-color:#fff}.CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}.CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}.CodeMirror-guttermarker{color:#000}.CodeMirror-guttermarker-subtle{color:#999}.CodeMirror-cursor{border-left:1px solid black;border-right:none;width:0}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}.cm-fat-cursor div.CodeMirror-cursors{z-index:1}.cm-fat-cursor .CodeMirror-line::selection,.cm-fat-cursor .CodeMirror-line>span::selection,.cm-fat-cursor .CodeMirror-line>span>span::selection{background:transparent}.cm-fat-cursor .CodeMirror-line::-moz-selection,.cm-fat-cursor .CodeMirror-line>span::-moz-selection,.cm-fat-cursor .CodeMirror-line>span>span::-moz-selection{background:transparent}.cm-fat-cursor{caret-color:transparent}@-moz-keyframes blink{50%{background-color:transparent}}@-webkit-keyframes blink{50%{background-color:transparent}}@keyframes blink{50%{background-color:transparent}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-rulers{position:absolute;left:0;right:0;top:-50px;bottom:0;overflow:hidden}.CodeMirror-ruler{border-left:1px solid #ccc;top:0;bottom:0;position:absolute}.cm-s-default .cm-header{color:#00f}.cm-s-default .cm-quote{color:#090}.cm-negative{color:#d44}.cm-positive{color:#292}.cm-header,.cm-strong{font-weight:700}.cm-em{font-style:italic}.cm-link{text-decoration:underline}.cm-strikethrough{text-decoration:line-through}.cm-s-default .cm-keyword{color:#708}.cm-s-default .cm-atom{color:#219}.cm-s-default .cm-number{color:#164}.cm-s-default .cm-def{color:#00f}.cm-s-default .cm-variable-2{color:#05a}.cm-s-default .cm-variable-3,.cm-s-default .cm-type{color:#085}.cm-s-default .cm-comment{color:#a50}.cm-s-default .cm-string{color:#a11}.cm-s-default .cm-string-2{color:#f50}.cm-s-default .cm-meta,.cm-s-default .cm-qualifier{color:#555}.cm-s-default .cm-builtin{color:#30a}.cm-s-default .cm-bracket{color:#997}.cm-s-default .cm-tag{color:#170}.cm-s-default .cm-attribute{color:#00c}.cm-s-default .cm-hr{color:#999}.cm-s-default .cm-link{color:#00c}.cm-s-default .cm-error,.cm-invalidchar{color:red}.CodeMirror-composing{border-bottom:2px solid}div.CodeMirror span.CodeMirror-matchingbracket{color:#0b0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#a22}.CodeMirror-matchingtag{background:rgba(255,150,0,.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{position:relative;overflow:hidden;background:white}.CodeMirror-scroll{overflow:scroll!important;margin-bottom:-50px;margin-right:-50px;padding-bottom:50px;height:100%;outline:none;position:relative;z-index:0}.CodeMirror-sizer{position:relative;border-right:50px solid transparent}.CodeMirror-vscrollbar,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{position:absolute;z-index:6;display:none;outline:none}.CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}.CodeMirror-scrollbar-filler{right:0;bottom:0}.CodeMirror-gutter-filler{left:0;bottom:0}.CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}.CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-50px}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:none!important;border:none!important}.CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}.CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}.CodeMirror-gutter-wrapper ::selection{background-color:transparent}.CodeMirror-gutter-wrapper ::-moz-selection{background-color:transparent}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border-width:0;background:transparent;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-font-variant-ligatures:contextual;font-variant-ligatures:contextual}.CodeMirror-wrap pre.CodeMirror-line,.CodeMirror-wrap pre.CodeMirror-line-like{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-linebackground{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}.CodeMirror-linewidget{position:relative;z-index:2;padding:.1px}.CodeMirror-rtl pre{direction:rtl}.CodeMirror-code{outline:none}.CodeMirror-scroll,.CodeMirror-sizer,.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber{-moz-box-sizing:content-box;box-sizing:content-box}.CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}.CodeMirror-cursor{position:absolute;pointer-events:none}.CodeMirror-measure pre{position:static}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}div.CodeMirror-dragcursors,.CodeMirror-focused div.CodeMirror-cursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{background:#d7d4f0}.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}.cm-searching{background-color:#ffa;background-color:#ff06}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:""}span.CodeMirror-selectedtext{background:none}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*! 2 | Theme: Agate 3 | Author: (c) Taufik Nurrohman 4 | Maintainer: @taufik-nurrohman 5 | Updated: 2021-04-24 6 | 7 | #333 8 | #62c8f3 9 | #7bd694 10 | #888 11 | #a2fca2 12 | #ade5fc 13 | #b8d8a2 14 | #c6b4f0 15 | #d36363 16 | #fc9b9b 17 | #fcc28c 18 | #ffa 19 | #fff 20 | */.hljs{background:#333;color:#fff}.hljs-doctag,.hljs-meta-keyword,.hljs-name,.hljs-strong{font-weight:700}.hljs-code,.hljs-emphasis{font-style:italic}.hljs-section,.hljs-tag{color:#62c8f3}.hljs-selector-class,.hljs-selector-id,.hljs-template-variable,.hljs-variable{color:#ade5fc}.hljs-meta-string,.hljs-string{color:#a2fca2}.hljs-attr,.hljs-quote,.hljs-selector-attr{color:#7bd694}.hljs-tag .hljs-attr{color:inherit}.hljs-attribute,.hljs-title,.hljs-type{color:#ffa}.hljs-number,.hljs-symbol{color:#d36363}.hljs-bullet,.hljs-template-tag{color:#b8d8a2}.hljs-built_in,.hljs-keyword,.hljs-literal,.hljs-selector-tag{color:#fcc28c}.hljs-code,.hljs-comment,.hljs-formula{color:#888}.hljs-link,.hljs-regexp,.hljs-selector-pseudo{color:#c6b4f0}.hljs-meta{color:#fc9b9b}.hljs-deletion{background:#fc9b9b;color:#333}.hljs-addition{background:#a2fca2;color:#333}.hljs-subst{color:#fff}.hljs a{color:inherit}.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}.hljs mark{background:#555;color:inherit}.previewArea h1{font-size:2.2em;font-weight:700;line-height:1.1;padding-top:16px;margin-bottom:4px}.previewArea h2,.previewArea h3,.previewArea h4,.previewArea h5,.previewArea h6{line-height:1.5em;margin-top:2.2em;margin-bottom:4px}.previewArea h2{font-size:1.4em;margin:40px 10px 20px 0;padding-left:9px;border-left:6px solid #ff7e79;font-weight:700;line-height:1.4}.previewArea h3{font-weight:700;font-size:1.2em;line-height:1.4;margin:10px 0 5px;padding-top:10px}.previewArea h4{font-weight:700;text-transform:uppercase;font-size:1.1em;line-height:1.4;margin:10px 0 5px;padding-top:10px}.previewArea h5,.previewArea h6{font-size:.9em}.previewArea h5{font-weight:700;text-transform:uppercase}.previewArea h6{font-weight:400;color:#aaa}.previewArea img{width:100%;border-radius:5px;display:block;margin-bottom:15px;height:auto}.previewArea dl,.previewArea ol,.previewArea ul{margin-top:12px;margin-bottom:20px;padding-left:5%;line-height:1.8}.previewArea p{margin:0 0 20px;padding:0;line-height:1.8}.previewArea a{color:#f22f27;text-decoration:none}.previewArea a:hover{color:#f55852;text-decoration:underline}.previewArea a:focus{outline-offset:-2px}.previewArea blockquote{font-size:1em;font-style:normal;padding:30px 38px;margin:0 0 15px;position:relative;line-height:1.8;text-indent:0;border:none;color:#888}.previewArea blockquote:before{content:"\201c";left:12px;top:0;color:#e0e0e0;font-size:4em;font-family:Arial,serif;line-height:1em;font-weight:700;position:absolute}.previewArea blockquote:after{content:"\201d";right:12px;bottom:-26px;color:#e0e0e0;font-size:4em;font-family:Arial,serif;line-height:1em;font-weight:700;position:absolute;bottom:-31px}.previewArea strong,.previewArea dfn{font-weight:700}.previewArea em,.previewArea dfn{font-style:italic;font-weight:400}.previewArea del{text-decoration:line-through}.previewArea p>code{color:#c7264e;background-color:#f9f2f4;font-size:.95em;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px}.previewArea figure{margin:1em 0}.previewArea figcaption{font-size:.75em;padding:.5em 2em;margin-bottom:2em}.previewArea figure img{margin-bottom:0}.previewArea hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.previewArea ol p,.previewArea ul p{margin-bottom:0}.previewArea li{margin-bottom:.75em;margin-top:.75em}.previewArea ol#footnotes{font-size:.95em;padding-top:1em;border-top:1px solid #eaeaea;counter-reset:footer-counter;list-style:none;color:#555;padding-left:5%;margin:20px 0}.previewArea ol#footnotes li{margin-bottom:10px;margin-left:16px;font-weight:400;line-height:2;list-style-type:none}.previewArea ol#footnotes li:before{content:counter(footer-counter) ". ";counter-increment:footer-counter;font-weight:800;font-size:.95em}@keyframes highfade{0%{background-color:none}20%{background-color:#ff0}to{background-color:none}}@-webkit-keyframes highfade{0%{background-color:none}20%{background-color:#ff0}to{background-color:none}}.previewArea a:target,.previewArea ol#footnotes li:target,.previewArea sup a:target{animation-name:highfade;animation-duration:2s;animation-iteration-count:1;animation-timing-function:ease-in-out;-webkit-animation-name:highfade;-webkit-animation-duration:2s;-webkit-animation-iteration-count:1;-webkit-animation-timing-function:ease-in-out}.previewArea a:target{border:0;outline:0}.previewArea table{display:table;text-align:left}.previewArea tbody{border:0}.previewArea table tr{border:0;border-top:1px solid #ccc;background-color:#fff}.previewArea table tr:nth-child(2n){background-color:#f8f8f8}.previewArea table tr th,.previewArea table tr td{font-size:16px;border:1px solid #ccc;padding:5px 10px;text-align:left}.previewArea table tr th{font-weight:700;background-color:#f0f0f0}*{box-sizing:border-box;margin:0;padding:0}.container[data-v-02ce624e]{position:fixed;left:0;top:0;width:100%;height:100%;display:flex}.container .editorArea[data-v-02ce624e]{width:50%;height:100%;border-right:1px solid #e1e4e8;flex-shrink:0}.container .editorArea[data-v-02ce624e] .CodeMirror{height:100%;font-size:16px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;box-sizing:border-box;background-color:#f8f9fa}.container .previewArea[data-v-02ce624e]{position:relative;width:50%;height:100%;padding:20px;overflow:auto;flex-shrink:0} 21 | -------------------------------------------------------------------------------- /assets/index.86ac3985.css: -------------------------------------------------------------------------------- 1 | .CodeMirror{font-family:monospace;height:300px;color:#000;direction:ltr}.CodeMirror-lines{padding:4px 0}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{padding:0 4px}.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{background-color:#fff}.CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}.CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}.CodeMirror-guttermarker{color:#000}.CodeMirror-guttermarker-subtle{color:#999}.CodeMirror-cursor{border-left:1px solid black;border-right:none;width:0}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}.cm-fat-cursor div.CodeMirror-cursors{z-index:1}.cm-fat-cursor .CodeMirror-line::selection,.cm-fat-cursor .CodeMirror-line>span::selection,.cm-fat-cursor .CodeMirror-line>span>span::selection{background:transparent}.cm-fat-cursor .CodeMirror-line::-moz-selection,.cm-fat-cursor .CodeMirror-line>span::-moz-selection,.cm-fat-cursor .CodeMirror-line>span>span::-moz-selection{background:transparent}.cm-fat-cursor{caret-color:transparent}@-moz-keyframes blink{50%{background-color:transparent}}@-webkit-keyframes blink{50%{background-color:transparent}}@keyframes blink{50%{background-color:transparent}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-rulers{position:absolute;left:0;right:0;top:-50px;bottom:0;overflow:hidden}.CodeMirror-ruler{border-left:1px solid #ccc;top:0;bottom:0;position:absolute}.cm-s-default .cm-header{color:#00f}.cm-s-default .cm-quote{color:#090}.cm-negative{color:#d44}.cm-positive{color:#292}.cm-header,.cm-strong{font-weight:700}.cm-em{font-style:italic}.cm-link{text-decoration:underline}.cm-strikethrough{text-decoration:line-through}.cm-s-default .cm-keyword{color:#708}.cm-s-default .cm-atom{color:#219}.cm-s-default .cm-number{color:#164}.cm-s-default .cm-def{color:#00f}.cm-s-default .cm-variable-2{color:#05a}.cm-s-default .cm-variable-3,.cm-s-default .cm-type{color:#085}.cm-s-default .cm-comment{color:#a50}.cm-s-default .cm-string{color:#a11}.cm-s-default .cm-string-2{color:#f50}.cm-s-default .cm-meta,.cm-s-default .cm-qualifier{color:#555}.cm-s-default .cm-builtin{color:#30a}.cm-s-default .cm-bracket{color:#997}.cm-s-default .cm-tag{color:#170}.cm-s-default .cm-attribute{color:#00c}.cm-s-default .cm-hr{color:#999}.cm-s-default .cm-link{color:#00c}.cm-s-default .cm-error,.cm-invalidchar{color:red}.CodeMirror-composing{border-bottom:2px solid}div.CodeMirror span.CodeMirror-matchingbracket{color:#0b0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#a22}.CodeMirror-matchingtag{background:rgba(255,150,0,.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{position:relative;overflow:hidden;background:white}.CodeMirror-scroll{overflow:scroll!important;margin-bottom:-50px;margin-right:-50px;padding-bottom:50px;height:100%;outline:none;position:relative;z-index:0}.CodeMirror-sizer{position:relative;border-right:50px solid transparent}.CodeMirror-vscrollbar,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{position:absolute;z-index:6;display:none;outline:none}.CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}.CodeMirror-scrollbar-filler{right:0;bottom:0}.CodeMirror-gutter-filler{left:0;bottom:0}.CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}.CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-50px}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:none!important;border:none!important}.CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}.CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}.CodeMirror-gutter-wrapper ::selection{background-color:transparent}.CodeMirror-gutter-wrapper ::-moz-selection{background-color:transparent}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border-width:0;background:transparent;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-font-variant-ligatures:contextual;font-variant-ligatures:contextual}.CodeMirror-wrap pre.CodeMirror-line,.CodeMirror-wrap pre.CodeMirror-line-like{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-linebackground{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}.CodeMirror-linewidget{position:relative;z-index:2;padding:.1px}.CodeMirror-rtl pre{direction:rtl}.CodeMirror-code{outline:none}.CodeMirror-scroll,.CodeMirror-sizer,.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber{-moz-box-sizing:content-box;box-sizing:content-box}.CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}.CodeMirror-cursor{position:absolute;pointer-events:none}.CodeMirror-measure pre{position:static}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}div.CodeMirror-dragcursors,.CodeMirror-focused div.CodeMirror-cursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{background:#d7d4f0}.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}.cm-searching{background-color:#ffa;background-color:#ff06}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:""}span.CodeMirror-selectedtext{background:none}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*! 2 | Theme: Agate 3 | Author: (c) Taufik Nurrohman 4 | Maintainer: @taufik-nurrohman 5 | Updated: 2021-04-24 6 | 7 | #333 8 | #62c8f3 9 | #7bd694 10 | #888 11 | #a2fca2 12 | #ade5fc 13 | #b8d8a2 14 | #c6b4f0 15 | #d36363 16 | #fc9b9b 17 | #fcc28c 18 | #ffa 19 | #fff 20 | */.hljs{background:#333;color:#fff}.hljs-doctag,.hljs-meta-keyword,.hljs-name,.hljs-strong{font-weight:700}.hljs-code,.hljs-emphasis{font-style:italic}.hljs-section,.hljs-tag{color:#62c8f3}.hljs-selector-class,.hljs-selector-id,.hljs-template-variable,.hljs-variable{color:#ade5fc}.hljs-meta-string,.hljs-string{color:#a2fca2}.hljs-attr,.hljs-quote,.hljs-selector-attr{color:#7bd694}.hljs-tag .hljs-attr{color:inherit}.hljs-attribute,.hljs-title,.hljs-type{color:#ffa}.hljs-number,.hljs-symbol{color:#d36363}.hljs-bullet,.hljs-template-tag{color:#b8d8a2}.hljs-built_in,.hljs-keyword,.hljs-literal,.hljs-selector-tag{color:#fcc28c}.hljs-code,.hljs-comment,.hljs-formula{color:#888}.hljs-link,.hljs-regexp,.hljs-selector-pseudo{color:#c6b4f0}.hljs-meta{color:#fc9b9b}.hljs-deletion{background:#fc9b9b;color:#333}.hljs-addition{background:#a2fca2;color:#333}.hljs-subst{color:#fff}.hljs a{color:inherit}.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}.hljs mark{background:#555;color:inherit}.previewArea h1{font-size:2.2em;font-weight:700;line-height:1.1;padding-top:16px;margin-bottom:4px}.previewArea h2,.previewArea h3,.previewArea h4,.previewArea h5,.previewArea h6{line-height:1.5em;margin-top:2.2em;margin-bottom:4px}.previewArea h2{font-size:1.4em;margin:40px 10px 20px 0;padding-left:9px;border-left:6px solid #ff7e79;font-weight:700;line-height:1.4}.previewArea h3{font-weight:700;font-size:1.2em;line-height:1.4;margin:10px 0 5px;padding-top:10px}.previewArea h4{font-weight:700;text-transform:uppercase;font-size:1.1em;line-height:1.4;margin:10px 0 5px;padding-top:10px}.previewArea h5,.previewArea h6{font-size:.9em}.previewArea h5{font-weight:700;text-transform:uppercase}.previewArea h6{font-weight:400;color:#aaa}.previewArea img{width:100%;border-radius:5px;display:block;margin-bottom:15px;height:auto}.previewArea dl,.previewArea ol,.previewArea ul{margin-top:12px;margin-bottom:20px;padding-left:5%;line-height:1.8}.previewArea p{margin:0 0 20px;padding:0;line-height:1.8}.previewArea a{color:#f22f27;text-decoration:none}.previewArea a:hover{color:#f55852;text-decoration:underline}.previewArea a:focus{outline-offset:-2px}.previewArea blockquote{font-size:1em;font-style:normal;padding:30px 38px;margin:0 0 15px;position:relative;line-height:1.8;text-indent:0;border:none;color:#888}.previewArea blockquote:before{content:"\201c";left:12px;top:0;color:#e0e0e0;font-size:4em;font-family:Arial,serif;line-height:1em;font-weight:700;position:absolute}.previewArea blockquote:after{content:"\201d";right:12px;bottom:-26px;color:#e0e0e0;font-size:4em;font-family:Arial,serif;line-height:1em;font-weight:700;position:absolute;bottom:-31px}.previewArea strong,.previewArea dfn{font-weight:700}.previewArea em,.previewArea dfn{font-style:italic;font-weight:400}.previewArea del{text-decoration:line-through}.previewArea p>code{color:#c7264e;background-color:#f9f2f4;font-size:.95em;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px}.previewArea figure{margin:1em 0}.previewArea figcaption{font-size:.75em;padding:.5em 2em;margin-bottom:2em}.previewArea figure img{margin-bottom:0}.previewArea hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.previewArea ol p,.previewArea ul p{margin-bottom:0}.previewArea li{margin-bottom:.75em;margin-top:.75em}.previewArea ol#footnotes{font-size:.95em;padding-top:1em;border-top:1px solid #eaeaea;counter-reset:footer-counter;list-style:none;color:#555;padding-left:5%;margin:20px 0}.previewArea ol#footnotes li{margin-bottom:10px;margin-left:16px;font-weight:400;line-height:2;list-style-type:none}.previewArea ol#footnotes li:before{content:counter(footer-counter) ". ";counter-increment:footer-counter;font-weight:800;font-size:.95em}@keyframes highfade{0%{background-color:none}20%{background-color:#ff0}to{background-color:none}}@-webkit-keyframes highfade{0%{background-color:none}20%{background-color:#ff0}to{background-color:none}}.previewArea a:target,.previewArea ol#footnotes li:target,.previewArea sup a:target{animation-name:highfade;animation-duration:2s;animation-iteration-count:1;animation-timing-function:ease-in-out;-webkit-animation-name:highfade;-webkit-animation-duration:2s;-webkit-animation-iteration-count:1;-webkit-animation-timing-function:ease-in-out}.previewArea a:target{border:0;outline:0}.previewArea table{display:table;text-align:left}.previewArea tbody{border:0}.previewArea table tr{border:0;border-top:1px solid #ccc;background-color:#fff}.previewArea table tr:nth-child(2n){background-color:#f8f8f8}.previewArea table tr th,.previewArea table tr td{font-size:16px;border:1px solid #ccc;padding:5px 10px;text-align:left}.previewArea table tr th{font-weight:700;background-color:#f0f0f0}*{box-sizing:border-box;margin:0;padding:0}.container[data-v-773e4fca]{position:fixed;left:0;top:0;width:100%;height:100%;display:flex}.container .editorArea[data-v-773e4fca]{width:50%;height:100%;border-right:1px solid #e1e4e8;flex-shrink:0}.container .editorArea[data-v-773e4fca] .CodeMirror{height:100%;font-size:16px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;box-sizing:border-box;background-color:#f8f9fa}.container .previewArea[data-v-773e4fca]{position:relative;width:50%;height:100%;padding:20px;overflow:auto;flex-shrink:0} 21 | -------------------------------------------------------------------------------- /assets/index.b8999e71.css: -------------------------------------------------------------------------------- 1 | .CodeMirror{font-family:monospace;height:300px;color:#000;direction:ltr}.CodeMirror-lines{padding:4px 0}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{padding:0 4px}.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{background-color:#fff}.CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}.CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}.CodeMirror-guttermarker{color:#000}.CodeMirror-guttermarker-subtle{color:#999}.CodeMirror-cursor{border-left:1px solid black;border-right:none;width:0}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}.cm-fat-cursor div.CodeMirror-cursors{z-index:1}.cm-fat-cursor .CodeMirror-line::selection,.cm-fat-cursor .CodeMirror-line>span::selection,.cm-fat-cursor .CodeMirror-line>span>span::selection{background:transparent}.cm-fat-cursor .CodeMirror-line::-moz-selection,.cm-fat-cursor .CodeMirror-line>span::-moz-selection,.cm-fat-cursor .CodeMirror-line>span>span::-moz-selection{background:transparent}.cm-fat-cursor{caret-color:transparent}@-moz-keyframes blink{50%{background-color:transparent}}@-webkit-keyframes blink{50%{background-color:transparent}}@keyframes blink{50%{background-color:transparent}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-rulers{position:absolute;left:0;right:0;top:-50px;bottom:0;overflow:hidden}.CodeMirror-ruler{border-left:1px solid #ccc;top:0;bottom:0;position:absolute}.cm-s-default .cm-header{color:#00f}.cm-s-default .cm-quote{color:#090}.cm-negative{color:#d44}.cm-positive{color:#292}.cm-header,.cm-strong{font-weight:700}.cm-em{font-style:italic}.cm-link{text-decoration:underline}.cm-strikethrough{text-decoration:line-through}.cm-s-default .cm-keyword{color:#708}.cm-s-default .cm-atom{color:#219}.cm-s-default .cm-number{color:#164}.cm-s-default .cm-def{color:#00f}.cm-s-default .cm-variable-2{color:#05a}.cm-s-default .cm-variable-3,.cm-s-default .cm-type{color:#085}.cm-s-default .cm-comment{color:#a50}.cm-s-default .cm-string{color:#a11}.cm-s-default .cm-string-2{color:#f50}.cm-s-default .cm-meta,.cm-s-default .cm-qualifier{color:#555}.cm-s-default .cm-builtin{color:#30a}.cm-s-default .cm-bracket{color:#997}.cm-s-default .cm-tag{color:#170}.cm-s-default .cm-attribute{color:#00c}.cm-s-default .cm-hr{color:#999}.cm-s-default .cm-link{color:#00c}.cm-s-default .cm-error,.cm-invalidchar{color:red}.CodeMirror-composing{border-bottom:2px solid}div.CodeMirror span.CodeMirror-matchingbracket{color:#0b0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#a22}.CodeMirror-matchingtag{background:rgba(255,150,0,.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{position:relative;overflow:hidden;background:white}.CodeMirror-scroll{overflow:scroll!important;margin-bottom:-50px;margin-right:-50px;padding-bottom:50px;height:100%;outline:none;position:relative;z-index:0}.CodeMirror-sizer{position:relative;border-right:50px solid transparent}.CodeMirror-vscrollbar,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{position:absolute;z-index:6;display:none;outline:none}.CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}.CodeMirror-scrollbar-filler{right:0;bottom:0}.CodeMirror-gutter-filler{left:0;bottom:0}.CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}.CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-50px}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:none!important;border:none!important}.CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}.CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}.CodeMirror-gutter-wrapper ::selection{background-color:transparent}.CodeMirror-gutter-wrapper ::-moz-selection{background-color:transparent}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border-width:0;background:transparent;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-font-variant-ligatures:contextual;font-variant-ligatures:contextual}.CodeMirror-wrap pre.CodeMirror-line,.CodeMirror-wrap pre.CodeMirror-line-like{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-linebackground{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}.CodeMirror-linewidget{position:relative;z-index:2;padding:.1px}.CodeMirror-rtl pre{direction:rtl}.CodeMirror-code{outline:none}.CodeMirror-scroll,.CodeMirror-sizer,.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber{-moz-box-sizing:content-box;box-sizing:content-box}.CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}.CodeMirror-cursor{position:absolute;pointer-events:none}.CodeMirror-measure pre{position:static}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}div.CodeMirror-dragcursors,.CodeMirror-focused div.CodeMirror-cursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{background:#d7d4f0}.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}.cm-searching{background-color:#ffa;background-color:#ff06}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:""}span.CodeMirror-selectedtext{background:none}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*! 2 | Theme: Agate 3 | Author: (c) Taufik Nurrohman 4 | Maintainer: @taufik-nurrohman 5 | Updated: 2021-04-24 6 | 7 | #333 8 | #62c8f3 9 | #7bd694 10 | #888 11 | #a2fca2 12 | #ade5fc 13 | #b8d8a2 14 | #c6b4f0 15 | #d36363 16 | #fc9b9b 17 | #fcc28c 18 | #ffa 19 | #fff 20 | */.hljs{background:#333;color:#fff}.hljs-doctag,.hljs-meta-keyword,.hljs-name,.hljs-strong{font-weight:700}.hljs-code,.hljs-emphasis{font-style:italic}.hljs-section,.hljs-tag{color:#62c8f3}.hljs-selector-class,.hljs-selector-id,.hljs-template-variable,.hljs-variable{color:#ade5fc}.hljs-meta-string,.hljs-string{color:#a2fca2}.hljs-attr,.hljs-quote,.hljs-selector-attr{color:#7bd694}.hljs-tag .hljs-attr{color:inherit}.hljs-attribute,.hljs-title,.hljs-type{color:#ffa}.hljs-number,.hljs-symbol{color:#d36363}.hljs-bullet,.hljs-template-tag{color:#b8d8a2}.hljs-built_in,.hljs-keyword,.hljs-literal,.hljs-selector-tag{color:#fcc28c}.hljs-code,.hljs-comment,.hljs-formula{color:#888}.hljs-link,.hljs-regexp,.hljs-selector-pseudo{color:#c6b4f0}.hljs-meta{color:#fc9b9b}.hljs-deletion{background:#fc9b9b;color:#333}.hljs-addition{background:#a2fca2;color:#333}.hljs-subst{color:#fff}.hljs a{color:inherit}.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}.hljs mark{background:#555;color:inherit}.previewArea h1{font-size:2.2em;font-weight:700;line-height:1.1;padding-top:16px;margin-bottom:4px}.previewArea h2,.previewArea h3,.previewArea h4,.previewArea h5,.previewArea h6{line-height:1.5em;margin-top:2.2em;margin-bottom:4px}.previewArea h2{font-size:1.4em;margin:40px 10px 20px 0;padding-left:9px;border-left:6px solid #ff7e79;font-weight:700;line-height:1.4}.previewArea h3{font-weight:700;font-size:1.2em;line-height:1.4;margin:10px 0 5px;padding-top:10px}.previewArea h4{font-weight:700;text-transform:uppercase;font-size:1.1em;line-height:1.4;margin:10px 0 5px;padding-top:10px}.previewArea h5,.previewArea h6{font-size:.9em}.previewArea h5{font-weight:700;text-transform:uppercase}.previewArea h6{font-weight:400;color:#aaa}.previewArea img{width:100%;border-radius:5px;display:block;margin-bottom:15px;height:auto}.previewArea dl,.previewArea ol,.previewArea ul{margin-top:12px;margin-bottom:20px;padding-left:5%;line-height:1.8}.previewArea p{margin:0 0 20px;padding:0;line-height:1.8}.previewArea a{color:#f22f27;text-decoration:none}.previewArea a:hover{color:#f55852;text-decoration:underline}.previewArea a:focus{outline-offset:-2px}.previewArea blockquote{font-size:1em;font-style:normal;padding:30px 38px;margin:0 0 15px;position:relative;line-height:1.8;text-indent:0;border:none;color:#888}.previewArea blockquote:before{content:"\201c";left:12px;top:0;color:#e0e0e0;font-size:4em;font-family:Arial,serif;line-height:1em;font-weight:700;position:absolute}.previewArea blockquote:after{content:"\201d";right:12px;bottom:-26px;color:#e0e0e0;font-size:4em;font-family:Arial,serif;line-height:1em;font-weight:700;position:absolute;bottom:-31px}.previewArea strong,.previewArea dfn{font-weight:700}.previewArea em,.previewArea dfn{font-style:italic;font-weight:400}.previewArea del{text-decoration:line-through}.previewArea p>code{color:#c7264e;background-color:#f9f2f4;font-size:.95em;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px}.previewArea figure{margin:1em 0}.previewArea figcaption{font-size:.75em;padding:.5em 2em;margin-bottom:2em}.previewArea figure img{margin-bottom:0}.previewArea hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.previewArea ol p,.previewArea ul p{margin-bottom:0}.previewArea li{margin-bottom:.75em;margin-top:.75em}.previewArea ol#footnotes{font-size:.95em;padding-top:1em;border-top:1px solid #eaeaea;counter-reset:footer-counter;list-style:none;color:#555;padding-left:5%;margin:20px 0}.previewArea ol#footnotes li{margin-bottom:10px;margin-left:16px;font-weight:400;line-height:2;list-style-type:none}.previewArea ol#footnotes li:before{content:counter(footer-counter) ". ";counter-increment:footer-counter;font-weight:800;font-size:.95em}@keyframes highfade{0%{background-color:none}20%{background-color:#ff0}to{background-color:none}}@-webkit-keyframes highfade{0%{background-color:none}20%{background-color:#ff0}to{background-color:none}}.previewArea a:target,.previewArea ol#footnotes li:target,.previewArea sup a:target{animation-name:highfade;animation-duration:2s;animation-iteration-count:1;animation-timing-function:ease-in-out;-webkit-animation-name:highfade;-webkit-animation-duration:2s;-webkit-animation-iteration-count:1;-webkit-animation-timing-function:ease-in-out}.previewArea a:target{border:0;outline:0}.previewArea table{display:table;text-align:left}.previewArea tbody{border:0}.previewArea table tr{border:0;border-top:1px solid #ccc;background-color:#fff}.previewArea table tr:nth-child(2n){background-color:#f8f8f8}.previewArea table tr th,.previewArea table tr td{font-size:16px;border:1px solid #ccc;padding:5px 10px;text-align:left}.previewArea table tr th{font-weight:700;background-color:#f0f0f0}*{box-sizing:border-box;margin:0;padding:0}.container[data-v-5212cd5a]{position:fixed;left:0;top:0;width:100%;height:100%;display:flex}.container .editorArea[data-v-5212cd5a]{width:50%;height:100%;border-right:1px solid #e1e4e8;flex-shrink:0}.container .editorArea[data-v-5212cd5a] .CodeMirror{height:100%;font-size:16px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;box-sizing:border-box;background-color:#f8f9fa}.container .previewArea[data-v-5212cd5a]{position:relative;width:50%;height:100%;padding:20px;overflow:auto;flex-shrink:0} 21 | -------------------------------------------------------------------------------- /assets/index.e2664d1b.css: -------------------------------------------------------------------------------- 1 | .CodeMirror{font-family:monospace;height:300px;color:#000;direction:ltr}.CodeMirror-lines{padding:4px 0}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{padding:0 4px}.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{background-color:#fff}.CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}.CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}.CodeMirror-guttermarker{color:#000}.CodeMirror-guttermarker-subtle{color:#999}.CodeMirror-cursor{border-left:1px solid black;border-right:none;width:0}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}.cm-fat-cursor div.CodeMirror-cursors{z-index:1}.cm-fat-cursor .CodeMirror-line::selection,.cm-fat-cursor .CodeMirror-line>span::selection,.cm-fat-cursor .CodeMirror-line>span>span::selection{background:transparent}.cm-fat-cursor .CodeMirror-line::-moz-selection,.cm-fat-cursor .CodeMirror-line>span::-moz-selection,.cm-fat-cursor .CodeMirror-line>span>span::-moz-selection{background:transparent}.cm-fat-cursor{caret-color:transparent}@-moz-keyframes blink{50%{background-color:transparent}}@-webkit-keyframes blink{50%{background-color:transparent}}@keyframes blink{50%{background-color:transparent}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-rulers{position:absolute;left:0;right:0;top:-50px;bottom:0;overflow:hidden}.CodeMirror-ruler{border-left:1px solid #ccc;top:0;bottom:0;position:absolute}.cm-s-default .cm-header{color:#00f}.cm-s-default .cm-quote{color:#090}.cm-negative{color:#d44}.cm-positive{color:#292}.cm-header,.cm-strong{font-weight:700}.cm-em{font-style:italic}.cm-link{text-decoration:underline}.cm-strikethrough{text-decoration:line-through}.cm-s-default .cm-keyword{color:#708}.cm-s-default .cm-atom{color:#219}.cm-s-default .cm-number{color:#164}.cm-s-default .cm-def{color:#00f}.cm-s-default .cm-variable-2{color:#05a}.cm-s-default .cm-variable-3,.cm-s-default .cm-type{color:#085}.cm-s-default .cm-comment{color:#a50}.cm-s-default .cm-string{color:#a11}.cm-s-default .cm-string-2{color:#f50}.cm-s-default .cm-meta,.cm-s-default .cm-qualifier{color:#555}.cm-s-default .cm-builtin{color:#30a}.cm-s-default .cm-bracket{color:#997}.cm-s-default .cm-tag{color:#170}.cm-s-default .cm-attribute{color:#00c}.cm-s-default .cm-hr{color:#999}.cm-s-default .cm-link{color:#00c}.cm-s-default .cm-error,.cm-invalidchar{color:red}.CodeMirror-composing{border-bottom:2px solid}div.CodeMirror span.CodeMirror-matchingbracket{color:#0b0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#a22}.CodeMirror-matchingtag{background:rgba(255,150,0,.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{position:relative;overflow:hidden;background:white}.CodeMirror-scroll{overflow:scroll!important;margin-bottom:-50px;margin-right:-50px;padding-bottom:50px;height:100%;outline:none;position:relative;z-index:0}.CodeMirror-sizer{position:relative;border-right:50px solid transparent}.CodeMirror-vscrollbar,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{position:absolute;z-index:6;display:none;outline:none}.CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}.CodeMirror-scrollbar-filler{right:0;bottom:0}.CodeMirror-gutter-filler{left:0;bottom:0}.CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}.CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-50px}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:none!important;border:none!important}.CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}.CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}.CodeMirror-gutter-wrapper ::selection{background-color:transparent}.CodeMirror-gutter-wrapper ::-moz-selection{background-color:transparent}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border-width:0;background:transparent;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-font-variant-ligatures:contextual;font-variant-ligatures:contextual}.CodeMirror-wrap pre.CodeMirror-line,.CodeMirror-wrap pre.CodeMirror-line-like{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-linebackground{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}.CodeMirror-linewidget{position:relative;z-index:2;padding:.1px}.CodeMirror-rtl pre{direction:rtl}.CodeMirror-code{outline:none}.CodeMirror-scroll,.CodeMirror-sizer,.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber{-moz-box-sizing:content-box;box-sizing:content-box}.CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}.CodeMirror-cursor{position:absolute;pointer-events:none}.CodeMirror-measure pre{position:static}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}div.CodeMirror-dragcursors,.CodeMirror-focused div.CodeMirror-cursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{background:#d7d4f0}.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}.cm-searching{background-color:#ffa;background-color:#ff06}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:""}span.CodeMirror-selectedtext{background:none}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*! 2 | Theme: Agate 3 | Author: (c) Taufik Nurrohman 4 | Maintainer: @taufik-nurrohman 5 | Updated: 2021-04-24 6 | 7 | #333 8 | #62c8f3 9 | #7bd694 10 | #888 11 | #a2fca2 12 | #ade5fc 13 | #b8d8a2 14 | #c6b4f0 15 | #d36363 16 | #fc9b9b 17 | #fcc28c 18 | #ffa 19 | #fff 20 | */.hljs{background:#333;color:#fff}.hljs-doctag,.hljs-meta-keyword,.hljs-name,.hljs-strong{font-weight:700}.hljs-code,.hljs-emphasis{font-style:italic}.hljs-section,.hljs-tag{color:#62c8f3}.hljs-selector-class,.hljs-selector-id,.hljs-template-variable,.hljs-variable{color:#ade5fc}.hljs-meta-string,.hljs-string{color:#a2fca2}.hljs-attr,.hljs-quote,.hljs-selector-attr{color:#7bd694}.hljs-tag .hljs-attr{color:inherit}.hljs-attribute,.hljs-title,.hljs-type{color:#ffa}.hljs-number,.hljs-symbol{color:#d36363}.hljs-bullet,.hljs-template-tag{color:#b8d8a2}.hljs-built_in,.hljs-keyword,.hljs-literal,.hljs-selector-tag{color:#fcc28c}.hljs-code,.hljs-comment,.hljs-formula{color:#888}.hljs-link,.hljs-regexp,.hljs-selector-pseudo{color:#c6b4f0}.hljs-meta{color:#fc9b9b}.hljs-deletion{background:#fc9b9b;color:#333}.hljs-addition{background:#a2fca2;color:#333}.hljs-subst{color:#fff}.hljs a{color:inherit}.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}.hljs mark{background:#555;color:inherit}.previewArea h1{font-size:2.2em;font-weight:700;line-height:1.1;padding-top:16px;margin-bottom:4px}.previewArea h2,.previewArea h3,.previewArea h4,.previewArea h5,.previewArea h6{line-height:1.5em;margin-top:2.2em;margin-bottom:4px}.previewArea h2{font-size:1.4em;margin:40px 10px 20px 0;padding-left:9px;border-left:6px solid #ff7e79;font-weight:700;line-height:1.4}.previewArea h3{font-weight:700;font-size:1.2em;line-height:1.4;margin:10px 0 5px;padding-top:10px}.previewArea h4{font-weight:700;text-transform:uppercase;font-size:1.1em;line-height:1.4;margin:10px 0 5px;padding-top:10px}.previewArea h5,.previewArea h6{font-size:.9em}.previewArea h5{font-weight:700;text-transform:uppercase}.previewArea h6{font-weight:400;color:#aaa}.previewArea img{width:100%;border-radius:5px;display:block;margin-bottom:15px;height:auto}.previewArea dl,.previewArea ol,.previewArea ul{margin-top:12px;margin-bottom:20px;padding-left:5%;line-height:1.8}.previewArea p{margin:0 0 20px;padding:0;line-height:1.8}.previewArea a{color:#f22f27;text-decoration:none}.previewArea a:hover{color:#f55852;text-decoration:underline}.previewArea a:focus{outline-offset:-2px}.previewArea blockquote{font-size:1em;font-style:normal;padding:30px 38px;margin:0 0 15px;position:relative;line-height:1.8;text-indent:0;border:none;color:#888}.previewArea blockquote:before{content:"\201c";left:12px;top:0;color:#e0e0e0;font-size:4em;font-family:Arial,serif;line-height:1em;font-weight:700;position:absolute}.previewArea blockquote:after{content:"\201d";right:12px;bottom:-26px;color:#e0e0e0;font-size:4em;font-family:Arial,serif;line-height:1em;font-weight:700;position:absolute;bottom:-31px}.previewArea strong,.previewArea dfn{font-weight:700}.previewArea em,.previewArea dfn{font-style:italic;font-weight:400}.previewArea del{text-decoration:line-through}.previewArea p>code{color:#c7264e;background-color:#f9f2f4;font-size:.95em;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px}.previewArea figure{margin:1em 0}.previewArea figcaption{font-size:.75em;padding:.5em 2em;margin-bottom:2em}.previewArea figure img{margin-bottom:0}.previewArea hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.previewArea ol p,.previewArea ul p{margin-bottom:0}.previewArea li{margin-bottom:.75em;margin-top:.75em}.previewArea ol#footnotes{font-size:.95em;padding-top:1em;border-top:1px solid #eaeaea;counter-reset:footer-counter;list-style:none;color:#555;padding-left:5%;margin:20px 0}.previewArea ol#footnotes li{margin-bottom:10px;margin-left:16px;font-weight:400;line-height:2;list-style-type:none}.previewArea ol#footnotes li:before{content:counter(footer-counter) ". ";counter-increment:footer-counter;font-weight:800;font-size:.95em}@keyframes highfade{0%{background-color:none}20%{background-color:#ff0}to{background-color:none}}@-webkit-keyframes highfade{0%{background-color:none}20%{background-color:#ff0}to{background-color:none}}.previewArea a:target,.previewArea ol#footnotes li:target,.previewArea sup a:target{animation-name:highfade;animation-duration:2s;animation-iteration-count:1;animation-timing-function:ease-in-out;-webkit-animation-name:highfade;-webkit-animation-duration:2s;-webkit-animation-iteration-count:1;-webkit-animation-timing-function:ease-in-out}.previewArea a:target{border:0;outline:0}.previewArea table{display:table;text-align:left}.previewArea tbody{border:0}.previewArea table tr{border:0;border-top:1px solid #ccc;background-color:#fff}.previewArea table tr:nth-child(2n){background-color:#f8f8f8}.previewArea table tr th,.previewArea table tr td{font-size:16px;border:1px solid #ccc;padding:5px 10px;text-align:left}.previewArea table tr th{font-weight:700;background-color:#f0f0f0}*{box-sizing:border-box;margin:0;padding:0}.container[data-v-3812c0b6]{position:fixed;left:0;top:0;width:100%;height:100%;display:flex}.container .editorArea[data-v-3812c0b6]{width:50%;height:100%;border-right:1px solid #e1e4e8;flex-shrink:0}.container .editorArea[data-v-3812c0b6] .CodeMirror{height:100%;font-size:16px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;box-sizing:border-box;background-color:#f8f9fa}.container .previewArea[data-v-3812c0b6]{position:relative;width:50%;height:100%;padding:20px;overflow:auto;flex-shrink:0} 21 | -------------------------------------------------------------------------------- /assets/index.ec365a63.css: -------------------------------------------------------------------------------- 1 | .CodeMirror{font-family:monospace;height:300px;color:#000;direction:ltr}.CodeMirror-lines{padding:4px 0}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{padding:0 4px}.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{background-color:#fff}.CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}.CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}.CodeMirror-guttermarker{color:#000}.CodeMirror-guttermarker-subtle{color:#999}.CodeMirror-cursor{border-left:1px solid black;border-right:none;width:0}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}.cm-fat-cursor div.CodeMirror-cursors{z-index:1}.cm-fat-cursor .CodeMirror-line::selection,.cm-fat-cursor .CodeMirror-line>span::selection,.cm-fat-cursor .CodeMirror-line>span>span::selection{background:transparent}.cm-fat-cursor .CodeMirror-line::-moz-selection,.cm-fat-cursor .CodeMirror-line>span::-moz-selection,.cm-fat-cursor .CodeMirror-line>span>span::-moz-selection{background:transparent}.cm-fat-cursor{caret-color:transparent}@-moz-keyframes blink{50%{background-color:transparent}}@-webkit-keyframes blink{50%{background-color:transparent}}@keyframes blink{50%{background-color:transparent}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-rulers{position:absolute;left:0;right:0;top:-50px;bottom:0;overflow:hidden}.CodeMirror-ruler{border-left:1px solid #ccc;top:0;bottom:0;position:absolute}.cm-s-default .cm-header{color:#00f}.cm-s-default .cm-quote{color:#090}.cm-negative{color:#d44}.cm-positive{color:#292}.cm-header,.cm-strong{font-weight:700}.cm-em{font-style:italic}.cm-link{text-decoration:underline}.cm-strikethrough{text-decoration:line-through}.cm-s-default .cm-keyword{color:#708}.cm-s-default .cm-atom{color:#219}.cm-s-default .cm-number{color:#164}.cm-s-default .cm-def{color:#00f}.cm-s-default .cm-variable-2{color:#05a}.cm-s-default .cm-variable-3,.cm-s-default .cm-type{color:#085}.cm-s-default .cm-comment{color:#a50}.cm-s-default .cm-string{color:#a11}.cm-s-default .cm-string-2{color:#f50}.cm-s-default .cm-meta,.cm-s-default .cm-qualifier{color:#555}.cm-s-default .cm-builtin{color:#30a}.cm-s-default .cm-bracket{color:#997}.cm-s-default .cm-tag{color:#170}.cm-s-default .cm-attribute{color:#00c}.cm-s-default .cm-hr{color:#999}.cm-s-default .cm-link{color:#00c}.cm-s-default .cm-error,.cm-invalidchar{color:red}.CodeMirror-composing{border-bottom:2px solid}div.CodeMirror span.CodeMirror-matchingbracket{color:#0b0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#a22}.CodeMirror-matchingtag{background:rgba(255,150,0,.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{position:relative;overflow:hidden;background:white}.CodeMirror-scroll{overflow:scroll!important;margin-bottom:-50px;margin-right:-50px;padding-bottom:50px;height:100%;outline:none;position:relative;z-index:0}.CodeMirror-sizer{position:relative;border-right:50px solid transparent}.CodeMirror-vscrollbar,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{position:absolute;z-index:6;display:none;outline:none}.CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}.CodeMirror-scrollbar-filler{right:0;bottom:0}.CodeMirror-gutter-filler{left:0;bottom:0}.CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}.CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-50px}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:none!important;border:none!important}.CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}.CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}.CodeMirror-gutter-wrapper ::selection{background-color:transparent}.CodeMirror-gutter-wrapper ::-moz-selection{background-color:transparent}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border-width:0;background:transparent;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-font-variant-ligatures:contextual;font-variant-ligatures:contextual}.CodeMirror-wrap pre.CodeMirror-line,.CodeMirror-wrap pre.CodeMirror-line-like{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-linebackground{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}.CodeMirror-linewidget{position:relative;z-index:2;padding:.1px}.CodeMirror-rtl pre{direction:rtl}.CodeMirror-code{outline:none}.CodeMirror-scroll,.CodeMirror-sizer,.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber{-moz-box-sizing:content-box;box-sizing:content-box}.CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}.CodeMirror-cursor{position:absolute;pointer-events:none}.CodeMirror-measure pre{position:static}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}div.CodeMirror-dragcursors,.CodeMirror-focused div.CodeMirror-cursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{background:#d7d4f0}.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}.cm-searching{background-color:#ffa;background-color:#ff06}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:""}span.CodeMirror-selectedtext{background:none}.previewArea h1{font-size:2.2em;font-weight:700;line-height:1.1;padding-top:16px;margin-bottom:4px}.previewArea h2,.previewArea h3,.previewArea h4,.previewArea h5,.previewArea h6{line-height:1.5em;margin-top:2.2em;margin-bottom:4px}.previewArea h2{font-size:1.4em;margin:40px 10px 20px 0;padding-left:9px;border-left:6px solid #ff7e79;font-weight:700;line-height:1.4}.previewArea h3{font-weight:700;font-size:1.2em;line-height:1.4;margin:10px 0 5px;padding-top:10px}.previewArea h4{font-weight:700;text-transform:uppercase;font-size:1.1em;line-height:1.4;margin:10px 0 5px;padding-top:10px}.previewArea h5,.previewArea h6{font-size:.9em}.previewArea h5{font-weight:700;text-transform:uppercase}.previewArea h6{font-weight:400;color:#aaa}.previewArea img{width:100%;border-radius:5px;display:block;margin-bottom:15px;height:auto}.previewArea dl,.previewArea ol,.previewArea ul{margin-top:12px;margin-bottom:20px;padding-left:5%;line-height:1.8}.previewArea p{margin:0 0 20px;padding:0;line-height:1.8}.previewArea a{color:#f22f27;text-decoration:none}.previewArea a:hover{color:#f55852;text-decoration:underline}.previewArea a:focus{outline-offset:-2px}.previewArea blockquote{font-size:1em;font-style:normal;padding:30px 38px;margin:0 0 15px;position:relative;line-height:1.8;text-indent:0;border:none;color:#888}.previewArea blockquote:before{content:"\201c";left:12px;top:0;color:#e0e0e0;font-size:4em;font-family:Arial,serif;line-height:1em;font-weight:700;position:absolute}.previewArea blockquote:after{content:"\201d";right:12px;bottom:-26px;color:#e0e0e0;font-size:4em;font-family:Arial,serif;line-height:1em;font-weight:700;position:absolute;bottom:-31px}.previewArea strong,.previewArea dfn{font-weight:700}.previewArea em,.previewArea dfn{font-style:italic;font-weight:400}.previewArea del{text-decoration:line-through}.previewArea pre{margin:0 0 25px;font-size:13px;line-height:1.42857;word-break:break-all;word-wrap:break-word;border-radius:4px;white-space:pre-wrap;display:block;background:#f8f8f8;padding:10px 20px;border:none;color:#666;font-family:Courier,sans-serif}.previewArea code{color:#c7254e;background-color:#f9f2f4;border-radius:4px;font-family:Menlo,Monaco,Consolas,Courier New,monospace;padding:2px 4px;font-size:90%}.previewArea p>code{color:#c7264e;background-color:#f9f2f4;font-size:.95em;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px}.previewArea figure{margin:1em 0}.previewArea figcaption{font-size:.75em;padding:.5em 2em;margin-bottom:2em}.previewArea figure img{margin-bottom:0}.previewArea hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.previewArea ol p,.previewArea ul p{margin-bottom:0}.previewArea li{margin-bottom:.75em;margin-top:.75em}.previewArea ol#footnotes{font-size:.95em;padding-top:1em;border-top:1px solid #eaeaea;counter-reset:footer-counter;list-style:none;color:#555;padding-left:5%;margin:20px 0}.previewArea ol#footnotes li{margin-bottom:10px;margin-left:16px;font-weight:400;line-height:2;list-style-type:none}.previewArea ol#footnotes li:before{content:counter(footer-counter) ". ";counter-increment:footer-counter;font-weight:800;font-size:.95em}@keyframes highfade{0%{background-color:none}20%{background-color:#ff0}to{background-color:none}}@-webkit-keyframes highfade{0%{background-color:none}20%{background-color:#ff0}to{background-color:none}}.previewArea a:target,.previewArea ol#footnotes li:target,.previewArea sup a:target{animation-name:highfade;animation-duration:2s;animation-iteration-count:1;animation-timing-function:ease-in-out;-webkit-animation-name:highfade;-webkit-animation-duration:2s;-webkit-animation-iteration-count:1;-webkit-animation-timing-function:ease-in-out}.previewArea a:target{border:0;outline:0}.container[data-v-dc9fa1be]{position:fixed;left:0;top:0;width:100%;height:100%;display:flex}.container .editorArea[data-v-dc9fa1be]{width:50%;height:100%;border-right:1px solid #e1e4e8;flex-shrink:0}.container .editorArea[data-v-dc9fa1be] .CodeMirror{height:100%;font-size:16px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;box-sizing:border-box;background-color:#f8f9fa}.container .previewArea[data-v-dc9fa1be]{position:relative;width:50%;height:100%;padding:20px;overflow:auto;flex-shrink:0} 2 | -------------------------------------------------------------------------------- /assets/index.ed47f019.css: -------------------------------------------------------------------------------- 1 | .CodeMirror{font-family:monospace;height:300px;color:#000;direction:ltr}.CodeMirror-lines{padding:4px 0}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{padding:0 4px}.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{background-color:#fff}.CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}.CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}.CodeMirror-guttermarker{color:#000}.CodeMirror-guttermarker-subtle{color:#999}.CodeMirror-cursor{border-left:1px solid black;border-right:none;width:0}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}.cm-fat-cursor div.CodeMirror-cursors{z-index:1}.cm-fat-cursor .CodeMirror-line::selection,.cm-fat-cursor .CodeMirror-line>span::selection,.cm-fat-cursor .CodeMirror-line>span>span::selection{background:transparent}.cm-fat-cursor .CodeMirror-line::-moz-selection,.cm-fat-cursor .CodeMirror-line>span::-moz-selection,.cm-fat-cursor .CodeMirror-line>span>span::-moz-selection{background:transparent}.cm-fat-cursor{caret-color:transparent}@-moz-keyframes blink{50%{background-color:transparent}}@-webkit-keyframes blink{50%{background-color:transparent}}@keyframes blink{50%{background-color:transparent}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-rulers{position:absolute;left:0;right:0;top:-50px;bottom:0;overflow:hidden}.CodeMirror-ruler{border-left:1px solid #ccc;top:0;bottom:0;position:absolute}.cm-s-default .cm-header{color:#00f}.cm-s-default .cm-quote{color:#090}.cm-negative{color:#d44}.cm-positive{color:#292}.cm-header,.cm-strong{font-weight:700}.cm-em{font-style:italic}.cm-link{text-decoration:underline}.cm-strikethrough{text-decoration:line-through}.cm-s-default .cm-keyword{color:#708}.cm-s-default .cm-atom{color:#219}.cm-s-default .cm-number{color:#164}.cm-s-default .cm-def{color:#00f}.cm-s-default .cm-variable-2{color:#05a}.cm-s-default .cm-variable-3,.cm-s-default .cm-type{color:#085}.cm-s-default .cm-comment{color:#a50}.cm-s-default .cm-string{color:#a11}.cm-s-default .cm-string-2{color:#f50}.cm-s-default .cm-meta,.cm-s-default .cm-qualifier{color:#555}.cm-s-default .cm-builtin{color:#30a}.cm-s-default .cm-bracket{color:#997}.cm-s-default .cm-tag{color:#170}.cm-s-default .cm-attribute{color:#00c}.cm-s-default .cm-hr{color:#999}.cm-s-default .cm-link{color:#00c}.cm-s-default .cm-error,.cm-invalidchar{color:red}.CodeMirror-composing{border-bottom:2px solid}div.CodeMirror span.CodeMirror-matchingbracket{color:#0b0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#a22}.CodeMirror-matchingtag{background:rgba(255,150,0,.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{position:relative;overflow:hidden;background:white}.CodeMirror-scroll{overflow:scroll!important;margin-bottom:-50px;margin-right:-50px;padding-bottom:50px;height:100%;outline:none;position:relative;z-index:0}.CodeMirror-sizer{position:relative;border-right:50px solid transparent}.CodeMirror-vscrollbar,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{position:absolute;z-index:6;display:none;outline:none}.CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}.CodeMirror-scrollbar-filler{right:0;bottom:0}.CodeMirror-gutter-filler{left:0;bottom:0}.CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}.CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-50px}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:none!important;border:none!important}.CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}.CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}.CodeMirror-gutter-wrapper ::selection{background-color:transparent}.CodeMirror-gutter-wrapper ::-moz-selection{background-color:transparent}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border-width:0;background:transparent;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-font-variant-ligatures:contextual;font-variant-ligatures:contextual}.CodeMirror-wrap pre.CodeMirror-line,.CodeMirror-wrap pre.CodeMirror-line-like{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-linebackground{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}.CodeMirror-linewidget{position:relative;z-index:2;padding:.1px}.CodeMirror-rtl pre{direction:rtl}.CodeMirror-code{outline:none}.CodeMirror-scroll,.CodeMirror-sizer,.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber{-moz-box-sizing:content-box;box-sizing:content-box}.CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}.CodeMirror-cursor{position:absolute;pointer-events:none}.CodeMirror-measure pre{position:static}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}div.CodeMirror-dragcursors,.CodeMirror-focused div.CodeMirror-cursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{background:#d7d4f0}.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}.cm-searching{background-color:#ffa;background-color:#ff06}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:""}span.CodeMirror-selectedtext{background:none}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*! 2 | Theme: Agate 3 | Author: (c) Taufik Nurrohman 4 | Maintainer: @taufik-nurrohman 5 | Updated: 2021-04-24 6 | 7 | #333 8 | #62c8f3 9 | #7bd694 10 | #888 11 | #a2fca2 12 | #ade5fc 13 | #b8d8a2 14 | #c6b4f0 15 | #d36363 16 | #fc9b9b 17 | #fcc28c 18 | #ffa 19 | #fff 20 | */.hljs{background:#333;color:#fff}.hljs-doctag,.hljs-meta-keyword,.hljs-name,.hljs-strong{font-weight:700}.hljs-code,.hljs-emphasis{font-style:italic}.hljs-section,.hljs-tag{color:#62c8f3}.hljs-selector-class,.hljs-selector-id,.hljs-template-variable,.hljs-variable{color:#ade5fc}.hljs-meta-string,.hljs-string{color:#a2fca2}.hljs-attr,.hljs-quote,.hljs-selector-attr{color:#7bd694}.hljs-tag .hljs-attr{color:inherit}.hljs-attribute,.hljs-title,.hljs-type{color:#ffa}.hljs-number,.hljs-symbol{color:#d36363}.hljs-bullet,.hljs-template-tag{color:#b8d8a2}.hljs-built_in,.hljs-keyword,.hljs-literal,.hljs-selector-tag{color:#fcc28c}.hljs-code,.hljs-comment,.hljs-formula{color:#888}.hljs-link,.hljs-regexp,.hljs-selector-pseudo{color:#c6b4f0}.hljs-meta{color:#fc9b9b}.hljs-deletion{background:#fc9b9b;color:#333}.hljs-addition{background:#a2fca2;color:#333}.hljs-subst{color:#fff}.hljs a{color:inherit}.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}.hljs mark{background:#555;color:inherit}.previewArea h1{font-size:2.2em;font-weight:700;line-height:1.1;padding-top:16px;margin-bottom:4px}.previewArea h2,.previewArea h3,.previewArea h4,.previewArea h5,.previewArea h6{line-height:1.5em;margin-top:2.2em;margin-bottom:4px}.previewArea h2{font-size:1.4em;margin:40px 10px 20px 0;padding-left:9px;border-left:6px solid #ff7e79;font-weight:700;line-height:1.4}.previewArea h3{font-weight:700;font-size:1.2em;line-height:1.4;margin:10px 0 5px;padding-top:10px}.previewArea h4{font-weight:700;text-transform:uppercase;font-size:1.1em;line-height:1.4;margin:10px 0 5px;padding-top:10px}.previewArea h5,.previewArea h6{font-size:.9em}.previewArea h5{font-weight:700;text-transform:uppercase}.previewArea h6{font-weight:400;color:#aaa}.previewArea img{width:100%;border-radius:5px;display:block;margin-bottom:15px;height:auto}.previewArea dl,.previewArea ol,.previewArea ul{margin-top:12px;margin-bottom:20px;padding-left:5%;line-height:1.8}.previewArea p{margin:0 0 20px;padding:0;line-height:1.8}.previewArea a{color:#f22f27;text-decoration:none}.previewArea a:hover{color:#f55852;text-decoration:underline}.previewArea a:focus{outline-offset:-2px}.previewArea blockquote{font-size:1em;font-style:normal;padding:30px 38px;margin:0 0 15px;position:relative;line-height:1.8;text-indent:0;border:none;color:#888}.previewArea blockquote:before{content:"\201c";left:12px;top:0;color:#e0e0e0;font-size:4em;font-family:Arial,serif;line-height:1em;font-weight:700;position:absolute}.previewArea blockquote:after{content:"\201d";right:12px;bottom:-26px;color:#e0e0e0;font-size:4em;font-family:Arial,serif;line-height:1em;font-weight:700;position:absolute;bottom:-31px}.previewArea strong,.previewArea dfn{font-weight:700}.previewArea em,.previewArea dfn{font-style:italic;font-weight:400}.previewArea del{text-decoration:line-through}.previewArea p>code{color:#c7264e;background-color:#f9f2f4;font-size:.95em;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px}.previewArea figure{margin:1em 0}.previewArea figcaption{font-size:.75em;padding:.5em 2em;margin-bottom:2em}.previewArea figure img{margin-bottom:0}.previewArea hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.previewArea ol p,.previewArea ul p{margin-bottom:0}.previewArea li{margin-bottom:.75em;margin-top:.75em}.previewArea ol#footnotes{font-size:.95em;padding-top:1em;border-top:1px solid #eaeaea;counter-reset:footer-counter;list-style:none;color:#555;padding-left:5%;margin:20px 0}.previewArea ol#footnotes li{margin-bottom:10px;margin-left:16px;font-weight:400;line-height:2;list-style-type:none}.previewArea ol#footnotes li:before{content:counter(footer-counter) ". ";counter-increment:footer-counter;font-weight:800;font-size:.95em}@keyframes highfade{0%{background-color:none}20%{background-color:#ff0}to{background-color:none}}@-webkit-keyframes highfade{0%{background-color:none}20%{background-color:#ff0}to{background-color:none}}.previewArea a:target,.previewArea ol#footnotes li:target,.previewArea sup a:target{animation-name:highfade;animation-duration:2s;animation-iteration-count:1;animation-timing-function:ease-in-out;-webkit-animation-name:highfade;-webkit-animation-duration:2s;-webkit-animation-iteration-count:1;-webkit-animation-timing-function:ease-in-out}.previewArea a:target{border:0;outline:0}.previewArea table{display:table;text-align:left}.previewArea tbody{border:0}.previewArea table tr{border:0;border-top:1px solid #ccc;background-color:#fff}.previewArea table tr:nth-child(2n){background-color:#f8f8f8}.previewArea table tr th,.previewArea table tr td{font-size:16px;border:1px solid #ccc;padding:5px 10px;text-align:left}.previewArea table tr th{font-weight:700;background-color:#f0f0f0}*{box-sizing:border-box;margin:0;padding:0}.container[data-v-8888ded2]{position:fixed;left:0;top:0;width:100%;height:100%;display:flex}.container .editorArea[data-v-8888ded2]{width:50%;height:100%;border-right:1px solid #e1e4e8;flex-shrink:0}.container .editorArea[data-v-8888ded2] .CodeMirror{height:100%;font-size:16px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;box-sizing:border-box;background-color:#f8f9fa}.container .previewArea[data-v-8888ded2]{position:relative;width:50%;height:100%;padding:20px;overflow:auto;flex-shrink:0} 21 | -------------------------------------------------------------------------------- /assets/index.fa71bd79.css: -------------------------------------------------------------------------------- 1 | .CodeMirror{font-family:monospace;height:300px;color:#000;direction:ltr}.CodeMirror-lines{padding:4px 0}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{padding:0 4px}.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{background-color:#fff}.CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}.CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}.CodeMirror-guttermarker{color:#000}.CodeMirror-guttermarker-subtle{color:#999}.CodeMirror-cursor{border-left:1px solid black;border-right:none;width:0}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}.cm-fat-cursor div.CodeMirror-cursors{z-index:1}.cm-fat-cursor .CodeMirror-line::selection,.cm-fat-cursor .CodeMirror-line>span::selection,.cm-fat-cursor .CodeMirror-line>span>span::selection{background:transparent}.cm-fat-cursor .CodeMirror-line::-moz-selection,.cm-fat-cursor .CodeMirror-line>span::-moz-selection,.cm-fat-cursor .CodeMirror-line>span>span::-moz-selection{background:transparent}.cm-fat-cursor{caret-color:transparent}@-moz-keyframes blink{50%{background-color:transparent}}@-webkit-keyframes blink{50%{background-color:transparent}}@keyframes blink{50%{background-color:transparent}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-rulers{position:absolute;left:0;right:0;top:-50px;bottom:0;overflow:hidden}.CodeMirror-ruler{border-left:1px solid #ccc;top:0;bottom:0;position:absolute}.cm-s-default .cm-header{color:#00f}.cm-s-default .cm-quote{color:#090}.cm-negative{color:#d44}.cm-positive{color:#292}.cm-header,.cm-strong{font-weight:700}.cm-em{font-style:italic}.cm-link{text-decoration:underline}.cm-strikethrough{text-decoration:line-through}.cm-s-default .cm-keyword{color:#708}.cm-s-default .cm-atom{color:#219}.cm-s-default .cm-number{color:#164}.cm-s-default .cm-def{color:#00f}.cm-s-default .cm-variable-2{color:#05a}.cm-s-default .cm-variable-3,.cm-s-default .cm-type{color:#085}.cm-s-default .cm-comment{color:#a50}.cm-s-default .cm-string{color:#a11}.cm-s-default .cm-string-2{color:#f50}.cm-s-default .cm-meta,.cm-s-default .cm-qualifier{color:#555}.cm-s-default .cm-builtin{color:#30a}.cm-s-default .cm-bracket{color:#997}.cm-s-default .cm-tag{color:#170}.cm-s-default .cm-attribute{color:#00c}.cm-s-default .cm-hr{color:#999}.cm-s-default .cm-link{color:#00c}.cm-s-default .cm-error,.cm-invalidchar{color:red}.CodeMirror-composing{border-bottom:2px solid}div.CodeMirror span.CodeMirror-matchingbracket{color:#0b0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#a22}.CodeMirror-matchingtag{background:rgba(255,150,0,.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{position:relative;overflow:hidden;background:white}.CodeMirror-scroll{overflow:scroll!important;margin-bottom:-50px;margin-right:-50px;padding-bottom:50px;height:100%;outline:none;position:relative;z-index:0}.CodeMirror-sizer{position:relative;border-right:50px solid transparent}.CodeMirror-vscrollbar,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{position:absolute;z-index:6;display:none;outline:none}.CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}.CodeMirror-scrollbar-filler{right:0;bottom:0}.CodeMirror-gutter-filler{left:0;bottom:0}.CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}.CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-50px}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:none!important;border:none!important}.CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}.CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}.CodeMirror-gutter-wrapper ::selection{background-color:transparent}.CodeMirror-gutter-wrapper ::-moz-selection{background-color:transparent}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border-width:0;background:transparent;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-font-variant-ligatures:contextual;font-variant-ligatures:contextual}.CodeMirror-wrap pre.CodeMirror-line,.CodeMirror-wrap pre.CodeMirror-line-like{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-linebackground{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}.CodeMirror-linewidget{position:relative;z-index:2;padding:.1px}.CodeMirror-rtl pre{direction:rtl}.CodeMirror-code{outline:none}.CodeMirror-scroll,.CodeMirror-sizer,.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber{-moz-box-sizing:content-box;box-sizing:content-box}.CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}.CodeMirror-cursor{position:absolute;pointer-events:none}.CodeMirror-measure pre{position:static}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}div.CodeMirror-dragcursors,.CodeMirror-focused div.CodeMirror-cursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{background:#d7d4f0}.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}.cm-searching{background-color:#ffa;background-color:#ff06}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:""}span.CodeMirror-selectedtext{background:none}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*! 2 | Theme: Agate 3 | Author: (c) Taufik Nurrohman 4 | Maintainer: @taufik-nurrohman 5 | Updated: 2021-04-24 6 | 7 | #333 8 | #62c8f3 9 | #7bd694 10 | #888 11 | #a2fca2 12 | #ade5fc 13 | #b8d8a2 14 | #c6b4f0 15 | #d36363 16 | #fc9b9b 17 | #fcc28c 18 | #ffa 19 | #fff 20 | */.hljs{background:#333;color:#fff}.hljs-doctag,.hljs-meta-keyword,.hljs-name,.hljs-strong{font-weight:700}.hljs-code,.hljs-emphasis{font-style:italic}.hljs-section,.hljs-tag{color:#62c8f3}.hljs-selector-class,.hljs-selector-id,.hljs-template-variable,.hljs-variable{color:#ade5fc}.hljs-meta-string,.hljs-string{color:#a2fca2}.hljs-attr,.hljs-quote,.hljs-selector-attr{color:#7bd694}.hljs-tag .hljs-attr{color:inherit}.hljs-attribute,.hljs-title,.hljs-type{color:#ffa}.hljs-number,.hljs-symbol{color:#d36363}.hljs-bullet,.hljs-template-tag{color:#b8d8a2}.hljs-built_in,.hljs-keyword,.hljs-literal,.hljs-selector-tag{color:#fcc28c}.hljs-code,.hljs-comment,.hljs-formula{color:#888}.hljs-link,.hljs-regexp,.hljs-selector-pseudo{color:#c6b4f0}.hljs-meta{color:#fc9b9b}.hljs-deletion{background:#fc9b9b;color:#333}.hljs-addition{background:#a2fca2;color:#333}.hljs-subst{color:#fff}.hljs a{color:inherit}.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}.hljs mark{background:#555;color:inherit}.previewArea h1{font-size:2.2em;font-weight:700;line-height:1.1;padding-top:16px;margin-bottom:4px}.previewArea h2,.previewArea h3,.previewArea h4,.previewArea h5,.previewArea h6{line-height:1.5em;margin-top:2.2em;margin-bottom:4px}.previewArea h2{font-size:1.4em;margin:40px 10px 20px 0;padding-left:9px;border-left:6px solid #ff7e79;font-weight:700;line-height:1.4}.previewArea h3{font-weight:700;font-size:1.2em;line-height:1.4;margin:10px 0 5px;padding-top:10px}.previewArea h4{font-weight:700;text-transform:uppercase;font-size:1.1em;line-height:1.4;margin:10px 0 5px;padding-top:10px}.previewArea h5,.previewArea h6{font-size:.9em}.previewArea h5{font-weight:700;text-transform:uppercase}.previewArea h6{font-weight:400;color:#aaa}.previewArea img{width:100%;border-radius:5px;display:block;margin-bottom:15px;height:auto}.previewArea dl,.previewArea ol,.previewArea ul{margin-top:12px;margin-bottom:20px;padding-left:5%;line-height:1.8}.previewArea p{margin:0 0 20px;padding:0;line-height:1.8}.previewArea a{color:#f22f27;text-decoration:none}.previewArea a:hover{color:#f55852;text-decoration:underline}.previewArea a:focus{outline-offset:-2px}.previewArea blockquote{font-size:1em;font-style:normal;padding:30px 38px;margin:0 0 15px;position:relative;line-height:1.8;text-indent:0;border:none;color:#888}.previewArea blockquote:before{content:"\201c";left:12px;top:0;color:#e0e0e0;font-size:4em;font-family:Arial,serif;line-height:1em;font-weight:700;position:absolute}.previewArea blockquote:after{content:"\201d";right:12px;bottom:-26px;color:#e0e0e0;font-size:4em;font-family:Arial,serif;line-height:1em;font-weight:700;position:absolute;bottom:-31px}.previewArea strong,.previewArea dfn{font-weight:700}.previewArea em,.previewArea dfn{font-style:italic;font-weight:400}.previewArea del{text-decoration:line-through}.previewArea p>code{color:#c7264e;background-color:#f9f2f4;font-size:.95em;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px}.previewArea figure{margin:1em 0}.previewArea figcaption{font-size:.75em;padding:.5em 2em;margin-bottom:2em}.previewArea figure img{margin-bottom:0}.previewArea hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.previewArea ol p,.previewArea ul p{margin-bottom:0}.previewArea li{margin-bottom:.75em;margin-top:.75em}.previewArea ol#footnotes{font-size:.95em;padding-top:1em;border-top:1px solid #eaeaea;counter-reset:footer-counter;list-style:none;color:#555;padding-left:5%;margin:20px 0}.previewArea ol#footnotes li{margin-bottom:10px;margin-left:16px;font-weight:400;line-height:2;list-style-type:none}.previewArea ol#footnotes li:before{content:counter(footer-counter) ". ";counter-increment:footer-counter;font-weight:800;font-size:.95em}@keyframes highfade{0%{background-color:none}20%{background-color:#ff0}to{background-color:none}}@-webkit-keyframes highfade{0%{background-color:none}20%{background-color:#ff0}to{background-color:none}}.previewArea a:target,.previewArea ol#footnotes li:target,.previewArea sup a:target{animation-name:highfade;animation-duration:2s;animation-iteration-count:1;animation-timing-function:ease-in-out;-webkit-animation-name:highfade;-webkit-animation-duration:2s;-webkit-animation-iteration-count:1;-webkit-animation-timing-function:ease-in-out}.previewArea a:target{border:0;outline:0}.previewArea table{display:table;text-align:left}.previewArea tbody{border:0}.previewArea table tr{border:0;border-top:1px solid #ccc;background-color:#fff}.previewArea table tr:nth-child(2n){background-color:#f8f8f8}.previewArea table tr th,.previewArea table tr td{font-size:16px;border:1px solid #ccc;padding:5px 10px;text-align:left}.previewArea table tr th{font-weight:700;background-color:#f0f0f0}*{box-sizing:border-box;margin:0;padding:0}.container[data-v-d825d2ec]{position:fixed;left:0;top:0;width:100%;height:100%;display:flex}.container .editorArea[data-v-d825d2ec]{width:50%;height:100%;border-right:1px solid #e1e4e8;flex-shrink:0}.container .editorArea[data-v-d825d2ec] .CodeMirror{height:100%;font-size:16px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;box-sizing:border-box;background-color:#f8f9fa}.container .previewArea[data-v-d825d2ec]{position:relative;width:50%;height:100%;padding:20px;overflow:auto;flex-shrink:0} 21 | -------------------------------------------------------------------------------- /demo/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | package-lock.json 14 | *.local 15 | 16 | # Editor directories and files 17 | .vscode/* 18 | !.vscode/extensions.json 19 | .idea 20 | .DS_Store 21 | *.suo 22 | *.ntvs* 23 | *.njsproj 24 | *.sln 25 | *.sw? 26 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 基于CodeMirror和unified实现的一个能精确同步滚动的Markdown编辑器 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite-project", 3 | "private": true, 4 | "version": "0.0.0", 5 | "scripts": { 6 | "dev": "vite --host", 7 | "build": "vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "codemirror": "^5.65.3", 12 | "rehype-highlight": "^5.0.2", 13 | "rehype-stringify": "^9.0.3", 14 | "remark-gfm": "^3.0.1", 15 | "remark-parse": "^10.0.1", 16 | "remark-rehype": "^10.1.0", 17 | "unified": "^10.1.2", 18 | "vue": "^3.2.25", 19 | "hast-util-to-text": "^3.0.0", 20 | "lowlight": "^2.0.0", 21 | "unist-util-visit": "^4.0.0" 22 | }, 23 | "devDependencies": { 24 | "@vitejs/plugin-vue": "^2.3.3", 25 | "less": "^4.1.2", 26 | "vite": "^2.9.9" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /demo/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanglin2/markdown_editor_sync_scroll_demo/aed69c32aeca6f52807ca6f5074980260c827480/demo/public/favicon.ico -------------------------------------------------------------------------------- /demo/src/App.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 213 | 214 | 221 | 255 | -------------------------------------------------------------------------------- /demo/src/article.md: -------------------------------------------------------------------------------- 1 | # 简介 2 | 3 | 随着`Markdown`越来越流行，`Markdown`编辑器也越来越多，除去所见即所得的实时预览编辑器外，通常其他`Markdown`编辑器都会采用源代码和预览双栏显示的方式，就像掘金的编辑器一样： 4 | 5 | ![图片名称](http://aliyuncdn.lxqnsys.com/markdown/GaN5ceCCyifnJe5A8nrGsmkjC.png) 6 | 7 | 这种方式一般会有一个同步滚动的功能，比如在编辑区域滚动时，预览区域会随着滚动，反之亦然，方便两边对照查看，如果你用过多个平台的`Markdown`编辑器的话可能会发现有的平台编辑器同步滚动非常精确，比如掘金、`segmentfault`、`CSDN`等，而有的平台编辑器当图片比较多的情况下同步滚动两边会偏差会比较大，比如开源中国（底层使用的是开源的[ editor.md](https://github.com/pandao/editor.md)）、`51CTO`等，另外还有少数平台则连同步滚动的功能都没有（再见）。 8 | 9 | 不精确的同步滚动实现起来比较简单，遵循一个等式即可： 10 | 11 | ```js 12 | // 已滚动距离与总的可滚动距离的比值相等 13 | editorArea.scrollTop / (editorArea.scrollHeight - editorArea.clientHeight) = previewArea.scrollTop / (previewArea.scrollHeight - previewArea.clientHeight) 14 | ``` 15 | 16 | 那么如何才能让同步滚动精确一点呢，我们可以参考[bytemd](https://github.com/bytedance/bytemd)，实现的核心就是使用[unified](https://github.com/unifiedjs/unified)，预知详细信息，且看下文分解。 17 | 18 | 19 | 20 | # unified简介 21 | 22 | `unified`是一个通过使用语法树来进行解析、检查、转换和序列化文本内容的接口，可以处理`Markdown`、`HTML`和自然语言。它是一个库，作为一个独立的执行接口，负责执行器的角色，调用其生态上相关的插件完成具体任务。同时`unified`也代表一个生态，要完成前面说的文本处理任务需要配合其生态下的各种插件，截止到目前，它生态中的插件已经有三百多个！鉴于数量实在太多，很容易迷失在它庞大的生态里，可谓是劝退生态。 23 | 24 | `unified`主要有四个生态：[remark](https://unifiedjs.com/explore/project/remarkjs/remark/)、[rehype](https://unifiedjs.com/explore/project/rehypejs/rehype/)、[retext](https://unifiedjs.com/explore/project/retextjs/retext/)、[redot](https://unifiedjs.com/explore/project/redotjs/redot/)，这四个生态下又有各自的生态，此外还包括处理语法树的一些工具、其他构建相关的工具。 25 | 26 | `unified`的执行流程说出来我们应该都比较熟悉，分为三个阶段： 27 | 28 | 1.`Parse` 29 | 30 | 将输入解析成语法树，[mdast](https://github.com/syntax-tree/mdast)负责定义规范，`remark`和`rehype`等处理器否则创建。 31 | 32 | 2.`Transform` 33 | 34 | 上一步生成的语法树会被传递给各种插件，进行修改、检查、转换等工作。 35 | 36 | 3.`Stringify` 37 | 38 | 这一步会将处理后的语法树再重新生成文本内容。 39 | 40 | `unified`的独特之处在于允许一个处理流程中进行不同格式之间的转换，所以能满足我们本文的需求，也就是将`Markdown`语法转换成`HTML`语法，我们会用到其生态中的`remark`（解析`Markdown`）、`rehype`（解析`HTml`）。 41 | 42 | 具体来说就是使用`remark`生态下的[remark-parse](https://github.com/remarkjs/remark/tree/main/packages/remark-parse)插件来将输入的`Markdown`文本转换成`Markdown`语法树，然后使用[remark-rehype](https://github.com/remarkjs/remark-rehype)桥接插件来将`Markdown`语法树转换成`HTML`语法树，最后使用[rehype-stringify](https://github.com/rehypejs/rehype/tree/main/packages/rehype-stringify)插件来将`HTML`语法树生成`HTML`字符串。 43 | 44 | 45 | 46 | # 搭建基本结构 47 | 48 | > 本文项目使用`Vue3`构建。 49 | 50 | 编辑器我们使用[CodeMirror](https://codemirror.net/)，`Markdown`转`HTML`我们使用上一节介绍的[unified](https://github.com/unifiedjs/unified)，安装一下相关依赖： 51 | 52 | ```bash 53 | npm i codemirror unified remark-parse remark-rehype rehype-stringify 54 | ``` 55 | 56 | 那么基本结构及逻辑就很简单了，模板部分： 57 | 58 | ```HTML 59 | 65 | ``` 66 | 67 | `js`部分： 68 | 69 | ```js 70 | import { onMounted, ref } from "vue"; 71 | import CodeMirror from "codemirror"; 72 | import "codemirror/mode/markdown/markdown.js"; 73 | import "codemirror/lib/codemirror.css"; 74 | import { unified } from "unified"; 75 | import remarkParse from "remark-parse"; 76 | import remarkRehype from "remark-rehype"; 77 | import rehypeStringify from "rehype-stringify"; 78 | 79 | // CodeMirror编辑器实例 80 | let editor = null; 81 | // 编辑区域容器节点 82 | const editorArea = ref(null); 83 | // 预览区域容器节点 84 | const previewArea = ref(null); 85 | // markdown转换成的html字符串 86 | const htmlStr = ref(""); 87 | 88 | // 编辑器文本发生变化后进行转换工作 89 | const onChange = (instance) => { 90 | unified() 91 | .use(remarkParse) // 将markdown转换成语法树 92 | .use(remarkRehype) // 将markdown语法树转换成html语法树，转换之后就可以使用rehype相关的插件 93 | .use(rehypeStringify) // 将html语法树转换成html字符串 94 | .process(instance.doc.getValue())// 输入编辑器的文本内容 95 | .then( 96 | (file) => { 97 | // 将转换后得到的html插入到预览区节点内 98 | htmlStr.value = String(file); 99 | }, 100 | (error) => { 101 | throw error; 102 | } 103 | ); 104 | }; 105 | 106 | onMounted(() => { 107 | // 创建编辑器 108 | editor = CodeMirror(editorArea.value, { 109 | mode: "markdown", 110 | lineNumbers: true, 111 | lineWrapping: true, 112 | }); 113 | // 监听编辑器文本修改事件 114 | editor.on("change", onChange); 115 | }); 116 | ``` 117 | 118 | 监听到编辑器文本变化，就使用`unified`执行转换工作，效果如下： 119 | 120 | ![图片名称](http://aliyuncdn.lxqnsys.com/markdown/ywwkrt48ka5dfR7jDHzAYh7fd.gif) 121 | 122 | # 实现精确的同步滚动 123 | 124 | ## 基本实现原理 125 | 126 | 实现精确同步滚动的核心在于我们要能把编辑区域和预览区域两边的“节点”对应上，比如当编辑区域滚动到了一个一级标题处，我们要能知道在预览区域这个一级标题节点所在的位置，反之亦然。 127 | 128 | 预览区域的节点我们很容易获取到，因为就是普通的`DOM`节点，关键在于编辑区域的节点，编辑区域的节点是`CodeMirror`生成的，显然无法和预览区域的节点对应上，此时，`unified`不同于其他`Markdown`转`HTML`开源库（比如[markdown-it](https://github.com/markdown-it/markdown-it)、[marked](https://github.com/markedjs/marked)、[showdown](https://github.com/showdownjs/showdown)）的优点就显示出来了，一是因为它基于`AST`，二是因为它是管道化，在不同插件之间流转的是`AST`树，所以我们可以写个插件来获取到这个语法树数据，另外预览区域的`HTML`是基于`remark-rehype`插件输出的`HTML`语法树生成的，所以这个`HTML`语法树显然是可以和预览区域的实际节点对应上的，这样，只要我们把自定义的插件插入到`remark-rehype`之后即可获取到`HTML`语法树数据： 129 | 130 | ```js 131 | let treeData = null 132 | // 自定义插件，获取HTML语法树 133 | const customPlugin = () => (tree, file) => { 134 | console.log(tree); 135 | treeData = tree;// 保存到treeData变量上 136 | }; 137 | unified() 138 | .use(remarkParse) 139 | .use(remarkRehype) 140 | .use(customPlugin)// 我们的插件在remarkRehype插件之后使用 141 | .use(rehypeStringify) 142 | // ... 143 | ``` 144 | 145 | 看一下输出结果： 146 | 147 | 148 | ![图片名称](http://aliyuncdn.lxqnsys.com/markdown/rFHwaxXp3mDK3TsRQeZCzGB83.png) 149 | 150 | 接下来我们监听一下编辑区域的滚动事件，并在事件回调函数里打印一下语法树数据以及生成的预览区域的`DOM`节点数据： 151 | 152 | ```js 153 | editor.on("scroll", onEditorScroll); 154 | 155 | // 编辑区域的滚动事件 156 | const onEditorScroll = () => { 157 | computedPosition(); 158 | }; 159 | 160 | // 计算位置信息 161 | const computedPosition = () => { 162 | console.log(treeData, treeData.children.length); 163 | console.log( 164 | previewArea.value.childNodes, 165 | previewArea.value.childNodes.length 166 | ); 167 | }; 168 | ``` 169 | 170 | 打印结果： 171 | 172 | ![图片名称](http://aliyuncdn.lxqnsys.com/markdown/2AchMcpzYNMdzWwK2txSbyDWb.png) 173 | 174 | 注意看控制台输出的语法树的节点和实际的`DOM`节点是一一对应的。 175 | 176 | 当然仅仅对应还不够，`DOM`节点能通过`DOM`相关属性获取到它的高度信息，语法树的某个节点我们也需要能获取到它在编辑器中的高度信息，这个能实现依赖两点，一是语法树提供了某个节点的定位信息： 177 | 178 | 179 | ![图片名称](http://aliyuncdn.lxqnsys.com/markdown/PWw6JryziPp35QwRyKijk2Gph.png) 180 | 181 | 二是`CodeMirror`提供了获取某一行高度的接口： 182 | 183 | 184 | ![图片名称](http://aliyuncdn.lxqnsys.com/markdown/mxpiNTWdaHzkCYHDEBPe3m3CW.png) 185 | 186 | 所以我们能通过某个节点的起始行获取该节点在`CodeMirror`文档里的高度信息，测试一下： 187 | 188 | ```js 189 | const computedPosition = () => { 190 | console.log('---------------') 191 | treeData.children.forEach((child, index) => { 192 | // 如果节点类型不为element则跳过 193 | if (child.type !== "element") { 194 | return; 195 | } 196 | let offsetTop = editor.heightAtLine(child.position.start.line, 'local');// 设为local返回的坐标是相对于编辑器本身的，其他还有两个可选项：window、page 197 | console.log(child.children[0].value, offsetTop); 198 | }); 199 | }; 200 | ``` 201 | 202 | 203 | ![图片名称](http://aliyuncdn.lxqnsys.com/markdown/SSCQSwSMQEzb85pZM5FAYGcpc.png) 204 | 205 | 可以看到第一个节点的`offsetTop`为`80`，为什么不是`0`呢，上面`CodeMirror`的文档截图里其实有说明，返回的高度是这一行的底部到文档顶部的距离，所以要获取某行顶部所在高度相当于获取上一行底部所在高度，所以将行数减`1`即可： 206 | 207 | ```js 208 | let offsetTop = editor.heightAtLine(child.position.start.line - 1, 'local'); 209 | ``` 210 | 211 | 212 | ![图片名称](http://aliyuncdn.lxqnsys.com/markdown/tFnceCP7KZt2wH5erC8jW3TEc.png) 213 | 214 | 编辑区和预览区都能获取到节点的所在高度之后，接下来我们就可以这样做，当在编辑区域触发滚动后，先计算出两个区域的所有元素的所在高度信息，然后再获取编辑区域当前的滚动距离，求出当前具体滚动到了哪个节点内，因为两边的节点是一一对应的，所以可以求出预览区域对应节点的所在高度，最后让预览区域滚动到这个高度即可： 215 | 216 | ```js 217 | // 新增两个变量保存节点的位置信息 218 | let editorElementList = []; 219 | let previewElementList = []; 220 | 221 | const computedPosition = () => { 222 | // 获取预览区域容器节点下的所有子节点 223 | let previewChildNodes = previewArea.value.childNodes; 224 | // 清空数组 225 | editorElementList = []; 226 | previewElementList = []; 227 | // 遍历所有子节点 228 | treeData.children.forEach((child, index) => { 229 | if (child.type !== "element") { 230 | return; 231 | } 232 | let offsetTop = editor.heightAtLine(child.position.start.line - 1, "local"); 233 | // 保存两边节点的位置信息 234 | editorElementList.push(offsetTop); 235 | previewElementList.push(previewChildNodes[index].offsetTop); // 预览区域的容器节点previewArea需要设置定位 236 | }); 237 | }; 238 | 239 | const onEditorScroll = () => { 240 | computedPosition(); 241 | // 获取编辑器滚动信息 242 | let editorScrollInfo = editor.getScrollInfo(); 243 | // 找出当前滚动到的节点的索引 244 | let scrollElementIndex = null; 245 | for (let i = 0; i < editorElementList.length; i++) { 246 | if (editorScrollInfo.top < editorElementList[i]) { 247 | // 当前节点的offsetTop大于滚动的距离，相当于当前滚动到了前一个节点内 248 | scrollElementIndex = i - 1; 249 | break; 250 | } 251 | } 252 | if (scrollElementIndex >= 0) { 253 | // 设置预览区域的滚动距离为对应节点的offsetTop 254 | previewArea.value.scrollTop = previewElementList[scrollElementIndex]; 255 | } 256 | }; 257 | ``` 258 | 259 | 效果如下： 260 | 261 | ![图片名称](http://aliyuncdn.lxqnsys.com/markdown/DnEjfZmJC4kEn7ayE2Z5mXYy3.gif) 262 | 263 | ## 修复节点内滚动不同步的问题 264 | 265 | 可以看到跨节点滚动已经比较精准了，但是如果一个节点高度比较大，那么在节点内滚动右侧是不会同步滚动的： 266 | 267 | ![图片名称](http://aliyuncdn.lxqnsys.com/markdown/NZ4ybfBfCZKACXJebpz6TBtsp.gif) 268 | 269 | 原因很简单，我们的同步滚动目前只精确到某个节点，只要滚动没有超出该节点，那么计算出来的`scrollElementIndex`都是不变的，右侧的滚动当然就不会有变化。 270 | 271 | 解决这个问题的方法也很简单，还记得文章开头介绍非精准滚动的原理吗，这里我们也可以这么计算：编辑区域当前的滚动距离是已知的，当前滚动到的节点的顶部距离文档顶部的距离也是已知的，那么它们的差值就可以计算出来，然后使用下一个节点的`offsetTop`值减去当前节点的`offsetTop`值可以计算出当前节点的高度，那么这个差值和节点高度的比值也就可以计算出来： 272 | 273 | 274 | ![图片名称](http://aliyuncdn.lxqnsys.com/markdown/FArhXf38S2G5pWdd3RckAQFFt.png) 275 | 276 | 对于预览区域的对应节点来说也是一样，它们的比值应该是相等的，所以等式如下： 277 | 278 | ```js 279 | (editorScrollInfo.top - editorElementList[scrollElementIndex]) / 280 | (editorElementList[scrollElementIndex + 1] - 281 | editorElementList[scrollElementIndex]) 282 | = 283 | (previewArea.value.scrollTop - previewElementList[scrollElementIndex]) / (previewElementList[scrollElementIndex + 1] - 284 | previewElementList[scrollElementIndex]) 285 | ``` 286 | 287 | 根据这个等式计算出`previewArea.value.scrollTop`的值即可，最终代码： 288 | 289 | ```js 290 | const onEditorScroll = () => { 291 | computedPosition(); 292 | let editorScrollInfo = editor.getScrollInfo(); 293 | let scrollElementIndex = null; 294 | for (let i = 0; i < editorElementList.length; i++) { 295 | if (editorScrollInfo.top < editorElementList[i]) { 296 | scrollElementIndex = i - 1; 297 | break; 298 | } 299 | } 300 | if (scrollElementIndex >= 0) { 301 | // 编辑区域滚动距离和当前滚动到的节点的offsetTop的差值与当前节点高度的比值 302 | let ratio = 303 | (editorScrollInfo.top - editorElementList[scrollElementIndex]) / 304 | (editorElementList[scrollElementIndex + 1] - 305 | editorElementList[scrollElementIndex]); 306 | // 根据比值相等计算出预览区域应该滚动到的位置 307 | previewArea.value.scrollTop = 308 | ratio * 309 | (previewElementList[scrollElementIndex + 1] - 310 | previewElementList[scrollElementIndex]) + 311 | previewElementList[scrollElementIndex]; 312 | } 313 | }; 314 | ``` 315 | 316 | 效果如下： 317 | 318 | ![图片名称](http://aliyuncdn.lxqnsys.com/markdown/WW83RRMxzbdRkrid2dkCsfTnr.gif) 319 | 320 | ## 修复两边没有同时滚动到底部的问题 321 | 322 | 同步滚动已经基本上很精确了，不过还有个小问题，就是当编辑区域已经滚动到底了，而预览区域没有： 323 | 324 | ![图片名称](http://aliyuncdn.lxqnsys.com/markdown/WfnrwKaF86PZAkArt8pfCbM4h.gif) 325 | 326 | 这是符合逻辑的，但是不符合情理，所以当一边滚动到底时我们让另一边也到底： 327 | 328 | ```js 329 | const onEditorScroll = () => { 330 | computedPosition(); 331 | let editorScrollInfo = editor.getScrollInfo(); 332 | let scrollElementIndex = null; 333 | // ... 334 | // 编辑区域已经滚动到底部，那么预览区域也直接滚动到底部 335 | if ( 336 | editorScrollInfo.top >= 337 | editorScrollInfo.height - editorScrollInfo.clientHeight 338 | ) { 339 | previewArea.value.scrollTop = 340 | previewArea.value.scrollHeight - previewArea.value.clientHeight; 341 | return; 342 | } 343 | if (scrollElementIndex >= 0) { 344 | // ... 345 | } 346 | } 347 | ``` 348 | 349 | 效果如下： 350 | 351 | ![图片名称](http://aliyuncdn.lxqnsys.com/markdown/3PHaRryyYHwzjASNHwY4zf3xR.gif) 352 | 353 | ## 完善预览区滚动时编辑区同步滚动 354 | 355 | 最后让我们来完善一下在预览区域触发滚动，编辑区域跟随滚动的逻辑，监听一下预览区域的滚动事件： 356 | 357 | ```html 358 |
359 | ``` 360 | 361 | ```js 362 | const onPreviewScroll = () => { 363 | computedPosition(); 364 | let previewScrollTop = previewArea.value.scrollTop; 365 | // 找出当前滚动到元素索引 366 | let scrollElementIndex = null; 367 | for (let i = 0; i < previewElementList.length; i++) { 368 | if (previewScrollTop < previewElementList[i]) { 369 | scrollElementIndex = i - 1; 370 | break; 371 | } 372 | } 373 | // 已经滚动到底部 374 | if ( 375 | previewScrollTop >= 376 | previewArea.value.scrollHeight - previewArea.value.clientHeight 377 | ) { 378 | let editorScrollInfo = editor.getScrollInfo(); 379 | editor.scrollTo(0, editorScrollInfo.height - editorScrollInfo.clientHeight); 380 | return; 381 | } 382 | if (scrollElementIndex >= 0) { 383 | let ratio = 384 | (previewScrollTop - previewElementList[scrollElementIndex]) / 385 | (previewElementList[scrollElementIndex + 1] - 386 | previewElementList[scrollElementIndex]); 387 | let editorScrollTop = 388 | ratio * 389 | (editorElementList[scrollElementIndex + 1] - 390 | editorElementList[scrollElementIndex]) + 391 | editorElementList[scrollElementIndex]; 392 | editor.scrollTo(0, editorScrollTop); 393 | } 394 | }; 395 | ``` 396 | 397 | 逻辑基本是一样的，效果如下： 398 | 399 | ![图片名称](http://aliyuncdn.lxqnsys.com/markdown/RMAbz3t6FNp2dkMSmxferYPpW.gif) 400 | 401 | 问题又来了，我们鼠标已经停止滚动了，但是滚动却还在继续，原因也很简单，因为两边都绑定了滚动事件，所以互相触发跟随滚动，导致死循环，解决方式也很简单，我们设置一个变量来记录当前我们是在哪边触发滚动，另一边就不执行回调逻辑： 402 | 403 | ```html 404 |
409 |
416 | ``` 417 | 418 | ```js 419 | let currentScrollArea = ref(""); 420 | 421 | const onEditorScroll = () => { 422 | if (currentScrollArea.value !== "editor") { 423 | return; 424 | } 425 | // ... 426 | } 427 | 428 | // 预览区域的滚动事件 429 | const onPreviewScroll = () => { 430 | if (currentScrollArea.value !== "preview") { 431 | return; 432 | } 433 | // ... 434 | } 435 | ``` 436 | 437 | 最后我们再对表格和代码块增加一下支持，以及增加上主题样式，当当当当，一个简单的`Markdown`编辑器就诞生了： 438 | 439 | ![图片名称](http://aliyuncdn.lxqnsys.com/markdown/PXsSXwrXPmR2ktRRWb53XMiPF.gif) 440 | 441 | # 总结 442 | 443 | 本文通过使用`CodeMirror`和`unified`实现了一个能精确同步滚动的`Markdown`编辑器，思路来自于`bytemd`，具体实现上有点差异，可能还有其他实现方式，欢迎留言探讨。 444 | 445 | 在线`demo`：[https://wanglin2.github.io/markdown_editor_sync_scroll_demo/](https://wanglin2.github.io/markdown_editor_sync_scroll_demo/) 446 | 447 | 源码仓库：[https://github.com/wanglin2/markdown_editor_sync_scroll_demo](https://github.com/wanglin2/markdown_editor_sync_scroll_demo) -------------------------------------------------------------------------------- /demo/src/lib/rehype-highlight.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @typedef {import('lowlight').Root} LowlightRoot 3 | * @typedef {import('lowlight/lib/core.js').HighlightSyntax} HighlightSyntax 4 | * @typedef {import('hast').Root} Root 5 | * @typedef {import('hast').Element} Element 6 | * @typedef {Root|Root['children'][number]} Node 7 | * 8 | * @typedef Options 9 | * Configuration (optional). 10 | * @property {string} [prefix='hljs-'] 11 | * Prefix to use before classes. 12 | * @property {boolean|Array} [subset] 13 | * Scope of languages to check when auto-detecting (default: all languages). 14 | * Pass `false` to not highlight code without language classes. 15 | * @property {boolean} [ignoreMissing=false] 16 | * Swallow errors for missing languages. 17 | * By default, unregistered syntaxes throw an error when they are used. 18 | * Pass `true` to swallow those errors and thus ignore code with unknown code 19 | * languages. 20 | * @property {Array} [plainText=[]] 21 | * List of plain-text languages. 22 | * Pass any languages you would like to be kept as plain-text instead of 23 | * getting highlighted. 24 | * @property {Record>} [aliases={}] 25 | * Register more aliases. 26 | * Passed to `lowlight.registerAlias`. 27 | * @property {Record} [languages={}] 28 | * Register more languages. 29 | * Each key/value pair passed as arguments to `lowlight.registerLanguage`. 30 | */ 31 | 32 | import { lowlight } from 'lowlight' 33 | import { toText } from 'hast-util-to-text' 34 | import { visit } from 'unist-util-visit' 35 | 36 | const own = {}.hasOwnProperty 37 | 38 | /** 39 | * Plugin to highlight the syntax of code with lowlight (`highlight.js`). 40 | * 41 | * @type {import('unified').Plugin<[Options?] | Array, Root>} 42 | */ 43 | export default function rehypeHighlight(options = {}) { 44 | const { aliases, languages, prefix, plainText, ignoreMissing, subset } = options 45 | let name = 'hljs' 46 | 47 | if (aliases) { 48 | lowlight.registerAlias(aliases) 49 | } 50 | 51 | if (languages) { 52 | /** @type {string} */ 53 | let key 54 | 55 | for (key in languages) { 56 | if (own.call(languages, key)) { 57 | lowlight.registerLanguage(key, languages[key]) 58 | } 59 | } 60 | } 61 | 62 | if (prefix) { 63 | const pos = prefix.indexOf('-') 64 | name = pos > -1 ? prefix.slice(0, pos) : prefix 65 | } 66 | 67 | return (tree) => { 68 | // eslint-disable-next-line complexity 69 | visit(tree, 'element', (node, _, givenParent) => { 70 | const parent = /** @type {Node?} */ (givenParent) 71 | 72 | if ( 73 | !parent || 74 | !('tagName' in parent) || 75 | parent.tagName !== 'pre' || 76 | node.tagName !== 'code' || 77 | !node.properties 78 | ) { 79 | return 80 | } 81 | 82 | const lang = language(node) 83 | 84 | if ( 85 | lang === false || 86 | (!lang && subset === false) || 87 | (lang && plainText && plainText.includes(lang)) 88 | ) { 89 | return 90 | } 91 | 92 | if (!Array.isArray(node.properties.className)) { 93 | node.properties.className = [] 94 | } 95 | 96 | if (!node.properties.className.includes(name)) { 97 | node.properties.className.unshift(name) 98 | } 99 | 100 | /** @type {LowlightRoot} */ 101 | let result 102 | 103 | try { 104 | result = lang 105 | ? lowlight.highlight(lang, toText(parent, { 106 | whitespace: 'normal' 107 | }), { prefix }) 108 | : // @ts-expect-error: we checked that `subset` is not a boolean. 109 | lowlight.highlightAuto(toText(parent, { 110 | whitespace: 'normal' 111 | }), { prefix, subset }) 112 | } catch (error) { 113 | const exception = /** @type {Error} */ (error) 114 | if (!ignoreMissing || !/Unknown language/.test(exception.message)) { 115 | throw error 116 | } 117 | 118 | return 119 | } 120 | 121 | if (!lang && result.data.language) { 122 | node.properties.className.push('language-' + result.data.language) 123 | } 124 | 125 | if (Array.isArray(result.children) && result.children.length > 0) { 126 | node.children = result.children 127 | } 128 | }) 129 | } 130 | } 131 | 132 | /** 133 | * Get the programming language of `node`. 134 | * 135 | * @param {Element} node 136 | * @returns {false|string|undefined} 137 | */ 138 | function language(node) { 139 | const className = node.properties && node.properties.className 140 | let index = -1 141 | 142 | if (!Array.isArray(className)) { 143 | return 144 | } 145 | 146 | while (++index < className.length) { 147 | const value = String(className[index]) 148 | 149 | if (value === 'no-highlight' || value === 'nohighlight') { 150 | return false 151 | } 152 | 153 | if (value.slice(0, 5) === 'lang-') { 154 | return value.slice(5) 155 | } 156 | 157 | if (value.slice(0, 9) === 'language-') { 158 | return value.slice(9) 159 | } 160 | } 161 | } 162 | -------------------------------------------------------------------------------- /demo/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | 4 | createApp(App).mount('#app') 5 | -------------------------------------------------------------------------------- /demo/src/themes/markdown-nice.less: -------------------------------------------------------------------------------- 1 | /*全局属性*/ 2 | .previewArea { 3 | font-size: 16px; 4 | color: black; 5 | padding: 0 10px; 6 | line-height: 1.6; 7 | word-spacing: 0px; 8 | letter-spacing: 0px; 9 | word-break: break-word; 10 | word-wrap: break-word; 11 | text-align: left; 12 | font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; 13 | /* margin-top: -10px; 解决开头空隙过大问题*/ 14 | } 15 | 16 | /*段落*/ 17 | .previewArea p { 18 | font-size: 16px; 19 | padding-top: 8px; 20 | padding-bottom: 8px; 21 | margin: 0; 22 | line-height: 26px; 23 | color: black; 24 | } 25 | 26 | /*标题*/ 27 | .previewArea h1, 28 | .previewArea h2, 29 | .previewArea h3, 30 | .previewArea h4, 31 | .previewArea h5, 32 | .previewArea h6 { 33 | margin-top: 30px; 34 | margin-bottom: 15px; 35 | padding: 0px; 36 | font-weight: bold; 37 | color: black; 38 | } 39 | 40 | .previewArea h1 { 41 | font-size: 24px; 42 | } 43 | 44 | .previewArea h2 { 45 | font-size: 22px; 46 | } 47 | 48 | .previewArea h3 { 49 | font-size: 20px; 50 | } 51 | 52 | .previewArea h4 { 53 | font-size: 18px; 54 | } 55 | 56 | .previewArea h5 { 57 | font-size: 16px; 58 | } 59 | 60 | .previewArea h6 { 61 | font-size: 16px; 62 | } 63 | 64 | .previewArea h1 .prefix, 65 | .previewArea h2 .prefix, 66 | .previewArea h3 .prefix, 67 | .previewArea h4 .prefix, 68 | .previewArea h5 .prefix, 69 | .previewArea h6 .prefix { 70 | display: none; 71 | } 72 | 73 | .previewArea h1 .suffix .previewArea h2 .suffix, 74 | .previewArea h3 .suffix, 75 | .previewArea h4 .suffix, 76 | .previewArea h5 .suffix, 77 | .previewArea h6 .suffix { 78 | display: none; 79 | } 80 | 81 | /*列表*/ 82 | .previewArea ul, 83 | .previewArea ol { 84 | margin-top: 8px; 85 | margin-bottom: 8px; 86 | padding-left: 25px; 87 | color: black; 88 | } 89 | 90 | .previewArea ul { 91 | list-style-type: disc; 92 | } 93 | 94 | .previewArea ul ul { 95 | list-style-type: square; 96 | } 97 | 98 | .previewArea ol { 99 | list-style-type: decimal; 100 | } 101 | 102 | .previewArea li section { 103 | margin-top: 5px; 104 | margin-bottom: 5px; 105 | line-height: 26px; 106 | text-align: left; 107 | color: rgb(1, 1, 1); 108 | /* 只要是纯黑色微信编辑器就会把color这个属性吞掉。。。*/ 109 | font-weight: 500; 110 | } 111 | 112 | /*引用*/ 113 | .previewArea blockquote { 114 | border: none; 115 | } 116 | 117 | .previewArea .multiquote-1 { 118 | display: block; 119 | font-size: 0.9em; 120 | overflow: auto; 121 | overflow-scrolling: touch; 122 | border-left: 3px solid rgba(0, 0, 0, 0.4); 123 | background: rgba(0, 0, 0, 0.05); 124 | color: #6a737d; 125 | padding-top: 10px; 126 | padding-bottom: 10px; 127 | padding-left: 20px; 128 | padding-right: 10px; 129 | margin-bottom: 20px; 130 | margin-top: 20px; 131 | } 132 | 133 | .previewArea .multiquote-1 p { 134 | margin: 0px; 135 | color: black; 136 | line-height: 26px; 137 | } 138 | 139 | .previewArea .multiquote-2 { 140 | box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2); 141 | padding: 20px; 142 | margin-bottom: 20px; 143 | margin-top: 20px; 144 | } 145 | 146 | .previewArea .multiquote-3 { 147 | box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2); 148 | padding: 20px; 149 | margin-bottom: 20px; 150 | margin-top: 20px; 151 | } 152 | 153 | .previewArea .multiquote-3 p { 154 | text-align: center; 155 | } 156 | 157 | .previewArea .multiquote-3 h3 { 158 | text-align: center; 159 | } 160 | 161 | .previewArea .table-of-contents a { 162 | border: none; 163 | color: black; 164 | font-weight: normal; 165 | } 166 | 167 | /*链接*/ 168 | .previewArea a { 169 | text-decoration: none; 170 | color: #1e6bb8; 171 | word-wrap: break-word; 172 | font-weight: bold; 173 | border-bottom: 1px solid #1e6bb8; 174 | } 175 | 176 | /*加粗*/ 177 | .previewArea strong { 178 | font-weight: bold; 179 | color: black; 180 | } 181 | 182 | /*斜体*/ 183 | .previewArea em { 184 | font-style: italic; 185 | color: black; 186 | } 187 | 188 | /*加粗斜体*/ 189 | .previewArea em strong { 190 | font-weight: bold; 191 | color: black; 192 | } 193 | 194 | /*删除线*/ 195 | .previewArea del { 196 | font-style: italic; 197 | color: black; 198 | } 199 | 200 | /*分隔线*/ 201 | .previewArea hr { 202 | height: 1px; 203 | margin: 0; 204 | margin-top: 10px; 205 | margin-bottom: 10px; 206 | border: none; 207 | border-top: 1px solid black; 208 | } 209 | 210 | /*代码块*/ 211 | .previewArea pre { 212 | margin-top: 10px; 213 | margin-bottom: 10px; 214 | } 215 | 216 | .previewArea pre code { 217 | display: -webkit-box; 218 | font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; 219 | border-radius: 0px; 220 | font-size: 12px; 221 | -webkit-overflow-scrolling: touch; 222 | } 223 | 224 | .previewArea pre code span { 225 | line-height: 26px; 226 | } 227 | 228 | /*行内代码*/ 229 | .previewArea p code, 230 | .previewArea li code { 231 | font-size: 14px; 232 | word-wrap: break-word; 233 | padding: 2px 4px; 234 | border-radius: 4px; 235 | margin: 0 2px; 236 | color: #1e6bb8; 237 | background-color: rgba(27, 31, 35, .05); 238 | font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; 239 | word-break: break-all; 240 | } 241 | 242 | /*图片*/ 243 | .previewArea img { 244 | display: block; 245 | margin: 0 auto; 246 | max-width: 100%; 247 | } 248 | 249 | /*图片*/ 250 | .previewArea figure { 251 | margin: 0; 252 | margin-top: 10px; 253 | margin-bottom: 10px; 254 | } 255 | 256 | /*图片描述文字*/ 257 | .previewArea figcaption { 258 | margin-top: 5px; 259 | text-align: center; 260 | color: #888; 261 | font-size: 14px; 262 | } 263 | 264 | /*表格容器 */ 265 | .previewArea .table-container { 266 | overflow-x: auto; 267 | } 268 | 269 | /*表格*/ 270 | .previewArea table { 271 | display: table; 272 | text-align: left; 273 | } 274 | 275 | .previewArea tbody { 276 | border: 0; 277 | } 278 | 279 | .previewArea table tr { 280 | border: 0; 281 | border-top: 1px solid #ccc; 282 | background-color: white; 283 | } 284 | 285 | .previewArea table tr:nth-child(2n) { 286 | background-color: #F8F8F8; 287 | } 288 | 289 | .previewArea table tr th, 290 | .previewArea table tr td { 291 | font-size: 16px; 292 | border: 1px solid #ccc; 293 | padding: 5px 10px; 294 | text-align: left; 295 | } 296 | 297 | .previewArea table tr th { 298 | font-weight: bold; 299 | background-color: #f0f0f0; 300 | } 301 | 302 | /* 表格最小列宽4个汉字 */ 303 | .previewArea table tr th:nth-of-type(n), 304 | .previewArea table tr td:nth-of-type(n) { 305 | min-width: 85px; 306 | } 307 | 308 | .previewArea .footnote-word { 309 | color: #1e6bb8; 310 | font-weight: bold; 311 | } 312 | 313 | .previewArea .footnote-ref { 314 | color: #1e6bb8; 315 | font-weight: bold; 316 | } 317 | 318 | .previewArea .footnote-item { 319 | display: flex; 320 | } 321 | 322 | .previewArea .footnote-num { 323 | display: inline; 324 | width: 10%; 325 | /*神奇，50px就不可以*/ 326 | background: none; 327 | font-size: 80%; 328 | opacity: 0.6; 329 | line-height: 26px; 330 | font-family: ptima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; 331 | } 332 | 333 | .previewArea .footnote-item p { 334 | display: inline; 335 | font-size: 14px; 336 | width: 90%; 337 | padding: 0px; 338 | margin: 0; 339 | line-height: 26px; 340 | color: black; 341 | word-break: break-all; 342 | width: calc(100%-50) 343 | } 344 | 345 | .previewArea sub, 346 | sup { 347 | line-height: 0; 348 | } 349 | 350 | .previewArea .footnotes-sep:before { 351 | content: "参考资料"; 352 | display: block; 353 | } 354 | 355 | /* 解决公式问题 */ 356 | .previewArea .block-equation { 357 | display: block; 358 | text-align: center; 359 | overflow: auto; 360 | display: block; 361 | -webkit-overflow-scrolling: touch; 362 | } 363 | 364 | .previewArea .block-equation svg { 365 | max-width: 300% !important; 366 | -webkit-overflow-scrolling: touch; 367 | } 368 | 369 | .previewArea .inline-equation {} 370 | 371 | .previewArea .inline-equation svg {} 372 | 373 | .previewArea .imageflow-layer1 { 374 | margin-top: 1em; 375 | margin-bottom: 0.5em; 376 | white-space: normal; 377 | border: 0px none; 378 | padding: 0px; 379 | overflow: hidden; 380 | } 381 | 382 | .previewArea .imageflow-layer2 { 383 | white-space: nowrap; 384 | width: 100%; 385 | overflow-x: scroll; 386 | } 387 | 388 | .previewArea .imageflow-layer3 { 389 | display: inline-block; 390 | word-wrap: break-word; 391 | white-space: normal; 392 | vertical-align: middle; 393 | width: 100%; 394 | } 395 | 396 | .previewArea .imageflow-img { 397 | display: inline-block; 398 | } 399 | 400 | .previewArea .imageflow-caption { 401 | text-align: center; 402 | margin-top: 0px; 403 | padding-top: 0px; 404 | color: #888; 405 | } 406 | 407 | .previewArea .nice-suffix-juejin-container { 408 | margin-top: 20px !important; 409 | } 410 | 411 | .previewArea figure a { 412 | border: none; 413 | } 414 | 415 | .previewArea figure a img { 416 | margin: 0px; 417 | } 418 | 419 | .previewArea figure { 420 | display: flex; 421 | flex-direction: column; 422 | justify-content: center; 423 | align-items: center; 424 | } 425 | 426 | /* 图片链接嵌套 */ 427 | .previewArea figure a { 428 | display: flex; 429 | justify-content: center; 430 | align-items: center; 431 | } 432 | 433 | /* 图片链接嵌套，图片解释 */ 434 | .previewArea figure a+figcaption { 435 | display: flex; 436 | justify-content: center; 437 | align-items: center; 438 | width: 100%; 439 | margin-top: -35px; 440 | background: rgba(0, 0, 0, 0.7); 441 | color: white; 442 | line-height: 35px; 443 | z-index: 20; 444 | } -------------------------------------------------------------------------------- /demo/src/themes/sspai.less: -------------------------------------------------------------------------------- 1 | .previewArea { 2 | h1 { 3 | font-size: 2.2em; 4 | font-weight: 700; 5 | line-height: 1.1; 6 | padding-top: 16px; 7 | margin-bottom: 4px; 8 | } 9 | 10 | h2, 11 | h3, 12 | h4, 13 | h5, 14 | h6 { 15 | line-height: 1.5em; 16 | margin-top: 2.2em; 17 | margin-bottom: 4px; 18 | } 19 | 20 | h2 { 21 | font-size: 1.4em; 22 | margin: 40px 10px 20px 0; 23 | padding-left: 9px; 24 | border-left: 6px solid #ff7e79; 25 | font-weight: 700; 26 | line-height: 1.4; 27 | } 28 | 29 | h3 { 30 | font-weight: 700; 31 | font-size: 1.2em; 32 | line-height: 1.4; 33 | margin: 10px 0 5px; 34 | padding-top: 10px; 35 | } 36 | 37 | h4 { 38 | font-weight: 700; 39 | text-transform: uppercase; 40 | font-size: 1.1em; 41 | line-height: 1.4; 42 | margin: 10px 0 5px; 43 | padding-top: 10px 44 | } 45 | 46 | h5, 47 | h6 { 48 | font-size: .9em; 49 | } 50 | 51 | h5 { 52 | font-weight: bold; 53 | text-transform: uppercase; 54 | } 55 | 56 | h6 { 57 | font-weight: normal; 58 | color: #AAA; 59 | } 60 | 61 | img { 62 | width: 100%; 63 | border-radius: 5px; 64 | display: block; 65 | margin-bottom: 15px; 66 | height: auto; 67 | } 68 | 69 | dl, 70 | ol, 71 | ul { 72 | margin-top: 12px; 73 | margin-bottom: 20px; 74 | padding-left: 5%; 75 | line-height: 1.8; 76 | } 77 | 78 | p { 79 | margin: 0 0 20px; 80 | padding: 0; 81 | line-height: 1.8; 82 | } 83 | 84 | a { 85 | color: #f22f27; 86 | text-decoration: none; 87 | } 88 | 89 | a:hover { 90 | color: #f55852; 91 | text-decoration: underline; 92 | } 93 | 94 | a:focus { 95 | outline-offset: -2px; 96 | } 97 | 98 | blockquote { 99 | font-size: 1em; 100 | font-style: normal; 101 | padding: 30px 38px; 102 | margin: 0 0 15px; 103 | position: relative; 104 | line-height: 1.8; 105 | text-indent: 0; 106 | border: none; 107 | color: #888; 108 | } 109 | 110 | blockquote:before { 111 | content: "“"; 112 | left: 12px; 113 | top: 0; 114 | color: #E0E0E0; 115 | font-size: 4em; 116 | font-family: Arial, serif; 117 | line-height: 1em; 118 | font-weight: 700; 119 | position: absolute; 120 | } 121 | 122 | blockquote:after { 123 | content: "”"; 124 | right: 12px; 125 | bottom: -26px; 126 | color: #E0E0E0; 127 | font-size: 4em; 128 | font-family: Arial, serif; 129 | line-height: 1em; 130 | font-weight: 700; 131 | position: absolute; 132 | bottom: -31px; 133 | } 134 | 135 | strong, 136 | dfn { 137 | font-weight: 700; 138 | } 139 | 140 | em, 141 | dfn { 142 | font-style: italic; 143 | font-weight: 400; 144 | } 145 | 146 | del { 147 | text-decoration: line-through; 148 | } 149 | 150 | /*code {font-size:90%;}*/ 151 | 152 | /*pre {text-align:left; overflow-x: scroll; color: #257fa0; background: #f6f6f6; padding: 10pt 15pt; border-radius: 3px; border: solid 1px #e2e2e2;}*/ 153 | 154 | // pre { 155 | // margin: 0 0 10px; 156 | // font-size: 13px; 157 | // line-height: 1.42857; 158 | // word-break: break-all; 159 | // word-wrap: break-word; 160 | // border-radius: 4px; 161 | // white-space: pre-wrap; 162 | // display: block; 163 | // background: #f8f8f8; 164 | // padding: 10px 20px; 165 | // border: none; 166 | // margin-bottom: 25px; 167 | // color: #666; 168 | // font-family: Courier, sans-serif; 169 | // } 170 | 171 | // code { 172 | // color: #c7254e; 173 | // background-color: #f9f2f4; 174 | // border-radius: 4px; 175 | // font-family: Menlo, Monaco, Consolas, "Courier New", monospace; 176 | // padding: 2px 4px; 177 | // font-size: 90%; 178 | // } 179 | 180 | p>code { 181 | color: #c7264e; 182 | background-color: #f9f2f4; 183 | font-size: .95em; 184 | border-radius: 3px; 185 | -moz-border-radius: 3px; 186 | -webkit-border-radius: 3px; 187 | } 188 | 189 | figure { 190 | margin: 1em 0; 191 | } 192 | 193 | figcaption { 194 | font-size: 0.75em; 195 | padding: 0.5em 2em; 196 | margin-bottom: 2em; 197 | } 198 | 199 | figure img { 200 | margin-bottom: 0px; 201 | } 202 | 203 | hr { 204 | margin-top: 20px; 205 | margin-bottom: 20px; 206 | border: 0; 207 | border-top: 1px solid #eee; 208 | } 209 | 210 | ol p, 211 | ul p { 212 | margin-bottom: 0px; 213 | } 214 | 215 | li { 216 | margin-bottom: 0.75em; 217 | margin-top: 0.75em; 218 | } 219 | 220 | ol#footnotes { 221 | font-size: 0.95em; 222 | padding-top: 1em; 223 | margin-top: 1em; 224 | margin-left: 0; 225 | border-top: 1px solid #eaeaea; 226 | counter-reset: footer-counter; 227 | list-style: none; 228 | color: #555; 229 | padding-left: 5%; 230 | margin: 20px 0; 231 | } 232 | 233 | ol#footnotes li { 234 | margin-bottom: 10px; 235 | margin-left: 16px; 236 | font-weight: 400; 237 | line-height: 2; 238 | list-style-type: none; 239 | } 240 | 241 | ol#footnotes li:before { 242 | content: counter(footer-counter) ". "; 243 | counter-increment: footer-counter; 244 | font-weight: 800; 245 | font-size: .95em; 246 | } 247 | 248 | @keyframes highfade { 249 | 0% { 250 | background-color: none; 251 | } 252 | 253 | 20% { 254 | background-color: yellow; 255 | } 256 | 257 | 100% { 258 | background-color: none; 259 | } 260 | } 261 | 262 | @-webkit-keyframes highfade { 263 | 0% { 264 | background-color: none; 265 | } 266 | 267 | 20% { 268 | background-color: yellow; 269 | } 270 | 271 | 100% { 272 | background-color: none; 273 | } 274 | } 275 | 276 | a:target, 277 | ol#footnotes li:target, 278 | sup a:target { 279 | animation-name: highfade; 280 | animation-duration: 2s; 281 | animation-iteration-count: 1; 282 | animation-timing-function: ease-in-out; 283 | -webkit-animation-name: highfade; 284 | -webkit-animation-duration: 2s; 285 | -webkit-animation-iteration-count: 1; 286 | -webkit-animation-timing-function: ease-in-out; 287 | } 288 | 289 | a:target { 290 | border: 0; 291 | outline: 0; 292 | } 293 | 294 | table { 295 | display: table; 296 | text-align: left; 297 | } 298 | 299 | tbody { 300 | border: 0; 301 | } 302 | 303 | table tr { 304 | border: 0; 305 | border-top: 1px solid #ccc; 306 | background-color: white; 307 | } 308 | 309 | table tr:nth-child(2n) { 310 | background-color: #F8F8F8; 311 | } 312 | 313 | table tr th, 314 | table tr td { 315 | font-size: 16px; 316 | border: 1px solid #ccc; 317 | padding: 5px 10px; 318 | text-align: left; 319 | } 320 | 321 | table tr th { 322 | font-weight: bold; 323 | background-color: #f0f0f0; 324 | } 325 | } -------------------------------------------------------------------------------- /demo/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue()], 7 | base: '/markdown_editor_sync_scroll_demo/', 8 | build: { 9 | outDir: '../', 10 | sourcemap: true 11 | } 12 | }) 13 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wanglin2/markdown_editor_sync_scroll_demo/aed69c32aeca6f52807ca6f5074980260c827480/favicon.ico -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 基于CodeMirror和unified实现的一个能精确同步滚动的Markdown编辑器 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | --------------------------------------------------------------------------------