console
var presets = (function() {
var presets = {};
var elementGlobals = [
{
prettyName: "Background",
selector: ".box, .editor .top-boxes, .CodeMirror-gutter-wrapper, body.project .editor-pane, body.project .editor",
prop: "background"
},
{
prettyName: "Cursor",
selector: ".CodeMirror-cursor",
prop: "border-left-color",
},
{
prettyName: "Default",
selector: ".CodeMirror pre, .box pre,.editor .top-boxes pre,.CodeMirror-gutter-wrapper pre",
description: "when nothin' else applies",
color: "#E6E6E6",
},
{
prettyName: "Keyword",
selector: ".cm-keyword",
description: "e.g. var, function"
},
{
prettyName: "Atom",
selector: ".cm-atom",
description: "used for some CSS values and JS primitives (e.g. null, undefined)"
},
{
prettyName: "HTML Atom",
selector: ".box-html .cm-atom",
description: "e.g. HTML entities"
},
{
prettyName: "Definition",
selector: ".cm-def",
description: "e.g. @include, var foo"
},
{
prettyName: "Variable",
selector: ".cm-variable",
description: "for already-defined variables"
},
{
prettyName: "Variable 2",
selector: ".cm-variable-2",
description: "e.g. markdown lists, JS args, SCSS variables"
},
{
prettyName: "Variable 3",
selector: ".cm-variable-3",
description: "used for CSS psuedo elements e.g. :before"
},
{
prettyName: "Header",
selector: ".cm-header",
description: "used for Markdown headers and maybe other stuff"
},
{
prettyName: "Number",
selector: ".cm-number",
},
{
prettyName: "Property",
selector: ".cm-property",
description: "CSS properties, JS object properties"
},
{
prettyName: "Attribute",
selector: ".cm-attribute",
description: "HTML attributes"
},
{
prettyName: "Builtin",
selector: ".cm-builtin",
description: "used for CSS ID selectors"
},
{
prettyName: "Qualifier",
selector: ".cm-qualifier",
description: "used for CSS class selectors"
},
{
prettyName: "Operator",
selector: ".cm-operator",
description: "e.g. =, +, -"
},
{
prettyName: "Meta",
selector: ".cm-meta",
description: "used for vendor prefixes"
},
{
prettyName: "String Color",
selector: ".cm-string",
},
{
prettyName: "Secondary String",
selector: ".cm-string-2",
description: "some CSS values"
},
{
prettyName: "HTML Tag",
selector: ".cm-tag",
description: "tags in HTML"
},
{
prettyName: "CSS Tag",
selector: ".box-css .cm-tag",
description: "element selectors in CSS"
},
{
prettyName: "Tag Bracket",
selector: ".cm-tag.cm-bracket",
description: "angle brackets in HTML"
},
{
prettyName: "Line Number",
selector: ".CodeMirror-linenumber",
},
{
prettyName: "Gutter Marker",
selector: ".CodeMirror-guttermarker-subtle",
description: "e.g. those toggle arrows next to line numbers",
},
{
prettyName: "Comment",
selector: ".cm-comment",
},
{
prettyName: "Selected",
selector: ".cm-searching, .CodeMirror-focused .CodeMirror-selected, .CodeMirror-selected",
description: "used for highlighted text",
prop: "background-color",
}
];
presets["Monokai"] = {
light: false,
elements: [
{
prettyName: "Background",
color: "#272825",
},
{
prettyName: "Cursor",
color: "#ffffff"
},
{
prettyName: "Default",
color: "#ffffff",
},
{
prettyName: "Keyword",
color: "#FA2D7D"
},
{
prettyName: "Atom",
color: "#ae81ff"
},
{
prettyName: "HTML Atom",
master: "atom",
},
{
prettyName: "Definition",
color: "#F79900"
},
{
prettyName: "Variable",
color: "#71D7D0"
},
{
prettyName: "Variable 2",
color: "#AE81FF"
},
{
prettyName: "Variable 3",
color: "#a6e22e"
},
{
prettyName: "Header",
color: "#FA2D7D"
},
{
prettyName: "Number",
color: "#B78CFF"
},
{
prettyName: "Property",
color: "#71D7D0"
},
{
prettyName: "Attribute",
color: "#a6e22e"
},
{
prettyName: "Builtin",
master: "attribute",
},
{
prettyName: "Qualifier",
master: "attribute",
},
{
prettyName: "Operator",
color: "#FA2D7D"
},
{
prettyName: "Meta",
color: "#FA2D7D"
},
{
prettyName: "String Color",
color: "#E9E07F"
},
{
prettyName: "Secondary String",
color: "#E9E07F"
},
{
prettyName: "HTML Tag",
color: "#FA2D7D"
},
{
prettyName: "CSS Tag",
color: "#f92672"
},
{
prettyName: "Tag Bracket",
color: "#ffffff"
},
{
prettyName: "Line Number",
color: "#575344"
},
{
prettyName: "Gutter Marker",
master: "line_number"
},
{
prettyName: "Comment",
master: "line_number"
},
{
prettyName: "Selected",
color: "#414141"
}
]
};
presets["Cobalt2"] = {
light: false,
elements: [
{
prettyName: "Background",
color: "#18344a",
},
{
prettyName: "Cursor",
color: "#ffcd00",
},
{
prettyName: "Default",
color: "#ffffff",
},
{
prettyName: "Keyword",
color: "#fb94ff",
},
{
prettyName: "Atom",
color: "#fd608a",
},
{
prettyName: "HTML Atom",
color: "#fd608a",
},
{
prettyName: "Definition",
color: "#ffd300",
},
{
prettyName: "Variable",
color: "#9af49c",
},
{
prettyName: "Variable 2",
color: "#cccccc",
},
{
prettyName: "Variable 3",
color: "#ffd900",
},
{
prettyName: "Header",
color: "#9af49c",
},
{
prettyName: "Number",
color: "#fd6b95",
},
{
prettyName: "Property",
color: "#9af49c",
},
{
prettyName: "Attribute",
color: "#ffe300",
},
{
prettyName: "Builtin",
color: "#ffe300",
},
{
prettyName: "Qualifier",
color: "#A4FFFF",
},
{
prettyName: "Operator",
color: "#ff9e00",
},
{
prettyName: "Meta",
master: "qualifier",
},
{
prettyName: "String Color",
color: "#2cdb00",
},
{
prettyName: "Secondary String",
color: "#2cdb00",
},
{
prettyName: "HTML Tag",
master: "qualifier",
},
{
prettyName: "CSS Tag",
master: "qualifier",
},
{
prettyName: "Tag Bracket",
color: "#e1efff",
},
{
prettyName: "Line Number",
color: "#8c9aa5",
},
{
prettyName: "Gutter Marker",
color: "#8c9aa5"
},
{
prettyName: "Comment",
color: "#0085ff",
},
{
prettyName: "Selected",
color: "#07489c",
}
],
};
presets["Twilight"] = {
light: false,
elements: [
{
prettyName: "Background",
color: "#1d1f20"
},
{
prettyName: "Cursor",
color: "#ffffff"
},
{
prettyName: "Default",
color: "#ffffff"
},
{
prettyName: "Keyword",
color: "#ddca7e"
},
{
prettyName: "Atom",
color: "#ddca7e"
},
{
prettyName: "HTML Atom",
color: "#96b38a"
},
{
prettyName: "Definition",
color: "#809bbd"
},
{
prettyName: "Variable",
color: "#ddca7e"
},
{
prettyName: "Variable 2",
color: "#809bbd"
},
{
prettyName: "Variable 3",
master: "default",
},
{
prettyName: "Header",
color: "#FF6400"
},
{
prettyName: "Number",
color: "#d0782a"
},
{
prettyName: "Property",
color: "#9a8297"
},
{
prettyName: "Attribute",
color: "#ddca7e"
},
{
prettyName: "Builtin",
master: "attribute",
},
{
prettyName: "Qualifier",
master: "attribute",
},
{
prettyName: "Operator",
color: "#cccccc"
},
{
prettyName: "Meta",
color: "#9a8297"
},
{
prettyName: "String Color",
color: "#96b38a"
},
{
prettyName: "Secondary String",
color: "#FFFFFF"
},
{
prettyName: "HTML Tag",
color: "#A7925A"
},
{
prettyName: "CSS Tag",
color: "#ddca7e"
},
{
prettyName: "Tag Bracket",
master: "html_tag",
},
{
prettyName: "Line Number",
color: "#343434"
},
{
prettyName: "Gutter Marker",
master: "line_number"
},
{
prettyName: "Comment",
color: "#666666"
},
{
prettyName: "Selected",
color: "#35383A"
}
]
};
presets["Solarized Dark"] = {
light: false,
elements: [
{
prettyName: "Background",
color: "#1a414a"
},
{
prettyName: "Cursor",
color: "#ffffff"
},
{
prettyName: "Default",
color: "#839496"
},
{
prettyName: "Keyword",
color: "#839496"
},
{
prettyName: "Atom",
color: "#cb4b16"
},
{
prettyName: "HTML Atom",
color: "#7f9009"
},
{
prettyName: "Definition",
color: "#7f9009"
},
{
prettyName: "Variable",
color: "#1b89d4"
},
{
prettyName: "Variable 2",
color: "#1b89d4"
},
{
prettyName: "Variable 3",
master: "default",
},
{
prettyName: "Header",
color: "#fff9b9"
},
{
prettyName: "Number",
color: "#1f8261"
},
{
prettyName: "Property",
color: "#1b89d4"
},
{
prettyName: "Attribute",
color: "#839496"
},
{
prettyName: "Builtin",
color: "#cb4b16"
},
{
prettyName: "Qualifier",
color: "#cb4b16"
},
{
prettyName: "Operator",
color: "#839496"
},
{
prettyName: "Meta",
color: "#1b89d4"
},
{
prettyName: "String Color",
color: "#7f9009"
},
{
prettyName: "Secondary String",
color: "#1f8261"
},
{
prettyName: "HTML Tag",
color: "#1b89d4"
},
{
prettyName: "CSS Tag",
color: "#cb4b16"
},
{
prettyName: "Tag Bracket",
master: "html_tag",
},
{
prettyName: "Line Number",
color: "#999999"
},
{
prettyName: "Gutter Marker",
master: "line_number"
},
{
prettyName: "Comment",
color: "#365e68"
},
{
prettyName: "Selected",
color: "#2B5660"
}
]
};
presets["Tomorrow Night"] = {
light: false,
elements: [
{
prettyName: "Background",
color: "#1d1f20"
},
{
prettyName: "Cursor",
color: "#000000"
},
{
prettyName: "Default",
color: "#c3c6c4"
},
{
prettyName: "Keyword",
color: "#efc371"
},
{
prettyName: "Atom",
color: "#efc371"
},
{
prettyName: "HTML Atom",
color: "#b5bc67"
},
{
prettyName: "Definition",
color: "#efc371"
},
{
prettyName: "Variable",
color: "#efc371"
},
{
prettyName: "Variable 2",
color: "#ae94c0"
},
{
prettyName: "Variable 3",
master: "default",
},
{
prettyName: "Header",
color: "#dd925f"
},
{
prettyName: "Number",
color: "#dd925f"
},
{
prettyName: "Property",
color: "#ae94c0"
},
{
prettyName: "Attribute",
color: "#c3c6c4"
},
{
prettyName: "Builtin",
color: "#efc371"
},
{
prettyName: "Qualifier",
color: "#efc371"
},
{
prettyName: "Operator",
color: "#c3c6c4"
},
{
prettyName: "Meta",
color: "#b5bc67"
},
{
prettyName: "String Color",
color: "#b5bc67"
},
{
prettyName: "Secondary String",
color: "#FFFFFF"
},
{
prettyName: "HTML Tag",
color: "#efc371"
},
{
prettyName: "CSS Tag",
color: "#efc371"
},
{
prettyName: "Tag Bracket",
master: "html_tag",
},
{
prettyName: "Line Number",
color: "#444444"
},
{
prettyName: "Gutter Marker",
master: "line_number"
},
{
prettyName: "Comment",
color: "#666666"
},
{
prettyName: "Selected",
color: "#35383A"
}
]
};
presets["Oceanic Dark"] = {
light: false,
elements: [
{
prettyName: "Background",
color: "#1B2B34"
},
{
prettyName: "Cursor",
color: "#FFFFFF"
},
{
prettyName: "Default",
color: "#CDD3DE"
},
{
prettyName: "Keyword",
color: "#EC5f67"
},
{
prettyName: "Atom",
color: "#C594C5"
},
{
prettyName: "HTML Atom",
master: "atom",
},
{
prettyName: "Definition",
color: "#F99157"
},
{
prettyName: "Variable",
color: "#99C794"
},
{
prettyName: "Variable 2",
color: "#6699CC"
},
{
prettyName: "Variable 3",
master: "default",
},
{
prettyName: "Header",
master: "default",
},
{
prettyName: "Number",
master: "default",
},
{
prettyName: "Property",
color: "#99C794"
},
{
prettyName: "Attribute",
color: "#99C794"
},
{
prettyName: "Builtin",
master: "default",
},
{
prettyName: "Qualifier",
master: "default",
},
{
prettyName: "Operator",
master: "default",
},
{
prettyName: "Meta",
master: "default",
},
{
prettyName: "String Color",
color: "#FAC863"
},
{
prettyName: "Secondary String",
master: "string_color"
},
{
prettyName: "HTML Tag",
color: "#EC5f67"
},
{
prettyName: "CSS Tag",
master: "html_tag",
},
{
prettyName: "Tag Bracket",
master: "html_tag",
},
{
prettyName: "Line Number",
color: "#5D5D5D"
},
{
prettyName: "Gutter Marker",
master: "line_number"
},
{
prettyName: "Comment",
color: "#65737e"
},
{
prettyName: "Selected",
color: "#263844"
}
]
};
presets["Panda"] = {
light: false,
elements: [
{
prettyName: "Background",
color: "#292A2B"
},
{
prettyName: "Cursor",
color: "#ffffff"
},
{
prettyName: "Default",
color: "#E6E6E6"
},
{
prettyName: "Keyword",
color: "#FF75B5"
},
{
prettyName: "Atom",
color: "#ff2c6d"
},
{
prettyName: "HTML Atom",
master: "atom",
},
{
prettyName: "Definition",
color: "#e6e6e6"
},
{
prettyName: "Variable",
color: "#ffb86c"
},
{
prettyName: "Variable 2",
color: "#ff9ac1"
},
{
prettyName: "Variable 3",
color: "#ff9ac1"
},
{
prettyName: "Header",
master: "default",
},
{
prettyName: "Number",
color: "#FFB86C"
},
{
prettyName: "Property",
color: "#f3f3f3"
},
{
prettyName: "Attribute",
color: "#ffb86c"
},
{
prettyName: "Builtin",
master: "default",
},
{
prettyName: "Qualifier",
master: "default",
},
{
prettyName: "Operator",
color: "#f3f3f3"
},
{
prettyName: "Meta",
color: "#b084eb"
},
{
prettyName: "String Color",
color: "#19F9D8"
},
{
prettyName: "Secondary String",
color: "#FFB86C"
},
{
prettyName: "HTML Tag",
color: "#ff2c6d"
},
{
prettyName: "CSS Tag",
master: "html_tag"
},
{
prettyName: "Tag Bracket",
master: "html_tag",
},
{
prettyName: "Line Number",
color: "#949496"
},
{
prettyName: "Gutter Marker",
master: "line_number"
},
{
prettyName: "Comment",
color: "#676B79"
},
{
prettyName: "Selected",
color: "#464B4E"
}
]
};
presets["DuoTone Dark"] = {
light: false,
elements: [
{
prettyName: "Background",
color: "#2a2734"
},
{
prettyName: "Cursor",
color: "#ffffff"
},
{
prettyName: "Default",
color: "#6c6783"
},
{
prettyName: "Keyword",
color: "#ffcc99"
},
{
prettyName: "Atom",
master: "keyword"
},
{
prettyName: "HTML Atom",
master: "atom",
},
{
prettyName: "Definition",
color: "#eeebff"
},
{
prettyName: "Variable",
master: "keyword"
},
{
prettyName: "Variable 2",
color: "#6a51e6"
},
{
prettyName: "Variable 3",
master: "variable_2"
},
{
prettyName: "Header",
color: "#eeebff",
},
{
prettyName: "Number",
master: "keyword"
},
{
prettyName: "Property",
color: "#9b87fd"
},
{
prettyName: "Attribute",
master: "keyword"
},
{
prettyName: "Builtin",
master: "definition",
},
{
prettyName: "Qualifier",
master: "definition",
},
{
prettyName: "Operator",
color: "#ffa852"
},
{
prettyName: "Meta",
master: "default"
},
{
prettyName: "String Color",
color: "#ffba76"
},
{
prettyName: "Secondary String",
master: "variable_2"
},
{
prettyName: "HTML Tag",
master: "definition"
},
{
prettyName: "CSS Tag",
master: "html_tag"
},
{
prettyName: "Tag Bracket",
master: "html_tag",
},
{
prettyName: "Line Number",
color: "#545167"
},
{
prettyName: "Gutter Marker",
master: "line_number"
},
{
prettyName: "Comment",
color: "#6c6783"
},
{
prettyName: "Selected",
color: "#393649"
}
]
};
presets["Classic"] = {
light: true,
elements: [
{
prettyName: "Background",
color: "#FFFFFF"
},
{
prettyName: "Cursor",
color: "#000000"
},
{
prettyName: "Default",
color: "#999999"
},
{
prettyName: "Keyword",
color: "#221199"
},
{
prettyName: "Atom",
master: "keyword"
},
{
prettyName: "HTML Atom",
color: "#aa1111",
},
{
prettyName: "Definition",
color: "#770088"
},
{
prettyName: "Variable",
master: "keyword"
},
{
prettyName: "Variable 2",
color: "#000000"
},
{
prettyName: "Variable 3",
master: "variable"
},
{
prettyName: "Header",
color: "#aa1111",
},
{
prettyName: "Number",
color: "#116644"
},
{
prettyName: "Property",
color: "#221199"
},
{
prettyName: "Attribute",
color: "#555555"
},
{
prettyName: "Builtin",
color: "#221199",
},
{
prettyName: "Qualifier",
color: "#221199",
},
{
prettyName: "Operator",
color: "#000000"
},
{
prettyName: "Meta",
color: "#221199"
},
{
prettyName: "String Color",
color: "#aa1111"
},
{
prettyName: "Secondary String",
master: "string"
},
{
prettyName: "HTML Tag",
color: "#221199"
},
{
prettyName: "CSS Tag",
master: "html_tag"
},
{
prettyName: "Tag Bracket",
master: "html_tag",
},
{
prettyName: "Line Number",
color: "#cccccc"
},
{
prettyName: "Gutter Marker",
master: "line_number"
},
{
prettyName: "Comment",
color: "#cccccc"
},
{
prettyName: "Selected",
color: "#EDF0F0"
}
]
};
presets["Solarized Light"] = {
light: true,
elements: [
{
prettyName: "Background",
color: "#fdf6e3"
},
{
prettyName: "Cursor",
color: "#000000"
},
{
prettyName: "Default",
color: "#657b83"
},
{
prettyName: "Keyword",
color: "#b58900"
},
{
prettyName: "Atom",
color: "#cb4b16"
},
{
prettyName: "HTML Atom",
color: "#2aa198",
},
{
prettyName: "Definition",
color: "#268bd2"
},
{
prettyName: "Variable",
color: "#657b83"
},
{
prettyName: "Variable 2",
color: "#6c71c4"
},
{
prettyName: "Variable 3",
master: "variable"
},
{
prettyName: "Header",
color: "#000000",
},
{
prettyName: "Number",
color: "#b58900"
},
{
prettyName: "Property",
color: "#268bd2"
},
{
prettyName: "Attribute",
color: "#657b83"
},
{
prettyName: "Builtin",
color: "#cb4b16",
},
{
prettyName: "Qualifier",
color: "#cb4b16",
},
{
prettyName: "Operator",
color: "#93a1a1"
},
{
prettyName: "Meta",
color: "#2aa198"
},
{
prettyName: "String Color",
color: "#6c71c4"
},
{
prettyName: "Secondary String",
color: "#2aa198"
},
{
prettyName: "HTML Tag",
color: "#2aa198"
},
{
prettyName: "CSS Tag",
color: "#cb4b16"
},
{
prettyName: "Tag Bracket",
master: "html_tag",
},
{
prettyName: "Line Number",
color: "#cccccc"
},
{
prettyName: "Gutter Marker",
master: "line_number"
},
{
prettyName: "Comment",
color: "#93a1a1"
},
{
prettyName: "Selected",
color: "#F1EAD8"
}
]
};
presets["XQ Light"] = {
light: true,
elements: [
{
prettyName: "Background",
color: "#FFFFFF"
},
{
prettyName: "Cursor",
color: "#000000"
},
{
prettyName: "Default",
color: "#999999"
},
{
prettyName: "Keyword",
color: "#5A5CAD"
},
{
prettyName: "Atom",
color: "#6C8CD5"
},
{
prettyName: "HTML Atom",
master: "atom",
},
{
prettyName: "Definition",
color: "#000000"
},
{
prettyName: "Variable",
color: "#000000"
},
{
prettyName: "Variable 2",
master: "variable"
},
{
prettyName: "Variable 3",
master: "variable"
},
{
prettyName: "Header",
master: "default",
},
{
prettyName: "Number",
color: "#116644"
},
{
prettyName: "Property",
color: "#999999"
},
{
prettyName: "Attribute",
color: "#7F007F"
},
{
prettyName: "Builtin",
color: "#7EA656",
},
{
prettyName: "Qualifier",
color: "#808080",
},
{
prettyName: "Operator",
color: "#5A5CAD"
},
{
prettyName: "Meta",
color: "#0080FF"
},
{
prettyName: "String Color",
color: "#ff0000"
},
{
prettyName: "Secondary String",
master: "string"
},
{
prettyName: "HTML Tag",
color: "#3F7F7F"
},
{
prettyName: "CSS Tag",
master: "html_tag"
},
{
prettyName: "Tag Bracket",
master: "html_tag",
},
{
prettyName: "Line Number",
color: "#cccccc"
},
{
prettyName: "Gutter Marker",
master: "line_number"
},
{
prettyName: "Comment",
color: "#0080FF"
},
{
prettyName: "Selected",
color: "#EDF0F0"
}
]
};
presets["Oceanic Light"] = {
light: true,
elements: [
{
prettyName: "Background",
color: "#eff1f5"
},
{
prettyName: "Cursor",
color: "#000000"
},
{
prettyName: "Default",
color: "#343d46"
},
{
prettyName: "Keyword",
color: "#bf616a"
},
{
prettyName: "Atom",
color: "#b48ead"
},
{
prettyName: "HTML Atom",
master: "atom",
},
{
prettyName: "Definition",
color: "#d08770"
},
{
prettyName: "Variable",
color: "#a3be8c"
},
{
prettyName: "Variable 2",
color: "#8fa1b3"
},
{
prettyName: "Variable 3",
master: "variable"
},
{
prettyName: "Header",
master: "default",
},
{
prettyName: "Number",
color: "#b48ead"
},
{
prettyName: "Property",
color: "#a3be8c"
},
{
prettyName: "Attribute",
master: "property"
},
{
prettyName: "Builtin",
master: "default",
},
{
prettyName: "Qualifier",
master: "default",
},
{
prettyName: "Operator",
master: "default",
},
{
prettyName: "Meta",
master: "default",
},
{
prettyName: "String Color",
color: "#E1AF1D"
},
{
prettyName: "Secondary String",
master: "string"
},
{
prettyName: "HTML Tag",
color: "#bf616a"
},
{
prettyName: "CSS Tag",
master: "html_tag"
},
{
prettyName: "Tag Bracket",
master: "html_tag",
},
{
prettyName: "Line Number",
color: "#bbbbbb"
},
{
prettyName: "Gutter Marker",
master: "line_number"
},
{
prettyName: "Comment",
color: "#ab7967"
},
{
prettyName: "Selected",
color: "#EDF0F0"
}
]
};
presets["MDN Like"] = {
light: true,
elements: [
{
prettyName: "Background",
color: "#F7F8F9"
},
{
prettyName: "Cursor",
color: "#000000"
},
{
prettyName: "Default",
color: "#4D4E53"
},
{
prettyName: "Keyword",
color: "#007BBB"
},
{
prettyName: "Atom",
color: "#4D4E53"
},
{
prettyName: "HTML Atom",
master: "atom",
},
{
prettyName: "Definition",
color: "#5C4E53"
},
{
prettyName: "Variable",
color: "#0077aa"
},
{
prettyName: "Variable 2",
color: "#669900"
},
{
prettyName: "Variable 3",
color: "#0077aa"
},
{
prettyName: "Header",
color: "#FF6400",
},
{
prettyName: "Number",
color: "#4D4E53"
},
{
prettyName: "Property",
color: "#990055"
},
{
prettyName: "Attribute",
color: "#66993E"
},
{
prettyName: "Builtin",
color: "#9B7536",
},
{
prettyName: "Qualifier",
color: "#669900",
},
{
prettyName: "Operator",
color: "#cda869",
},
{
prettyName: "Meta",
color: "#000000",
},
{
prettyName: "String Color",
color: "#0077aa"
},
{
prettyName: "Secondary String",
color: "#bd6b18"
},
{
prettyName: "HTML Tag",
color: "#9B0064"
},
{
prettyName: "CSS Tag",
master: "html_tag"
},
{
prettyName: "Tag Bracket",
master: "html_tag",
},
{
prettyName: "Line Number",
color: "#aaaaaa"
},
{
prettyName: "Gutter Marker",
master: "line_number"
},
{
prettyName: "Comment",
color: "#777777"
},
{
prettyName: "Selected",
color: "#EDF0F0"
}
]
};
presets["DuoTone Light"] = {
light: true,
elements: [
{
prettyName: "Background",
color: "#faf8f5"
},
{
prettyName: "Cursor",
color: "#000000"
},
{
prettyName: "Default",
color: "#b29762"
},
{
prettyName: "Keyword",
master: "default"
},
{
prettyName: "Atom",
master: "default"
},
{
prettyName: "HTML Atom",
master: "atom",
},
{
prettyName: "Definition",
color: "#2d2006"
},
{
prettyName: "Variable",
master: "atom",
},
{
prettyName: "Variable 2",
color: "#896724"
},
{
prettyName: "Variable 3",
master: "variable_2"
},
{
prettyName: "Header",
color: "#2d2006",
},
{
prettyName: "Number",
master: "default"
},
{
prettyName: "Property",
color: "#b29762"
},
{
prettyName: "Attribute",
master: "default"
},
{
prettyName: "Builtin",
color: "#2d2006",
},
{
prettyName: "Qualifier",
color: "#2d2006",
},
{
prettyName: "Operator",
color: "#0e4ecd",
},
{
prettyName: "Meta",
master: "default",
},
{
prettyName: "String Color",
color: "#1657da"
},
{
prettyName: "Secondary String",
color: "#896724"
},
{
prettyName: "HTML Tag",
color: "#2d2006"
},
{
prettyName: "CSS Tag",
master: "html_tag"
},
{
prettyName: "Tag Bracket",
master: "html_tag",
},
{
prettyName: "Line Number",
color: "#dbcfb8"
},
{
prettyName: "Gutter Marker",
master: "line_number"
},
{
prettyName: "Comment",
color: "#b6ad9a"
},
{
prettyName: "Selected",
color: "#EEECEA"
}
]
};
var setupElement = function(element) {
if (!element.prettyName) {
console.warn(presetName + ": element name missing.");
return;
}
for (var i = 0; i < elementGlobals.length; i++) {
var global = elementGlobals[i];
if (global.prettyName === element.prettyName) {
if (element.master && element.color) {
console.warn(presetName + ": both color and master present on " + element.prettyName);
} else if (element.color) {
if (element.color[0] !== "#" || element.color.length !== 7) {
console.warn(presetName + ": invalid color " + element.color + " on " + element.prettyName);
}
} else if (element.master) {
if (element.master[0] == "#") {
console.warn(presetName + ": invalid master " + element.master + " on " + element.prettyName);
}
}
element.selector = global.selector;
if (global.description) { element.description = global.description; }
if (global.prop) { element.prop = global.prop; }
return;
}
}
};
for (var preset in presets) {
var presetName = preset;
preset = presets[preset];
var numElements = preset.elements.length;
var expectedElements = elementGlobals.length;
if (numElements !== expectedElements) {
console.warn("Invalid number of elements (saw " + numElements + ", expected " + expectedElements);
}
preset.elements.forEach(setupElement);
}
return presets;
})();
speechSynthesis
"use strict";
console.clear();
var escapeHTML = (function() {
"use strict";
var escape = document.createElement("textarea");
return function(html) {
escape.textContent = html;
return escape.innerHTML;
};
})();
var pubsub = (function() {
"use strict";
var topics = {};
var subUid = -1;
var subscribe = function(topic, func) {
if (!topics[topic]) {
topics[topic] = [];
}
var token = (++subUid).toString();
topics[topic].push({
token: token,
func: func
});
return token;
};
var publish = function(topic, args) {
if (!topics[topic]) {
return false;
}
setTimeout(function() {
var subscribers = topics[topic];
var len = subscribers ? subscribers.length : 0;
while (len--) {
subscribers[len].func(args);
}
}, 0);
};
var unsubscribe = function(token) {
for (var m in topics) {
if (topics[m]) {
for (var i = 0, j = topics[m].length; i < j; i++) {
if (topics[m][i].token === token) {
topics[m].splice(i, 1);
return token;
}
}
}
}
return false;
};
var reset = function() {
topics = {};
subUid = -1;
};
return {
publish: publish,
subscribe: subscribe,
unsubscribe: unsubscribe,
reset: reset
};
}());
var cmTheme = (function() {
var rawElements = [];
var elements = [];
var presets = [];
var styleEl = document.createElement("style");
var isLightTheme = false;
var container = document.getElementById("controls");
var baseUIToggle = document.getElementById("base-ui");
var fauxToggleLabels = document.getElementsByClassName("base-ui__label");
var exportButton = document.getElementById("export-json");
var importButton = document.getElementById("import-json");
var importInput = document.getElementById("import-input");
var pageWrap = document.getElementById("page-wrap");
var presetSelect = document.getElementById("presets");
var presetLoad = document.getElementById("load-preset");
var appendStyles = function() {
document.head.appendChild(styleEl);
};
var updateStyles = function(shouldSetSave) {
styleEl.innerHTML = buildStyles();
};
var buildStyles = function() {
var styles = "";
elements.forEach(function(element) {
styles += element.getStyleRule();
});
return styles;
};
var addElement = function(element) {
elements.push(element);
};
var getElement = function(id) {
var el;
elements.some(function(element) {
if (element.id === id) {
el = element;
return true;
}
});
return el || false;
};
var getElements = function() {
return elements;
};
var getContainerEl = function() {
return container;
};
var setPageBackground = function() {
pageWrap.classList.toggle("light", baseUIToggle.checked);
};
var handlefauxToggleLabelClick = function() {
baseUIToggle.click();
};
var addGUIEventListeners = function() {
exportButton.addEventListener("click", function(){
exportTheme();
});
importButton.addEventListener("click", function(){
importInput.click();
});
importInput.addEventListener("change", function(e) {
var file = importInput.files[0];
var fr = new FileReader();
fr.onload = function() {
reset();
buildElementsFromPreset(JSON.parse(fr.result));
};
fr.readAsText(file);
});
baseUIToggle.addEventListener("click", function() {
isLightTheme = baseUIToggle.checked;
setPageBackground();
});
for (var i = 0; i < fauxToggleLabels.length; i++) {
fauxToggleLabels[i].addEventListener("click", handlefauxToggleLabelClick);
}
presetLoad.addEventListener("click", function() {
reset();
buildElementsFromPreset(presets[presetSelect.value]);
});
};
var drawGUI = function() {
elements.forEach(function(element) {
element.setupSelectEl();
element.draw();
});
};
var reset = function() {
pubsub.reset();
elements.forEach(function(element) {
element.remove();
});
elements = [];
styleEl.innerHTML = "";
};
var buildElementStash = function() {
var elementStash = [];
elements.forEach(function(element) {
var toStash = {
prettyName: element.prettyName,
selector: element.selector,
color: element.color,
description: element.description,
prop: element.prop,
master: element.master.id
};
elementStash.push(toStash);
});
return elementStash;
};
var exportTheme = function() {
var presetExport = {};
presetExport.elements = buildElementStash();
presetExport.light = isLightTheme;
var dataStr = "data:text/json;charset=utf-8,";
dataStr += encodeURIComponent(JSON.stringify(presetExport));
var a = document.createElement("a");
a.href = dataStr;
a.setAttribute("download", "ces_theme.json");
document.body.appendChild(a);
a.click();
a.parentNode.removeChild(a);
};
var setupPresets = function(newPresets) {
presets = newPresets;
Object.keys(presets).forEach(function(preset) {
var option = document.createElement("option");
option.innerHTML = preset;
presetSelect.appendChild(option);
});
};
var buildElementsFromPreset = function(preset) {
initElements(preset.elements);
isLightTheme = preset.light;
initGUI();
};
var init = function(presets) {
setupPresets(presets);
addGUIEventListeners();
buildElementsFromPreset(presets[presetSelect.value]);
};
var setBaseUIToggle = function() {
baseUIToggle.checked = isLightTheme;
setPageBackground();
};
var initElements = function(rawElements) {
rawElements.forEach(function(element) {
new CMElement(element);
});
};
var initGUI = function() {
setPageBackground();
drawGUI();
appendStyles();
setBaseUIToggle();
};
return {
init: init,
addElement: addElement,
getElement: getElement,
getElements: getElements,
updateStyles: updateStyles,
getContainerEl: getContainerEl
};
})();
var CMElement = function(options) {
cmTheme.addElement(this);
this.prop = options.prop || "color";
this.hideTypeControls = (this.prop !== "color");
this.prettyName = options.prettyName;
this.selector = options.selector;
this.color = options.color;
this.description = options.description || false;
this.master = cmTheme.getElement(options.master) || false;
this.underline = options.underline || false;
this.italic = options.italic || false;
this.id = this.prettyName.toLowerCase().replace(/\s/g, "_");
this.setupElements();
if (this.master) {
this.syncTo(this.master);
}
};
CMElement.prototype.getStyleRule = function() {
var styles = this.selector + "{";
styles += this.prop + ":" + this.color + ";";
if (this.italic) {
styles += "font-style:italic;";
}
if (this.underline) {
styles += "text-decoration:underline;";
}
styles += "}";
return styles;
};
CMElement.prototype.updateColor = function(color, themeNeedsSave) {
themeNeedsSave = !!themeNeedsSave;
this.color = color;
this.inputEl.value = color;
this.fauxEl.style.backgroundColor = color;
pubsub.publish(this.id, color);
cmTheme.updateStyles(themeNeedsSave);
};
CMElement.prototype.syncTo = function(master) {
if (this.master) {
pubsub.unsubscribe(this.token);
}
this.master = master;
this.updateColor(master.color);
this.token = pubsub.subscribe(master.id, function(color) {
this.updateColor(color);
}.bind(this));
};
CMElement.prototype.unSync = function() {
if (!this.master) { return; }
this.master = false;
this.selectEl.value = "none";
pubsub.unsubscribe(this.token);
};
CMElement.prototype.setupInputEl = function() {
var fauxEl = document.createElement("div");
fauxEl.classList.add("cmEl__fauxColor");
this.fauxEl = fauxEl;
var inputEl = document.createElement("input");
inputEl.classList.add("cmEl__color");
inputEl.type = "color";
inputEl.value = this.color;
inputEl.addEventListener("input", function() {
this.unSync();
this.updateColor(this.inputEl.value, true);
}.bind(this));
this.inputEl = inputEl;
this.fauxEl.appendChild(this.inputEl);
};
CMElement.prototype.setupHeadingEl = function() {
var headingEl = document.createElement("h2");
headingEl.classList.add("cmEl__heading");
headingEl.innerHTML = this.prettyName;
headingEl.addEventListener("click", function() {
this.inputEl.click();
}.bind(this));
this.headingEl = headingEl;
};
CMElement.prototype.setupDescriptionEl = function() {
if (!this.description) {
return;
}
var descriptionEl = document.createElement("p");
descriptionEl.classList.add("cmEl__desc");
descriptionEl.innerHTML = escapeHTML(this.description);
this.descriptionEl = descriptionEl;
};
CMElement.prototype.setupLabelEl = function() {
var labelEl = document.createElement("label");
labelEl.htmlFor = this.id;
labelEl.classList.add("cmEl__syncTo-label");
labelEl.innerHTML = "Sync to:";
this.labelEl = labelEl;
};
CMElement.prototype.setupSelectEl = function() {
var selectEl = document.createElement("select");
selectEl.id = this.id;
selectEl.classList.add("cmEl__syncTo");
selectEl.innerHTML = "<option value='none'>None</option>";
cmTheme.getElements().forEach(function(element) {
if (element != this) {
var option = document.createElement("option");
option.value = element.id;
if (this.master && element == this.master) {
option.selected = true;
}
option.innerHTML = element.prettyName;
selectEl.appendChild(option);
}
}.bind(this));
selectEl.addEventListener("change", function(e) {
var selection = cmTheme.getElement(this.selectEl.value);
if (selection) {
this.syncTo(selection);
} else {
this.unSync();
}
}.bind(this));
this.selectEl = selectEl;
};
CMElement.prototype.setupSettingsEl = function() {
var settingsEl = document.createElement("button");
settingsEl.classList.add("cmEl__settings");
settingsEl.addEventListener("click", function() {
this.classList.toggle("active");
});
var svg = this.buildSVGIcon("gear");
settingsEl.appendChild(svg);
this.settingsEl = settingsEl;
};
CMElement.prototype.buildSVGIcon = function(id) {
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var use = document.createElementNS("http://www.w3.org/2000/svg", "use");
use.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#" + id);
svg.appendChild(use);
return svg;
};
CMElement.prototype.setupItalicEl = function() {
var italicEl = this.buildSVGIcon("italic");
italicEl.classList.add("cmEl__font-control");
italicEl.addEventListener("click", function() {
this.italic = !this.italic;
italicEl.classList.toggle("active", this.italic);
cmTheme.updateStyles();
}.bind(this));
this.italicEl = italicEl;
};
CMElement.prototype.setupUnderlineEl = function() {
var underlineEl = this.buildSVGIcon("underline");
underlineEl.classList.add("cmEl__font-control");
underlineEl.addEventListener("click", function() {
this.underline = !this.underline;
underlineEl.classList.toggle("active", this.underline);
cmTheme.updateStyles();
}.bind(this));
this.underlineEl = underlineEl;
};
CMElement.prototype.setupFontEl = function() {
var fontEl = document.createElement("div");
this.setupItalicEl();
this.setupUnderlineEl();
fontEl.classList.add("cmEl__font-controls");
fontEl.appendChild(this.italicEl);
fontEl.appendChild(this.underlineEl);
this.fontEl = fontEl;
};
CMElement.prototype.setupElements = function() {
this.setupInputEl();
this.setupHeadingEl();
this.setupSettingsEl();
this.setupLabelEl();
this.setupDescriptionEl();
if (!this.hideTypeControls) {
this.setupFontEl();
}
this.updateColor(this.color);
};
CMElement.prototype.draw = function() {
var advWrapper = document.createElement("div");
advWrapper.classList.add("cmEl__advanced");
if (this.descriptionEl) {
advWrapper.appendChild(this.descriptionEl);
}
if (this.fontEl) {
advWrapper.appendChild(this.fontEl);
}
advWrapper.appendChild(this.labelEl);
advWrapper.appendChild(this.selectEl);
var wrapper = document.createElement("div");
wrapper.id = "cmEl_" + this.id;
wrapper.classList.add("cmEl");
wrapper.appendChild(this.fauxEl);
wrapper.appendChild(this.settingsEl);
wrapper.appendChild(this.headingEl);
wrapper.appendChild(advWrapper);
cmTheme.getContainerEl().appendChild(wrapper);
this.wrapper = wrapper;
};
CMElement.prototype.remove = function() {
this.wrapper.parentNode.removeChild(this.wrapper);
};
cmTheme.init(presets);
<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" width="50" height="100" 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" width="86.1" height="100" 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>
<input type="file" accept=".json" id="import-input" style="display:none;">
<button id="import-json" class="button button--default">
Import from JSON
</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"> <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;"> <span class="cm-variable">console</span>.<span class="cm-property">log</span>( <span class="cm-keyword">this</span>.<span class="cm-property">isGoodDog</span> <span class="cm-operator">?</span> <span class="cm-string">"me"</span> : <span class="cm-atom">undefined</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 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">bark</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;">17</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-string">"woof"</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><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;">19</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">sayName</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;">20</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-keyword">this</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;">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></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><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;">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-keyword">var</span> <span class="cm-def">myDog</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">Dog</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">name</span>: <span class="cm-string">"aDog"</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 class="cm-property">isGoodDog</span>: <span class="cm-atom">true</span> <span class="cm-comment">// good pupper</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;">27</div>
</div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">});</span></pre></div>
<div style="position: relative; display: none;">
<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 class="cm-variable">console</span>.<span class="cm-property">log</span>(<span class="cm-keyword">this</span>.<span class="cm-property">name</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: 575px;"></div>
<div class="CodeMirror-gutters" style="height: 590px;">
<div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 29px;"></div>
<div class="CodeMirror-gutter CodeMirror-foldgutter"></div>
</div>
</div>
</div>
</div>
</div>
</div>
::-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: flex;
flex-direction: column;
height: 100vh;
}
.main {
display: flex;
height: 100vh;
}
.preview {
padding: 20px;
background: #333;
display: flex;
overflow-x: auto;
}
.light .preview {
background: #ccc;
}
.top-controls {
display: flex;
flex-shrink: 0;
white-space: nowrap;
overflow: hidden;
}
.version-controls {
background: #111;
padding: 20px;
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;
animation: fade 1s ease-out;
}
.light .last-saved {
color: #aaa;
animation-name: fade--dark;
}
@keyframes fade {
0% {
color: white;
}
100% {
color: #666;
}
}
@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%;
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: flex;
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;
line-height: 30px;
}
.giant-toggle ~ label:after {
content: '';
display: block;
float: left;
height: 30px;
border-radius: 30px;
width: 50px;
background: #ccc;
}
.light .giant-toggle ~ label:after {
background: #777;
}
.giant-toggle ~ label:before {
top: 50%;
transform: translateY(-50%);
position: absolute;
content: '';
display: block;
float: left;
height: 35px;
width: 35px;
left: -5px;
border-radius: 50%;
background: white;
transition: color .1s ease-out, left .1s ease-out;
}
.giant-toggle:checked ~ label:before {
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;
}
.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;
-webkit-font-variant-ligatures: none;
-moz-font-variant-ligatures: none;
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 {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
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: .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: .7em
}
.CodeMirror-foldgutter-open,.CodeMirror-foldgutter-folded {
cursor: pointer
}
.CodeMirror-foldgutter-open:after {
font-family: sans-serif;
content: "\25BE"
}
.CodeMirror-foldgutter-folded:after {
font-family: sans-serif;
content: "\25B8"
}
.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;
}