Merge pull request #1701 from ajaxorg/static_highlighter
use css counter for line number in static_highlighter
This commit is contained in:
commit
f5334ceaa2
4 changed files with 29 additions and 31 deletions
|
|
@ -21,3 +21,12 @@
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.ace_static_highlight .ace_gutter-cell:before {
|
||||||
|
content: counter(ace_line, decimal);
|
||||||
|
counter-increment: ace_line;
|
||||||
|
}
|
||||||
|
.ace_static_highlight {
|
||||||
|
counter-reset: ace_line;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -160,14 +160,14 @@ highlight.renderSync = function(input, mode, theme, lineStart, disableGutter) {
|
||||||
for(var ix = 0; ix < length; ix++) {
|
for(var ix = 0; ix < length; ix++) {
|
||||||
stringBuilder.push("<div class='ace_line'>");
|
stringBuilder.push("<div class='ace_line'>");
|
||||||
if (!disableGutter)
|
if (!disableGutter)
|
||||||
stringBuilder.push("<span class='ace_gutter ace_gutter-cell' unselectable='on'>" + (ix + lineStart) + "</span>");
|
stringBuilder.push("<span class='ace_gutter ace_gutter-cell' unselectable='on'>" + /*(ix + lineStart) + */ "</span>");
|
||||||
textLayer.$renderLine(stringBuilder, ix, true, false);
|
textLayer.$renderLine(stringBuilder, ix, true, false);
|
||||||
stringBuilder.push("\n</div>");
|
stringBuilder.push("\n</div>");
|
||||||
}
|
}
|
||||||
|
|
||||||
// let's prepare the whole html
|
// let's prepare the whole html
|
||||||
var html = "<div class='" + theme.cssClass + "'>" +
|
var html = "<div class='" + theme.cssClass + "'>" +
|
||||||
"<div class='ace_static_highlight'>" +
|
"<div class='ace_static_highlight' style='counter-reset:ace_line " + (lineStart - 1) + "'>" +
|
||||||
stringBuilder.join("") +
|
stringBuilder.join("") +
|
||||||
"</div>" +
|
"</div>" +
|
||||||
"</div>";
|
"</div>";
|
||||||
|
|
|
||||||
|
|
@ -28,13 +28,13 @@ module.exports = {
|
||||||
var mode = new JavaScriptMode();
|
var mode = new JavaScriptMode();
|
||||||
|
|
||||||
var result = highlighter.render(snippet, mode, theme);
|
var result = highlighter.render(snippet, mode, theme);
|
||||||
assert.equal(result.html, "<div class='ace-tomorrow'><div class='ace_static_highlight'>"
|
assert.equal(result.html, "<div class='ace-tomorrow'><div class='ace_static_highlight' style='counter-reset:ace_line 0'>"
|
||||||
+ "<div class='ace_line'><span class='ace_gutter ace_gutter-cell' unselectable='on'>1</span><span class='ace_comment ace_doc'>/**\xa0this\xa0is\xa0a\xa0function</span>\n</div>"
|
+ "<div class='ace_line'><span class='ace_gutter ace_gutter-cell' unselectable='on'></span><span class='ace_comment ace_doc'>/**\xa0this\xa0is\xa0a\xa0function</span>\n</div>"
|
||||||
+ "<div class='ace_line'><span class='ace_gutter ace_gutter-cell' unselectable='on'>2</span><span class='ace_comment ace_doc'>*</span>\n</div>"
|
+ "<div class='ace_line'><span class='ace_gutter ace_gutter-cell' unselectable='on'></span><span class='ace_comment ace_doc'>*</span>\n</div>"
|
||||||
+ "<div class='ace_line'><span class='ace_gutter ace_gutter-cell' unselectable='on'>3</span><span class='ace_comment ace_doc'>*/</span>\n</div>"
|
+ "<div class='ace_line'><span class='ace_gutter ace_gutter-cell' unselectable='on'></span><span class='ace_comment ace_doc'>*/</span>\n</div>"
|
||||||
+ "<div class='ace_line'><span class='ace_gutter ace_gutter-cell' unselectable='on'>4</span><span class='ace_storage ace_type'>function</span>\xa0<span class='ace_entity ace_name ace_function'>hello</span>\xa0<span class='ace_paren ace_lparen'>(</span><span class='ace_variable ace_parameter'>a</span><span class='ace_punctuation ace_operator'>,\xa0</span><span class='ace_variable ace_parameter'>b</span><span class='ace_punctuation ace_operator'>,\xa0</span><span class='ace_variable ace_parameter'>c</span><span class='ace_paren ace_rparen'>)</span>\xa0<span class='ace_paren ace_lparen'>{</span>\n</div>"
|
+ "<div class='ace_line'><span class='ace_gutter ace_gutter-cell' unselectable='on'></span><span class='ace_storage ace_type'>function</span>\xa0<span class='ace_entity ace_name ace_function'>hello</span>\xa0<span class='ace_paren ace_lparen'>(</span><span class='ace_variable ace_parameter'>a</span><span class='ace_punctuation ace_operator'>,\xa0</span><span class='ace_variable ace_parameter'>b</span><span class='ace_punctuation ace_operator'>,\xa0</span><span class='ace_variable ace_parameter'>c</span><span class='ace_paren ace_rparen'>)</span>\xa0<span class='ace_paren ace_lparen'>{</span>\n</div>"
|
||||||
+ "<div class='ace_line'><span class='ace_gutter ace_gutter-cell' unselectable='on'>5</span>\xa0\xa0\xa0\xa0<span class='ace_storage ace_type'>console</span><span class='ace_punctuation ace_operator'>.</span><span class='ace_support ace_function ace_firebug'>log</span><span class='ace_paren ace_lparen'>(</span><span class='ace_identifier'>a</span>\xa0<span class='ace_keyword ace_operator'>*</span>\xa0<span class='ace_identifier'>b</span>\xa0<span class='ace_keyword ace_operator'>+</span>\xa0<span class='ace_identifier'>c</span>\xa0<span class='ace_keyword ace_operator'>+</span>\xa0<span class='ace_string'>'sup$'</span><span class='ace_paren ace_rparen'>)</span><span class='ace_punctuation ace_operator'>;</span>\n</div>"
|
+ "<div class='ace_line'><span class='ace_gutter ace_gutter-cell' unselectable='on'></span>\xa0\xa0\xa0\xa0<span class='ace_storage ace_type'>console</span><span class='ace_punctuation ace_operator'>.</span><span class='ace_support ace_function ace_firebug'>log</span><span class='ace_paren ace_lparen'>(</span><span class='ace_identifier'>a</span>\xa0<span class='ace_keyword ace_operator'>*</span>\xa0<span class='ace_identifier'>b</span>\xa0<span class='ace_keyword ace_operator'>+</span>\xa0<span class='ace_identifier'>c</span>\xa0<span class='ace_keyword ace_operator'>+</span>\xa0<span class='ace_string'>'sup$'</span><span class='ace_paren ace_rparen'>)</span><span class='ace_punctuation ace_operator'>;</span>\n</div>"
|
||||||
+ "<div class='ace_line'><span class='ace_gutter ace_gutter-cell' unselectable='on'>6</span><span class='ace_paren ace_rparen'>}</span>\n</div>"
|
+ "<div class='ace_line'><span class='ace_gutter ace_gutter-cell' unselectable='on'></span><span class='ace_paren ace_rparen'>}</span>\n</div>"
|
||||||
+ "</div></div>");
|
+ "</div></div>");
|
||||||
assert.ok(!!result.css);
|
assert.ok(!!result.css);
|
||||||
next();
|
next();
|
||||||
|
|
|
||||||
|
|
@ -31,19 +31,9 @@
|
||||||
define(function(require, exports, module) {
|
define(function(require, exports, module) {
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
exports.inherits = (function() {
|
exports.inherits = function(ctor, superCtor) {
|
||||||
var createObject = Object.create || function(prototype, properties) {
|
|
||||||
var Type = function () {};
|
|
||||||
Type.prototype = prototype;
|
|
||||||
object = new Type();
|
|
||||||
object.__proto__ = prototype;
|
|
||||||
if (typeof properties !== 'undefined' && Object.defineProperties) {
|
|
||||||
Object.defineProperties(object, properties);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
return function(ctor, superCtor) {
|
|
||||||
ctor.super_ = superCtor;
|
ctor.super_ = superCtor;
|
||||||
ctor.prototype = createObject(superCtor.prototype, {
|
ctor.prototype = Object.create(superCtor.prototype, {
|
||||||
constructor: {
|
constructor: {
|
||||||
value: ctor,
|
value: ctor,
|
||||||
enumerable: false,
|
enumerable: false,
|
||||||
|
|
@ -51,8 +41,7 @@ exports.inherits = (function() {
|
||||||
configurable: true
|
configurable: true
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
}());
|
|
||||||
|
|
||||||
exports.mixin = function(obj, mixin) {
|
exports.mixin = function(obj, mixin) {
|
||||||
for (var key in mixin) {
|
for (var key in mixin) {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue