js编写一个codemirror主题theme编辑器效果代码
代码语言:html
所属分类:其他
代码描述:js编写一个codemirror主题theme编辑器效果代码,点击更换每个节点的颜色,下载生成json主题文件
代码标签: codemirror 主题 theme 编辑器 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Lato:400,900,400italic,700italic" rel="stylesheet"> <style> @charset "UTF-8"; /* CODEMIRROR BASE */ .CodeMirror { font-family: monospace; height: 300px; color: black; font-size: 14px; line-height: 21px; font-family: "Monaco", "Menlo", monospace; height: auto; background: none; position: relative; } .CodeMirror-lines { padding: 4px 0; } .CodeMirror pre { padding: 0 4px; } .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { background-color: white; } .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: black; } .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-animate-fat-cursor { width: auto; border: 0; -webkit-animation: blink 1.06s steps(1) infinite; animation: blink 1.06s steps(1) infinite; background-color: #7e7; } @-webkit-keyframes blink { 50% { background-color: transparent; } } @keyframes blink { 50% { background-color: transparent; } } .cm-tab { display: inline-block; text-decoration: inherit; } .CodeMirror-ruler { border-left: 1px solid #ccc; position: absolute; } .CodeMirror-composing { border-bottom: 2px solid; } div.CodeMirror span.CodeMirror-matchingbracket { color: #0f0; } div.CodeMirror span.CodeMirror-nonmatchingbracket { color: #f22; } .CodeMirror-matchingtag { background: rgba(255, 150, 0, 0.3); } .CodeMirror-activeline-background { background: #e8f2ff; } .CodeMirror-scroll { overflow: scroll !important; margin-bottom: -30px; margin-right: -30px; padding-bottom: 30px; height: 100%; outline: none; position: relative; } .CodeMirror-sizer { position: relative; border-right: 30px solid transparent; } .CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { position: absolute; z-index: 6; display: 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: -30px; *zoom: 1; *display: inline; } .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 { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .CodeMirror-lines { cursor: text; min-height: 1px; } .CodeMirror pre { 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; font-variant-ligatures: none; } .CodeMirror-wrap pre { 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; overflow: auto; } .CodeMirror-code { outline: none; } .CodeMirror-scroll, .CodeMirror-sizer, .CodeMirror-gutter, .CodeMirror-gutters, .CodeMirror-linenumber { box-sizing: content-box; } .CodeMirror-measure { position: absolute; width: 100%; height: 0; overflow: hidden; visibility: hidden; } .CodeMirror-cursor { position: absolute; } .CodeMirror-measure pre { position: static; } div.CodeMirror-cursors { visibility: hidden; position: relative; z-index: 3; } div.CodeMirror-dragcursors { visibility: visible; } .CodeMirror-focused div.CodeMirror-cursors { visibility: visible; } .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; } .CodeMirror-crosshair { cursor: crosshair; } .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; } .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: #ffa; background: rgba(255, 255, 0, 0.4); } .CodeMirror span { *vertical-align: text-bottom; } .cm-force-border { padding-right: 0.1px; } .cm-tab-wrap-hack:after { content: ""; } span.CodeMirror-selectedtext { background: none; } .CodeMirror-gutters { border: 0; background: none; } div.CodeMirror span.CodeMirror-matchingbracket { color: inherit; } .CodeMirror-sizer { margin-bottom: 0 !important; } .CodeMirror-dialog { background: #eee; padding: 5px; font-size: 0.9rem; position: absolute; top: 0; left: 0; width: 100%; z-index: 20; color: black; } .CodeMirror-dialog .CodeMirror-search-hint { display: none; } .CodeMirror-dialog .CodeMirror-search-field { width: 250px !important; font: 0.9rem/1.3 Monaco, MonoSpace; } .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { background-color: transparent; } .CodeMirror-linewidget { overflow: hidden; } .CodeMirror-foldmarker { color: blue; text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px; font-family: arial; line-height: .3; cursor: pointer; } .CodeMirror-foldgutter { width: 0.7em; } .CodeMirror-foldgutter-open, .CodeMirror-foldgutter-folded { cursor: pointer; } .CodeMirror-foldgutter-open:after { font-family: sans-serif; content: "▾"; } .CodeMirror-foldgutter-folded:after { font-family: sans-serif; content: "▸"; } .CodeMirror-simplescroll-horizontal div, .CodeMirror-simplescroll-vertical div { position: absolute; -webkit-background-clip: padding-box !important; background-clip: padding-box !important; } .CodeMirror-simplescroll-horizontal div { border-bottom: 4px solid transparent; } .CodeMirror-simplescroll-vertical div { border-right: 4px solid transparent; } .CodeMirror-simplescroll-horizontal, .CodeMirror-simplescroll-vertical { position: absolute; z-index: 6; } .CodeMirror-simplescroll-horizontal { bottom: 0; left: 0; height: 9px; } .CodeMirror-simplescroll-horizontal div { bottom: 0; height: 100%; } .CodeMirror-simplescroll-vertical { right: 0; top: 0; width: 9px; } .CodeMirror-simplescroll-vertical div { right: 0; width: 100%; } .CodeMirror-scroll { padding: 0; margin: 0; overflow: hidden !important; } ::-webkit-scrollbar { width: .5em; height: .5em; } ::-webkit-scrollbar-thumb { background: rgba(102, 102, 102, 0.4); } ::-webkit-scrollbar-track { background: none; } html { box-sizing: border-box; overflow-y: hidden; } *, *:before, *:after { box-sizing: inherit; } body, html { margin: 0; } body { font-family: lato; font-size: 16px; min-width: 1150px; } .page-wrap { display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; height: 100vh; } .main { display: -webkit-box; display: flex; height: 100vh; } .preview { padding: 20px; background: #333; display: -webkit-box; display: flex; overflow-x: auto; } .light .preview { background: #ccc; } .top-controls { display: -webkit-box; display: flex; flex-shrink: 0; white-space: nowrap; overflow: hidden; background: #111111; } .version-controls { padding: 20px; -webkit-box-flex: 1; flex-grow: 1; } .light .version-controls { background: white; } .button { background: transparent; border: 0; outline: none; font: inherit; cursor: pointer; } .button--default { letter-spacing: .05em; padding: 8px 10px; color: white; background: black; margin: 0; margin-right: 10px; border-radius: 4px; border: 3px solid #333; } .button--default:last-child { margin-right: 0; } .button--tiny { padding: 4px; border: 0; font-size: .8em; font-weight: normal; } .button--default:hover:not(:active) { background-color: #333; } .light .button--default:hover:not(:active) { background: #ccc; } .light .button--default:not(:active) { background: white; color: #555; border-color: #ccc; } .button--save:hover, .light .button--save:hover { border-color: #46D06B; } .button--save:active { background: #46D06B; } .button--revert:hover, .light .button--revert:hover { border-color: #ff3c41; } .button--revert:active { background: #ff3c41; } .save-info--hidden { display: none; } .last-saved { font-size: .8em; color: #666; font-weight: bold; letter-spacing: .02em; text-transform: uppercase; -webkit-animation: fade 1s ease-out; animation: fade 1s ease-out; } .light .last-saved { color: #aaa; -webkit-animation-name: fade--dark; animation-name: fade--dark; } @-webkit-keyframes fade { 0% { color: white; } 100% { color: #666; } } @keyframes fade { 0% { color: white; } 100% { color: #666; } } @-webkit-keyframes fade--dark { 0% { color: black; } 100% { color: #aaa; } } @keyframes fade--dark { 0% { color: black; } 100% { color: #aaa; } } .color-controls { overflow: auto; padding: 20px; width: 275px; background: #eee; flex-shrink: 0; } .cmEl:not(:last-of-type) { border-bottom: 1px solid #ccc; padding-bottom: 10px; margin-bottom: 10px; } .cmEl__advanced { margin-top: 10px; display: none; } .cmEl__settings.active ~ .cmEl__advanced { display: block; } .cmEl__heading { display: inline-block; cursor: pointer; margin: 0; font-size: .8em; letter-spacing: .02em; color: #333; text-transform: uppercase; line-height: 20px; position: relative; bottom: 2px; } .cmEl__heading:after { content: ''; clear: both; display: block; } .cmEl__settings { float: right; background: transparent; border: none; display: block; outline: none; cursor: pointer; padding: 0; height: 18px; width: 18px; line-height: 20px; fill: #aaa; } .cmEl__settings svg { display: block; height: 100%; width: 100%; -webkit-transition: fill .1s; transition: fill .1s; } .cmEl__settings:hover, .cmEl__settings.active { fill: #333; } .cmEl__color { display: block; } .cmEl__syncTo { display: inline-block; width: 150px; } .cmEl__syncTo-label { display: inline-block; margin-right: 5px; font-size: .7em; color: #666; font-weight: bold; letter-spacing: .02em; text-transform: uppercase; } .cmEl__color { opacity: 0; width: 100%; height: 100%; cursor: pointer; } .cmEl__fauxColor { height: 20px; width: 20px; margin-right: 10px; border-radius: 4px; border: 2px solid #ccc; float: left; } .cmEl__desc { font-style: italic; color: #111; font-size: .9em; line-height: 1.5em; color: #333; text-transform: none; margin: 10px 0; } .box { min-width: 200px; flex-basis: 33%; margin-left: 20px; overflow: auto; overflow-x: hidden; border-radius: 4px; padding: 5px; } .box:first-of-type { margin-left: 0; } .base-ui-controls { background: #333; width: 275px; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; flex-shrink: 0; } .light .base-ui-controls { background: #ccc; } .base-ui__toggle { position: relative; height: 30px; margin: auto 20px; } .giant-toggle { display: none; } .giant-toggle ~ label { cursor: pointer; /* Should be the same as the height of label:after */ line-height: 30px; } .giant-toggle ~ label:after { content: ''; display: block; float: left; /* Height/border radius should be equal */ height: 30px; border-radius: 30px; width: 50px; background: #ccc; } .light .giant-toggle ~ label:after { background: #777; } .giant-toggle ~ label:before { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); position: absolute; content: ''; display: block; float: left; height: 35px; width: 35px; left: -5px; border-radius: 50%; background: white; -webkit-transition: color .1s ease-out, left .1s ease-out; transition: color .1s ease-out, left .1s ease-out; } .giant-toggle:checked ~ label:before { /* Difference between label:after width and label:before width */ left: 20px; } .base-ui__label { cursor: pointer; margin: auto 0; font-size: .75em; color: #999; font-weight: bold; letter-spacing: .02em; text-transform: uppercase; } .light .base-ui__label { color: #777; } .presets-wrapper { font-size: .8em; font-weight: bold; text-transform: uppercase; margin: -20px; padding: 10px 20px; margin-bottom: 20px; background: #aaa; } .presets { margin-left: 4px; margin-right: 2px; background: black; color: white; border: 0; padding: 4px 20px 4px 10px; font-size: 0.8em; border-radius: 3px; cursor: pointer; outline: 0; -webkit-appearance: none; } .light .presets { background: white; color: #555; } .presets-select-wrapper { position: relative; display: inline-block; color: #555; vertical-align: top; } .presets-select-wrapper:after { position: absolute; display: inline-block; content: ""; width: 0; height: 0; pointer-events: none; border: .35rem solid transparent; border-top-color: inherit; right: 8px; top: 40%; } .cmEl__font-controls { margin-bottom: 5px; } .cmEl__font-controls:after { display: block; content: ""; clear: both; } .cmEl__font-control { padding: 5px; display: block; height: 20px; width: 20px; float: left; background: #999; fill: #333; margin-right: 5px; border-radius: 4px; cursor: pointer; } .cmEl__font-control.active { background: #333; fill: #999; } .export-controls { background: #111; padding: 20px; padding-left: 0; } .light .export-controls { background: white; } </style> </head> <body translate="no" > <svg xmlns="http://www.w3.org/2000/svg" style="display:none;"><symbol id="gear" viewBox="0 0 100 100"><path d="M87.687 45.077c-.313-2.433-.816-4.807-1.542-7.08l8.145-11.73-5.827-7.514-.094-.123-5.825-7.514-12.955 5.577c-2.04-1.265-4.192-2.362-6.46-3.22L59.42 0H40.587l-3.71 13.474c-2.27.857-4.42 1.955-6.463 3.222L17.457 11.12l-5.825 7.513-.097.124-5.822 7.517 8.146 11.73c-.727 2.272-1.234 4.646-1.545 7.08L0 52.032l2.08 9.375.033.15 2.08 9.375 14 .76c1.296 2.03 2.772 3.927 4.4 5.67L20.2 91.587l8.416 4.173.138.068L37.17 100l9.308-10.796c1.16.11 2.335.173 3.524.173s2.358-.074 3.52-.184l9.317 10.804 8.414-4.173.14-.066 8.414-4.172-2.396-14.228c1.628-1.74 3.104-3.64 4.4-5.672l14-.76 2.078-9.374.035-.154L100 52.025l-12.313-6.948zM50.003 34.51c8.435 0 15.272 7.035 15.272 15.72 0 8.678-6.84 15.716-15.272 15.716-8.436 0-15.272-7.038-15.272-15.717 0-8.685 6.84-15.72 15.273-15.72z"/></symbol><symbol id="italic" viewBox="0 0 50 100"><path d="M12.9 8.7V0H50v8.7l-11.6 1.9-12.9 78.8 11.6 1.9v8.7H0v-8.7l11.6-1.9 12.9-78.8-11.6-1.9z"/></symbol><symbol id="underline" viewBox="0 0 86.1 100"><path d="M9.5 92.8h67.2v7.2H9.5zM35.1 0v10.3l-9 1.7v44.3c0 5.6 1.5 9.8 4.5 12.6S37.7 73 43 73c5.3 0 9.5-1.4 12.5-4.1 3-2.8 4.5-7 4.5-12.6V12l-9-1.7V0h35.1v10.3l-9 1.7v44.3c0 9.5-3.1 16.9-9.4 22-6.3 5.2-14.5 7.8-24.7 7.8-10.1 0-18.3-2.6-24.6-7.8-6.2-5.1-9.4-12.5-9.4-22V12l-9-1.7V0h35.1z"/></symbol></svg> <div id="page-wrap" class="page-wrap"> <div class="top-controls"> <div class="base-ui-controls"> <div class="base-ui__label"> Dark </div> <div class="base-ui__toggle"> <input type="checkbox" id="base-ui" class="giant-toggle"> <label for="base-ui"></label> </div> <div class="base-ui__label"> Light </div> </div> <div class="version-controls"> </div> <div class="export-controls"> <button id="export-json" class="button button--default button--save"> Export For CodePen Enhancement Suite </button> <button id="export-css" class="button button--default button--save"> Export CSS </button> </div> </div> <div class="main"> <div id="controls" class="color-controls"> <div class="presets-wrapper"> Preset: <div class="presets-select-wrapper"> <select name="presets" id="presets" class="presets"></select> </div> <button id="load-preset" class="button button--default button--tiny load-preset">Load</button> </div> </div> <div class="preview" id="preview"> <!-- this is where the markup for the CodeMirror stuff is stored --> <div class="box box-html"> <div class="CodeMirror cm-s-default CodeMirror-wrap CodeMirror-simplescroll"> <div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 380.355px; left: 109.901px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" style="position: absolute; padding: 0px; width: 1000px; height: 1em; outline: none;" tabindex="0"></textarea></div> <div class="CodeMirror-simplescroll-horizontal" cm-not-content="true" style="display: none;"> <div></div> </div> <div class="CodeMirror-simplescroll-vertical" cm-not-content="true" style="display: none; bottom: 0px;"> <div style="height: 222.926px; top: 0px;"></div> </div> <div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div> <div class="CodeMirror-gutter-filler" cm-not-content="true"></div> <div class="CodeMirror-scroll" tabindex="-1"> <div class="CodeMirror-sizer" style="margin-left: 39px; margin-bottom: -15px; border-right-width: 15px; min-height: 405px; padding-right: 0px; padding-bottom: 0px;"> <div style="position: relative; top: 0px;"> <div class="CodeMirror-lines"> <div style="position: relative; outline: none;"> <div class="CodeMirror-measure"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt"> <div>16</div> </div> </div> <div class="CodeMirror-measure"></div> <div style="position: relative; z-index: 1;"></div> <div class="CodeMirror-cursors" style="visibility: hidden;"> <div class="CodeMirror-cursor" style="left: 70.9091px; top: 376.364px; height: 20.9091px;"> </div> </div> <div class="CodeMirror-code"> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -38.9915px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">1</div> </div><pre class=" CodeMirror-line " style="text-indent: 0px; padding-left: 2px;"><span style="padding-right: 0.1px;"><span class="cm-comment"><!-- BEGIN THING --></span></span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -38.9915px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">2</div> </div><pre class=" CodeMirror-line " style="text-indent: 0px; padding-left: 2px;"><span style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">h2</span> <span class="cm-attribute">id</span>=<span class="cm-string">"my_id"</span><span class="cm-tag cm-bracket">></span>Hello <span class="cm-atom">&amp;</span> World<span class="cm-tag cm-bracket"></</span><span class="cm-tag">h2</span><span class="cm-tag cm-bracket">></span></span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -38.9915px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">3</div> </div><pre class=" CodeMirror-line " style="text-indent: 0px; padding-left: 2px;"><span style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">p</span> <span class="cm-attribute">class</span>=<span class="cm-string">"myClass"</span><span class="cm-tag cm-bracket">></span></span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -38.9915px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">4</div> </div><pre class=" CodeMirror-line " style="text-indent: -15.392px; padding-left: 17.392px;"><span style="padding-right: 0.1px;"> <span class="CodeMirror-selected">Lorem ipsum dolor sit amet,</span> consectetur adipisicing elit. Ipsa perspiciatis laudantium cumque voluptates accusantium voluptatum magnam maiores facere tempora ducimus nobis obcaecati, animi at odit nihil, velit officia doloribus impedit!</span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -38.9915px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">5</div> </div><pre class=" CodeMirror-line " style="text-indent: 0px; padding-left: 2px;"><span style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"></</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span></span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -38.9915px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">6</div> </div><pre class=" CodeMirror-line " style="text-indent: 0px; padding-left: 2px;"><span style="padding-right: 0.1px;"><span class="cm-comment"><!-- END THING --></span></span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -38.9915px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">7</div> </div><pre class=" CodeMirror-line " style="text-indent: 0px; padding-left: 2px;"><span style="padding-right: 0.1px;"><span cm-text=""></span></span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -38.9915px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">8</div> <div class="CodeMirror-gutter-elt" style="left: 29px; width: 10px;"> <div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div> </div> </div><pre class=" CodeMirror-line " style="text-indent: 0px; padding-left: 2px;"><span style="padding-right: 0.1px;"><span class="cm-header cm-header-2">## This is a markdown heading</span></span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -38.9915px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">9</div> </div><pre class=" CodeMirror-line " style="text-indent: 0px; padding-left: 2px;"><span style="padding-right: 0.1px;"><span cm-text=""></span></span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -38.9915px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">10</div> </div><pre class=" CodeMirror-line " style="text-indent: 0px; padding-left: 2px;"><span style="padding-right: 0.1px;"><span class="cm-quote cm-quote-1">> Neat</span></span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -38.9915px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">11</div> </div><pre class=" CodeMirror-line " style="text-indent: 0px; padding-left: 2px;"><span style="padding-right: 0.1px;"><span cm-text=""></span></span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -38.9915px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">12</div> </div><pre class=" CodeMirror-line " style="text-indent: 0px; padding-left: 2px;"><span style="padding-right: 0.1px;"><span class="cm-variable-2">* </span><span class="cm-em cm-variable-2">_one_</span></span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -38.9915px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">13</div> </div><pre class=" CodeMirror-line " style="text-indent: 0px; padding-left: 2px;"><span style="padding-right: 0.1px;"><span class="cm-variable-2">* </span><span class="cm-em cm-variable-2">_two_</span></span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -38.9915px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">14</div> </div><pre class=" CodeMirror-line " style="text-indent: 0px; padding-left: 2px;"><span style="padding-right: 0.1px;"><span cm-text=""></span></span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -38.9915px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">15</div> </div><pre class=" CodeMirror-line " style="text-indent: 0px; padding-left: 2px;"><span style="padding-right: 0.1px;"><span class="cm-variable-2">1. </span><span class="cm-em cm-variable-2">*three*</span></span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -38.9915px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">16</div> </div><pre class=" CodeMirror-line " style="text-indent: 0px; padding-left: 2px;"><span style="padding-right: 0.1px;"><span class="cm-variable-2">2. </span><span class="cm-em cm-variable-2">*four*</span></span></pre></div> </div> </div> </div> </div> </div> <div style="position: absolute; height: 15px; width: 1px; border-bottom-width: 0px; border-bottom-style: solid; border-bottom-color: transparent; top: 405px;"></div> <div class="CodeMirror-gutters" style="height: 420px;"> <div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 29px;"></div> <div class="CodeMirror-gutter CodeMirror-foldgutter"></div> </div> </div> </div> </div> <div class="box box-css"> <div class="CodeMirror cm-s-default CodeMirror-wrap CodeMirror-simplescroll"> <div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 172px; left: 43px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div> <div class="CodeMirror-simplescroll-horizontal" cm-not-content="true" style="display: none;"> <div></div> </div> <div class="CodeMirror-simplescroll-vertical" cm-not-content="true" style="display: none; bottom: 0px;"> <div style="height: 310.592px; top: 0px;"></div> </div> <div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div> <div class="CodeMirror-gutter-filler" cm-not-content="true"></div> <div class="CodeMirror-scroll" tabindex="-1"> <div class="CodeMirror-sizer" style="margin-left: 39px; margin-bottom: -15px; border-right-width: 15px; min-height: 638px; padding-right: 0px; padding-bottom: 0px;"> <div style="position: relative; top: 0px;"> <div class="CodeMirror-lines"> <div style="position: relative; outline: none;"> <div class="CodeMirror-measure"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt"> <div>30</div> </div> </div> <div class="CodeMirror-measure"></div> <div style="position: relative; z-index: 1;"></div> <div class="CodeMirror-cursors" style="visibility: hidden;"> <div class="CodeMirror-cursor" style="left: 4px; top: 168px; height: 21px;"> </div> </div> <div class="CodeMirror-code"> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">1</div> <div class="CodeMirror-gutter-elt" style="left: 29px; width: 10px;"> <div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div> </div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-tag">h1</span>, <span class="cm-qualifier">.h1</span> {</span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">2</div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"> <span class="cm-property">font-size</span>: <span class="cm-number">2em</span>;</span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">3</div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"> <span class="cm-meta">-webkit-</span><span class="cm-property">animation</span>: <span class="cm-variable">spin</span> <span class="cm-number">1s</span> <span class="cm-atom">ease-out</span>;</span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">4</div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"> <span class="cm-property">color</span>: <span class="cm-keyword">crimson</span>;</span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">5</div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"> <span class="cm-property">font-family</span>: <span class="cm-atom">sans-serif</span>;</span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">6</div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">}</span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">7</div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span cm-text=""></span></span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">8</div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-variable-2">$theColor</span>: <span class="cm-keyword">blue</span>;</span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">9</div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span cm-text=""></span></span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">10</div> <div class="CodeMirror-gutter-elt" style="left: 29px; width: 10px;"> <div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div> </div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-tag">a</span>[<span class="cm-tag">href</span>=<span class="cm-string">"http://example.com"</span>] {</span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">11</div> <div class="CodeMirror-gutter-elt" style="left: 29px; width: 10px;"> <div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div> </div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"> &:<span class="cm-variable-3">before</span> {</span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">12</div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"> <span class="cm-property">color</span>: <span class="cm-variable-2">$theColor</span>;</span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">13</div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"> }</span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">14</div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"> <span class="cm-property">color</span>: <span class="cm-atom">#eee</span>;</span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">15</div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">}</span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">16</div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span cm-text=""></span></span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">17</div> <div class="CodeMirror-gutter-elt" style="left: 29px; width: 10px;"> <div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div> </div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-def">@media</span> (<span class="cm-property">min-width</span>: <span class="cm-number">600px</span>) {</span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">18</div> <div class="CodeMirror-gutter-elt" style="left: 29px; width: 10px;"> <div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div> </div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"> <span class="cm-tag">h1</span><span class="cm-builtin">#hello</span>, <span class="cm-tag">h1</span><span class="cm-qualifier">.world</span> {</span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">19</div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"> <span class="cm-property">display</span>:<span class="cm-atom">none</span>;</span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">20</div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"> }</span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">21</div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">}</span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">22</div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span cm-text=""></span></span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">23</div> <div class="CodeMirror-gutter-elt" style="left: 29px; width: 10px;"> <div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div> </div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-def">@-webkit-keyframes</span> <span class="cm-variable">spin</span> {</span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">24</div> <div class="CodeMirror-gutter-elt" style="left: 29px; width: 10px;"> <div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div> </div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"> <span class="cm-number">0%</span> {</span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">25</div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"> <span class="cm-property">transform</span>: <span class="cm-atom">rotate</span>(<span class="cm-number">0</span>); </span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">26</div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"> }</span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">27</div> <div class="CodeMirror-gutter-elt" style="left: 29px; width: 10px;"> <div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div> </div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"> <span class="cm-number">100%</span> {</span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">28</div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"> <span class="cm-property">transform</span>: <span class="cm-atom">rotate</span>(<span class="cm-number">360deg</span>); </span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">29</div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"> }</span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">30</div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">}</span></pre></div> </div> </div> </div> </div> </div> <div style="position: absolute; height: 15px; width: 1px; border-bottom-width: 0px; border-bottom-style: solid; border-bottom-color: transparent; top: 638px;"></div> <div class="CodeMirror-gutters" style="height: 653px;"> <div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 29px;"></div> <div class="CodeMirror-gutter CodeMirror-foldgutter"></div> </div> </div> </div> </div> <div class="box box-js"> <div class="CodeMirror cm-s-default CodeMirror-wrap CodeMirror-simplescroll"> <div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 256px; left: 236px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div> <div class="CodeMirror-simplescroll-horizontal" cm-not-content="true" style="display: none;"> <div></div> </div> <div class="CodeMirror-simplescroll-vertical" cm-not-content="true" style="display: none; bottom: 0px;"> <div style="height: 271.86px; top: 0px;"></div> </div> <div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div> <div class="CodeMirror-gutter-filler" cm-not-content="true"></div> <div class="CodeMirror-scroll" tabindex="-1" draggable="false"> <div class="CodeMirror-sizer" style="margin-left: 39px; margin-bottom: -15px; border-right-width: 15px; min-height: 575px; padding-right: 0px; padding-bottom: 0px;"> <div style="position: relative; top: 0px;"> <div class="CodeMirror-lines"> <div style="position: relative; outline: none;"> <div class="CodeMirror-measure"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt"> <div>27</div> </div> </div> <div class="CodeMirror-measure"></div> <div style="position: relative; z-index: 1;"></div> <div class="CodeMirror-cursors"> <div class="CodeMirror-cursor" style="left: 197px; top: 252px; height: 21px;"> </div> </div> <div class="CodeMirror-code"> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">1</div> <div class="CodeMirror-gutter-elt" style="left: 29px; width: 10px;"> <div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div> </div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-keyword">for</span> (<span class="cm-keyword">var</span> <span class="cm-def">i</span><span class="cm-operator">=</span><span class="cm-number">0</span>; <span class="cm-variable">i</span><span class="cm-operator"><</span><span class="cm-number">10</span>; <span class="cm-variable">i</span><span class="cm-operator">++</span>) {</span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">2</div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"> <span class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-variable">i</span>);</span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">3</div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">}</span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">4</div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span cm-text=""></span></span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">5</div> <div class="CodeMirror-gutter-elt" style="left: 29px; width: 10px;"> <div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div> </div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-keyword">function</span> <span class="cm-def">aFunc</span>() {</span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">6</div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"> <span class="cm-keyword">var</span> <span class="cm-def">obj</span> <span class="cm-operator">=</span> {};</span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">7</div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"> <span class="cm-variable-2">obj</span>.<span class="cm-property">isAnObject</span> <span class="cm-operator">=</span> <span class="cm-atom">true</span>;</span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">8</div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">}</span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">9</div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span cm-text=""></span></span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">10</div> <div class="CodeMirror-gutter-elt" style="left: 29px; width: 10px;"> <div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div> </div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-keyword">function</span> <span class="cm-def">Dog</span>(<span class="cm-def">opts</span>) {</span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">11</div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"> <span class="cm-keyword">this</span>.<span class="cm-property">name</span> <span class="cm-operator">=</span> <span class="cm-variable-2">opts</span>.<span class="cm-property">name</span>;</span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">12</div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"> <span class="cm-keyword">this</span>.<span class="cm-property">isGoodDog</span> <span class="cm-operator">=</span> <span class="cm-variable-2">opts</span>.<span class="cm-property">isGoodDog</span>;</span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">13</div> <div class="CodeMirror-gutter-elt" style="left: 29px; width: 10px;"> <div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div> </div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"> <span class="cm-keyword">this</span>.<span class="cm-property">whosAGoodDog</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>() {</span></pre></div> <div style="position: relative;"> <div class="CodeMirror-gutter-wrapper" style="left: -39px;"> <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">14</div> </div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"> <sp.........完整代码请登录后点击上方下载按钮下载查看
网友评论0