refactor CSS loading. Now use requireJS
This commit is contained in:
Fabian Jakobs
parent
d9c3c8db30
commit
140d80a15e
11 changed files with 242 additions and 158 deletions
3
.gitignore
vendored
3
.gitignore
vendored
|
|
@ -1 +1,2 @@
|
|||
.DS_Store
|
||||
.DS_Store
|
||||
.settings.xml
|
||||
223
demo/editor.html
223
demo/editor.html
|
|
@ -3,46 +3,44 @@
|
|||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Editor</title>
|
||||
<meta name="author" content="Fabian Jakobs">
|
||||
|
||||
<style type="text/css" media="screen">
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font: sans-serif;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-family: Arial, Helvetica, sans-serif, Tahoma, Verdana;
|
||||
font-size: 12px;
|
||||
background: rgb(14, 98, 165);
|
||||
color: white;
|
||||
}
|
||||
|
||||
#editor {
|
||||
top: 55px;
|
||||
left: 0px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
#controls {
|
||||
width: 100%;
|
||||
height: 55px;
|
||||
}
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Editor</title>
|
||||
<meta name="author" content="Fabian Jakobs">
|
||||
|
||||
<style type="text/css" media="screen">
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font: sans-serif;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-family: Arial, Helvetica, sans-serif, Tahoma, Verdana;
|
||||
font-size: 12px;
|
||||
background: rgb(14, 98, 165);
|
||||
color: white;
|
||||
}
|
||||
|
||||
#editor {
|
||||
top: 55px;
|
||||
left: 0px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
#controls {
|
||||
width: 100%;
|
||||
height: 55px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<link rel="stylesheet" href="../css/editor.css" type="text/css" charset="utf-8">
|
||||
<link rel="stylesheet" href="../css/tm.css" type="text/css" charset="utf-8">
|
||||
<script src="require.js" type="text/javascript" charset="utf-8"></script>
|
||||
</style>
|
||||
<script src="require.js" type="text/javascript" charset="utf-8"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
@ -56,7 +54,7 @@
|
|||
<option value="css">CSS Document</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<td>
|
||||
<label for="mode">Mode:</label>
|
||||
<select id="mode" size="1">
|
||||
<option value="text">Plain Text</option>
|
||||
|
|
@ -66,6 +64,13 @@
|
|||
<option value="css">CSS</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<label for="theme">Theme:</label>
|
||||
<select id="theme" size="1">
|
||||
<option value="ace/theme/TextMate">TextMate</option>
|
||||
<option value="ace/theme/Eclipse">Eclipse</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<label for="select_style">Full line selections</label>
|
||||
<input type="checkbox" name="select_style" id="select_style" checked>
|
||||
|
|
@ -75,7 +80,7 @@
|
|||
<input type="checkbox" name="highlight_active" id="highlight_active" checked>
|
||||
</td>
|
||||
<td align="right">
|
||||
<img src="logo.png">
|
||||
<img src="logo.png">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -84,9 +89,9 @@
|
|||
</div>
|
||||
|
||||
<script type="text/editor" id="jstext">function foo(items) {
|
||||
for (var i=0; i<items.length; i++) {
|
||||
alert(items[i] + "juhu";
|
||||
}
|
||||
for (var i=0; i<items.length; i++) {
|
||||
alert(items[i] + "juhu";
|
||||
}
|
||||
}</script>
|
||||
|
||||
<script type="text/editor" id="csstext">.text-layer {
|
||||
|
|
@ -121,6 +126,7 @@ require(
|
|||
[
|
||||
"ace/Editor",
|
||||
"ace/VirtualRenderer",
|
||||
"ace/theme/TextMate",
|
||||
"ace/Document",
|
||||
"ace/mode/JavaScript",
|
||||
"ace/mode/Css",
|
||||
|
|
@ -128,7 +134,7 @@ require(
|
|||
"ace/mode/Xml",
|
||||
"ace/mode/Text",
|
||||
"ace/UndoManager"
|
||||
], function(Editor, Renderer, Document, JavaScriptMode, CssMode, HtmlMode, XmlMode, TextMode, UndoManager) {
|
||||
], function(Editor, Renderer, theme, Document, JavaScriptMode, CssMode, HtmlMode, XmlMode, TextMode, UndoManager) {
|
||||
|
||||
var ace = require("ace/ace");
|
||||
var docs = {}
|
||||
|
|
@ -148,37 +154,37 @@ docs.html.setUndoManager(new UndoManager());
|
|||
var docEl = document.getElementById("doc");
|
||||
|
||||
function onDocChange() {
|
||||
var doc = getDoc();
|
||||
editor.setDocument(doc);
|
||||
|
||||
var mode = doc.getMode();
|
||||
if (mode instanceof JavaScriptMode) {
|
||||
modeEl.value = "javascript"
|
||||
}
|
||||
else if (mode instanceof CssMode) {
|
||||
modeEl.value = "css"
|
||||
}
|
||||
else if (mode instanceof HtmlMode) {
|
||||
modeEl.value = "html"
|
||||
}
|
||||
else if (mode instanceof XmlMode) {
|
||||
modeEl.value = "xml"
|
||||
}
|
||||
else {
|
||||
modeEl.value = "text"
|
||||
}
|
||||
|
||||
editor.focus();
|
||||
var doc = getDoc();
|
||||
editor.setDocument(doc);
|
||||
|
||||
var mode = doc.getMode();
|
||||
if (mode instanceof JavaScriptMode) {
|
||||
modeEl.value = "javascript"
|
||||
}
|
||||
else if (mode instanceof CssMode) {
|
||||
modeEl.value = "css"
|
||||
}
|
||||
else if (mode instanceof HtmlMode) {
|
||||
modeEl.value = "html"
|
||||
}
|
||||
else if (mode instanceof XmlMode) {
|
||||
modeEl.value = "xml"
|
||||
}
|
||||
else {
|
||||
modeEl.value = "text"
|
||||
}
|
||||
|
||||
editor.focus();
|
||||
}
|
||||
docEl.onchange = onDocChange;
|
||||
|
||||
function getDoc() {
|
||||
return docs[docEl.value];
|
||||
return docs[docEl.value];
|
||||
}
|
||||
|
||||
var modeEl = document.getElementById("mode");
|
||||
modeEl.onchange = function() {
|
||||
editor.getDocument().setMode(getMode());
|
||||
editor.getDocument().setTheme(modeEl.value);
|
||||
};
|
||||
|
||||
var modes = {
|
||||
|
|
@ -193,69 +199,74 @@ function getMode() {
|
|||
return modes[modeEl.value];
|
||||
}
|
||||
|
||||
var themeEl = document.getElementById("theme");
|
||||
themeEl.onchange = function() {
|
||||
editor.setTheme(themeEl.value);
|
||||
};
|
||||
|
||||
var selectEl = document.getElementById("select_style");
|
||||
selectEl.onchange = function() {
|
||||
if (selectEl.checked) {
|
||||
editor.setSelectionStyle("line");
|
||||
} else {
|
||||
editor.setSelectionStyle("text");
|
||||
}
|
||||
if (selectEl.checked) {
|
||||
editor.setSelectionStyle("line");
|
||||
} else {
|
||||
editor.setSelectionStyle("text");
|
||||
}
|
||||
};
|
||||
|
||||
var activeEl = document.getElementById("highlight_active");
|
||||
activeEl.onchange = function() {
|
||||
editor.setHighlightActiveLine(!!activeEl.checked);
|
||||
editor.setHighlightActiveLine(!!activeEl.checked);
|
||||
};
|
||||
|
||||
var container = document.getElementById("editor");
|
||||
var editor = new Editor(new Renderer(container));
|
||||
var editor = new Editor(new Renderer(container, theme));
|
||||
onDocChange();
|
||||
|
||||
function onResize() {
|
||||
container.style.width = (document.documentElement.clientWidth - 4) + "px";
|
||||
container.style.height = (document.documentElement.clientHeight - 55 - 4) + "px";
|
||||
editor.resize();
|
||||
editor.resize();
|
||||
};
|
||||
|
||||
window.onresize = onResize;
|
||||
onResize();
|
||||
|
||||
ace.addListener(container, "dragover", function(e) {
|
||||
return ace.preventDefault(e);
|
||||
return ace.preventDefault(e);
|
||||
});
|
||||
|
||||
ace.addListener(container, "drop", function(e) {
|
||||
try {
|
||||
var file = e.dataTransfer.files[0];
|
||||
} catch(e) {
|
||||
return ace.stopEvent();
|
||||
}
|
||||
|
||||
if (window.FileReader) {
|
||||
var reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
editor.getSelection().selectAll();
|
||||
|
||||
var mode = "text";
|
||||
if (/^.*\.js$/i.test(file.name)) {
|
||||
mode = "javascript";
|
||||
} else if (/^.*\.xml$/i.test(file.name)) {
|
||||
mode = "xml";
|
||||
} else if (/^.*\.html$/i.test(file.name)) {
|
||||
mode = "html";
|
||||
} else if (/^.*\.css$/i.test(file.name)) {
|
||||
mode = "css";
|
||||
}
|
||||
|
||||
editor.onTextInput(reader.result);
|
||||
|
||||
modeEl.value = mode;
|
||||
editor.getDocument().setMode(modes[mode]);
|
||||
try {
|
||||
var file = e.dataTransfer.files[0];
|
||||
} catch(e) {
|
||||
return ace.stopEvent();
|
||||
}
|
||||
reader.readAsText(file);
|
||||
}
|
||||
|
||||
return ace.preventDefault(e);
|
||||
|
||||
if (window.FileReader) {
|
||||
var reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
editor.getSelection().selectAll();
|
||||
|
||||
var mode = "text";
|
||||
if (/^.*\.js$/i.test(file.name)) {
|
||||
mode = "javascript";
|
||||
} else if (/^.*\.xml$/i.test(file.name)) {
|
||||
mode = "xml";
|
||||
} else if (/^.*\.html$/i.test(file.name)) {
|
||||
mode = "html";
|
||||
} else if (/^.*\.css$/i.test(file.name)) {
|
||||
mode = "css";
|
||||
}
|
||||
|
||||
editor.onTextInput(reader.result);
|
||||
|
||||
modeEl.value = mode;
|
||||
editor.getDocument().setMode(modes[mode]);
|
||||
}
|
||||
reader.readAsText(file);
|
||||
}
|
||||
|
||||
return ace.preventDefault(e);
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -142,6 +142,10 @@ var Editor = function(renderer, doc) {
|
|||
this.renderer.onResize();
|
||||
};
|
||||
|
||||
this.setTheme = function(theme) {
|
||||
this.renderer.setTheme(theme);
|
||||
};
|
||||
|
||||
this.$highlightBrackets = function() {
|
||||
if (this.$bracketHighlight) {
|
||||
this.renderer.removeMarker(this.$bracketHighlight);
|
||||
|
|
|
|||
|
|
@ -17,15 +17,21 @@ require.def("ace/VirtualRenderer",
|
|||
"ace/layer/Cursor",
|
||||
"ace/ScrollBar",
|
||||
"ace/RenderLoop",
|
||||
"ace/MEventEmitter"
|
||||
"ace/MEventEmitter",
|
||||
"text!ace/css/editor.css"
|
||||
], function(
|
||||
oop, lang, dom, event, GutterLayer, MarkerLayer, TextLayer,
|
||||
CursorLayer, ScrollBar, RenderLoop, MEventEmitter) {
|
||||
CursorLayer, ScrollBar, RenderLoop, MEventEmitter, editorCss) {
|
||||
|
||||
var VirtualRenderer = function(container) {
|
||||
// import CSS once
|
||||
dom.importCssString(editorCss);
|
||||
|
||||
var VirtualRenderer = function(container, theme) {
|
||||
this.container = container;
|
||||
dom.addCssClass(this.container, "ace_editor");
|
||||
|
||||
this.setTheme(theme);
|
||||
|
||||
this.scroller = document.createElement("div");
|
||||
this.scroller.className = "ace_scroller";
|
||||
this.container.appendChild(this.scroller);
|
||||
|
|
@ -505,6 +511,35 @@ var VirtualRenderer = function(container) {
|
|||
|
||||
this.hideComposition = function() {
|
||||
};
|
||||
|
||||
this.setTheme = function(theme) {
|
||||
var _self = this;
|
||||
if (!theme || typeof theme == "string") {
|
||||
theme = theme || "ace/theme/TextMate";
|
||||
require([theme], function(theme) {
|
||||
afterLoad(theme);
|
||||
})
|
||||
} else {
|
||||
afterLoad(theme);
|
||||
}
|
||||
|
||||
var _self = this;
|
||||
function afterLoad(theme) {
|
||||
if (_self.$theme)
|
||||
dom.removeCssClass(_self.container, _self.$theme)
|
||||
|
||||
_self.$theme = theme ? theme.cssClass : null;
|
||||
|
||||
if (_self.$theme)
|
||||
dom.addCssClass(_self.container, _self.$theme)
|
||||
|
||||
// force remeasure of the gutter width
|
||||
if (_self.$size) {
|
||||
_self.$size.width = 0;
|
||||
_self.onResize();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}).call(VirtualRenderer.prototype);
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ var Text = function(parentEl) {
|
|||
parentEl.appendChild(this.element);
|
||||
|
||||
this.$characterSize = this.$measureSizes();
|
||||
//this.$pollSizeChanges();
|
||||
this.$pollSizeChanges();
|
||||
};
|
||||
|
||||
(function() {
|
||||
|
|
|
|||
|
|
@ -44,6 +44,20 @@ require.def("ace/lib/dom", ["ace/lib/lang"], function(lang) {
|
|||
el.className = classes.join(" ");
|
||||
};
|
||||
|
||||
dom.importCssString = function(cssText, doc){
|
||||
doc = doc || document;
|
||||
|
||||
if (doc.createStyleSheet) {
|
||||
var sheet = doc.createStyleSheet();
|
||||
sheet.cssText = cssText;
|
||||
}
|
||||
else {
|
||||
var style = doc.createElement("style");
|
||||
style.appendChild(doc.createTextNode(cssText));
|
||||
doc.getElementsByTagName("head")[0].appendChild(style);
|
||||
}
|
||||
};
|
||||
|
||||
dom.getInnerWidth = function(element) {
|
||||
return (parseInt(dom.computedStyle(element, "paddingLeft"))
|
||||
+ parseInt(dom.computedStyle(element, "paddingRight")) + element.clientWidth);
|
||||
|
|
|
|||
10
src/ace/theme/Eclipse.js
Normal file
10
src/ace/theme/Eclipse.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
require.def("ace/theme/Eclipse",
|
||||
["ace/lib/dom", "text!ace/theme/eclipse.css"], function(dom, cssText) {
|
||||
|
||||
// import CSS once
|
||||
dom.importCssString(cssText);
|
||||
|
||||
return {
|
||||
cssClass: "ace-eclipse"
|
||||
};
|
||||
})
|
||||
10
src/ace/theme/TextMate.js
Normal file
10
src/ace/theme/TextMate.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
require.def("ace/theme/TextMate",
|
||||
["ace/lib/dom", "text!ace/theme/tm.css"], function(dom, cssText) {
|
||||
|
||||
// import CSS once
|
||||
dom.importCssString(cssText);
|
||||
|
||||
return {
|
||||
cssClass: "ace-tm"
|
||||
};
|
||||
})
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
.editor {
|
||||
.ace-eclipse .ace_editor {
|
||||
border: 2px solid rgb(159, 159, 159);
|
||||
}
|
||||
|
||||
.editor.focus {
|
||||
.ace-eclipse .ace_editor.ace_focus {
|
||||
border: 2px solid #327fbd;;
|
||||
}
|
||||
|
||||
.gutter {
|
||||
.ace-eclipse .ace_gutter {
|
||||
width: 40px;
|
||||
background: rgb(227, 227, 227);
|
||||
border-right: 1px solid rgb(159, 159, 159);
|
||||
|
|
@ -15,83 +15,82 @@
|
|||
font-size: 11px;
|
||||
}
|
||||
|
||||
.gutter-layer {
|
||||
.ace-eclipse .ace_gutter-layer {
|
||||
right: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.text-layer {
|
||||
.ace-eclipse .ace_text-layer {
|
||||
font-family: Monaco, "Courier New", monospace;
|
||||
font-size: 11px;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.cursor {
|
||||
width: 1px;
|
||||
background: black;
|
||||
.ace-eclipse .ace_cursor {
|
||||
border-left: 1px solid black;
|
||||
}
|
||||
|
||||
.line .keyword {
|
||||
.ace-eclipse .ace_line .ace_keyword {
|
||||
color: rgb(127, 0, 85);
|
||||
}
|
||||
|
||||
.line .buildin-constant {
|
||||
.ace-eclipse .ace_line .ace_buildin-constant {
|
||||
color: rgb(88, 72, 246);
|
||||
}
|
||||
|
||||
.line .library-constant {
|
||||
.ace-eclipse .ace_line .ace_library-constant {
|
||||
color: rgb(6, 150, 14);
|
||||
}
|
||||
|
||||
.line .buildin-function {
|
||||
.ace-eclipse .ace_line .ace_buildin-function {
|
||||
color: rgb(60, 76, 114);
|
||||
}
|
||||
|
||||
.line .string {
|
||||
.ace-eclipse .ace_line .ace_string {
|
||||
color: rgb(42, 0, 255);
|
||||
}
|
||||
|
||||
.line .comment {
|
||||
.ace-eclipse .ace_line .ace_comment {
|
||||
color: rgb(63, 127, 95);
|
||||
}
|
||||
|
||||
.line .doc-comment {
|
||||
.ace-eclipse .ace_line .ace_doc-comment {
|
||||
color: rgb(63, 95, 191);
|
||||
}
|
||||
|
||||
.line .doc-comment-tag {
|
||||
.ace-eclipse .ace_line .ace_doc-comment-tag {
|
||||
color: rgb(127, 159, 191);
|
||||
}
|
||||
|
||||
.line .number {
|
||||
.ace-eclipse .ace_line .ace_number {
|
||||
}
|
||||
|
||||
.line .tag {
|
||||
.ace-eclipse .ace_line .ace_tag {
|
||||
color: rgb(63, 127, 127);
|
||||
}
|
||||
|
||||
.line .attribute {
|
||||
.ace-eclipse .ace_line .ace_attribute {
|
||||
color: rbg(127, 0, 127);
|
||||
}
|
||||
|
||||
.line .attribute-value {
|
||||
.ace-eclipse .ace_line .ace_attribute-value {
|
||||
font-style: italic;
|
||||
color: rbg(42, 0, 255);
|
||||
}
|
||||
|
||||
.line .xml_pe {
|
||||
.ace-eclipse .ace_line .ace_xml_pe {
|
||||
color: rgb(104, 104, 91);
|
||||
}
|
||||
|
||||
.marker-layer .selection {
|
||||
.ace-eclipse .ace_marker-layer .ace_selection {
|
||||
background: rgb(181, 213, 255);
|
||||
}
|
||||
|
||||
.marker-layer .bracket {
|
||||
.ace-eclipse .ace_marker-layer .ace_bracket {
|
||||
margin: -1px 0 0 -1px;
|
||||
border: 1px solid rgb(192, 192, 192);
|
||||
}
|
||||
|
||||
.marker-layer .active_line {
|
||||
.ace-eclipse .ace_marker-layer .ace_active_line {
|
||||
background: rgb(232, 242, 254);
|
||||
}
|
||||
|
|
@ -1,101 +1,101 @@
|
|||
.ace_editor {
|
||||
.ace-tm .ace_editor {
|
||||
border: 2px solid rgb(159, 159, 159);
|
||||
font-family: Monaco, "Courier New";
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.ace_editor.ace_focus {
|
||||
.ace-tm .ace_editor.ace_focus {
|
||||
border: 2px solid #327fbd;;
|
||||
}
|
||||
|
||||
.ace_gutter {
|
||||
.ace-tm .ace_gutter {
|
||||
width: 40px;
|
||||
background: rgb(227, 227, 227);
|
||||
border-right: 1px solid rgb(159, 159, 159);
|
||||
color: rgb(136, 136, 136);
|
||||
}
|
||||
|
||||
.ace_editor .ace_printMargin {
|
||||
.ace-tm .ace_editor .ace_printMargin {
|
||||
width: 1px;
|
||||
background: rgb(191, 191, 191);
|
||||
}
|
||||
|
||||
.ace_gutter-layer {
|
||||
.ace-tm .ace_gutter-layer {
|
||||
right: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.ace_text-layer {
|
||||
.ace-tm .ace_text-layer {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.ace_cursor {
|
||||
.ace-tm .ace_cursor {
|
||||
border-left: 2px solid black;
|
||||
}
|
||||
|
||||
.ace_cursor.ace_overwrite {
|
||||
.ace-tm .ace_cursor.ace_overwrite {
|
||||
border-left: 0px;
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
|
||||
.ace_line .ace_invisible {
|
||||
.ace-tm .ace_line .ace_invisible {
|
||||
color: rgb(191, 191, 191);
|
||||
}
|
||||
|
||||
.ace_line .ace_keyword {
|
||||
.ace-tm .ace_line .ace_keyword {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.ace_line .ace_buildin-constant {
|
||||
.ace-tm .ace_line .ace_buildin-constant {
|
||||
color: rgb(88, 72, 246);
|
||||
}
|
||||
|
||||
.ace_line .ace_library-constant {
|
||||
.ace-tm .ace_line .ace_library-constant {
|
||||
color: rgb(6, 150, 14);
|
||||
}
|
||||
|
||||
.ace_line .ace_buildin-function {
|
||||
.ace-tm .ace_line .ace_buildin-function {
|
||||
color: rgb(60, 76, 114);
|
||||
}
|
||||
|
||||
.ace_line .ace_string {
|
||||
.ace-tm .ace_line .ace_string {
|
||||
color: rgb(3, 106, 7);
|
||||
}
|
||||
|
||||
.ace_line .ace_comment {
|
||||
.ace-tm .ace_line .ace_comment {
|
||||
font-style: italic;
|
||||
color: rgb(76, 136, 107);
|
||||
}
|
||||
|
||||
.ace_line .ace_doc-comment {
|
||||
.ace-tm .ace_line .ace_doc-comment {
|
||||
color: rgb(0, 102, 255);
|
||||
}
|
||||
|
||||
.ace_line .ace_doc-comment-tag {
|
||||
.ace-tm .ace_line .ace_doc-comment-tag {
|
||||
color: rgb(128, 159, 191);
|
||||
}
|
||||
|
||||
.ace_line .ace_number {
|
||||
.ace-tm .ace_line .ace_number {
|
||||
color: rgb(0, 0, 205);
|
||||
}
|
||||
|
||||
.ace_line .ace_xml_pe {
|
||||
.ace-tm .ace_line .ace_xml_pe {
|
||||
color: rgb(104, 104, 91);
|
||||
}
|
||||
|
||||
.ace_marker-layer .ace_selection {
|
||||
.ace-tm .ace_marker-layer .ace_selection {
|
||||
background: rgb(181, 213, 255);
|
||||
}
|
||||
|
||||
.ace_marker-layer .ace_step {
|
||||
.ace-tm .ace_marker-layer .ace_step {
|
||||
background: rgb(198, 219, 174);
|
||||
}
|
||||
|
||||
.ace_marker-layer .ace_bracket {
|
||||
.ace-tm .ace_marker-layer .ace_bracket {
|
||||
margin: -1px 0 0 -1px;
|
||||
border: 1px solid rgb(192, 192, 192);
|
||||
}
|
||||
|
||||
.ace_marker-layer .ace_active_line {
|
||||
.ace-tm .ace_marker-layer .ace_active_line {
|
||||
background: rgb(232, 242, 254);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue