fix gutter in static highlight when wrapping is enabled
This commit is contained in:
nightwing
parent
5ce334e930
commit
9905267e4d
6 changed files with 43 additions and 20 deletions
|
|
@ -2,13 +2,13 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Static Code highlighter using Ace</title>
|
||||
<meta name="author" content="Matthew Kastor">
|
||||
<title>Static Code highlighter using Ace</title>
|
||||
<meta name="author" content="Matthew Kastor">
|
||||
<style type="text/css">
|
||||
.code {
|
||||
width: 50%;
|
||||
position: relative;
|
||||
white-space: pre-wrap;
|
||||
border: solid lightgrey 1px
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -35,6 +35,26 @@ function wobble (flam) {
|
|||
|
||||
</pre>
|
||||
|
||||
|
||||
<div class="code" ace-mode="ace/mode/lua" ace-theme="ace/theme/chrome" ace-gutter="true" style="width: 30em;">
|
||||
--[[--
|
||||
num_args takes in 5.1 byte code and extracts the number of arguments from its function header.
|
||||
--]]--
|
||||
|
||||
function int(t)
|
||||
return t:byte(1) + t:byte(2) * 0x100 + t:byte(3) * 0x10000 + t:byte(4) * 0x1000000
|
||||
end
|
||||
|
||||
function num_args(func)
|
||||
local dump = string.dump(func)
|
||||
local offset, cursor = int(dump:sub(13)), offset + 26
|
||||
--Get the params and var flag (whether there's a ... in the param)
|
||||
return dump:sub(cursor):byte(), dump:sub(cursor+1):byte()
|
||||
end
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script src="kitchen-sink/require.js"></script>
|
||||
<script>
|
||||
require.config({paths: { "ace" : "../lib/ace"}});
|
||||
|
|
|
|||
|
|
@ -4,15 +4,17 @@
|
|||
}
|
||||
|
||||
.ace_static_highlight .ace_gutter {
|
||||
width: 25px !important;
|
||||
float: left;
|
||||
width: 2em;
|
||||
text-align: right;
|
||||
padding: 0 3px 0 0;
|
||||
margin-right: 3px;
|
||||
position: static !important;
|
||||
}
|
||||
|
||||
.ace_static_highlight .ace_line { clear: both; }
|
||||
.ace_static_highlight.ace_show_gutter .ace_line {
|
||||
padding-left: 2.6em;
|
||||
}
|
||||
|
||||
.ace_static_highlight .ace_line { position: relative; }
|
||||
|
||||
.ace_static_highlight .ace_gutter-cell {
|
||||
-moz-user-select: -moz-none;
|
||||
|
|
|
|||
|
|
@ -171,7 +171,8 @@ highlight.renderSync = function(input, mode, theme, lineStart, disableGutter) {
|
|||
|
||||
// let's prepare the whole html
|
||||
var html = "<div class='" + theme.cssClass + "'>" +
|
||||
"<div class='ace_static_highlight' style='counter-reset:ace_line " + (lineStart - 1) + "'>" +
|
||||
"<div class='ace_static_highlight" + (disableGutter ? "" : " ace_show_gutter") +
|
||||
"' style='counter-reset:ace_line " + (lineStart - 1) + "'>" +
|
||||
stringBuilder.join("") +
|
||||
"</div>" +
|
||||
"</div>";
|
||||
|
|
|
|||
|
|
@ -28,12 +28,12 @@ module.exports = {
|
|||
var mode = new JavaScriptMode();
|
||||
|
||||
var result = highlighter.render(snippet, mode, theme);
|
||||
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'></span><span class='ace_comment ace_doc'>/**\xa0this\xa0is\xa0a\xa0function</span>\n</div>"
|
||||
assert.equal(result.html, "<div class='ace-tomorrow'><div class='ace_static_highlight ace_show_gutter' style='counter-reset:ace_line 0'>"
|
||||
+ "<div class='ace_line'><span class='ace_gutter ace_gutter-cell' unselectable='on'></span><span class='ace_comment ace_doc'>/** this is a function</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'></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_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>\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><span class='ace_storage ace_type'>function</span> <span class='ace_entity ace_name ace_function'>hello</span> <span class='ace_paren ace_lparen'>(</span><span class='ace_variable ace_parameter'>a</span><span class='ace_punctuation ace_operator'>, </span><span class='ace_variable ace_parameter'>b</span><span class='ace_punctuation ace_operator'>, </span><span class='ace_variable ace_parameter'>c</span><span class='ace_paren ace_rparen'>)</span> <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'>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> <span class='ace_keyword ace_operator'>*</span> <span class='ace_identifier'>b</span> <span class='ace_keyword ace_operator'>+</span> <span class='ace_identifier'>c</span> <span class='ace_keyword ace_operator'>+</span> <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><span class='ace_paren ace_rparen'>}</span>\n</div>"
|
||||
+ "</div></div>");
|
||||
assert.ok(!!result.css);
|
||||
|
|
|
|||
|
|
@ -129,10 +129,10 @@ var Text = function(parentEl) {
|
|||
if (this.showInvisibles) {
|
||||
tabStr.push("<span class='ace_invisible ace_invisible_tab'>"
|
||||
+ this.TAB_CHAR
|
||||
+ lang.stringRepeat("\xa0", i - 1)
|
||||
+ lang.stringRepeat(" ", i - 1)
|
||||
+ "</span>");
|
||||
} else {
|
||||
tabStr.push(lang.stringRepeat("\xa0", i));
|
||||
tabStr.push(lang.stringRepeat(" ", i));
|
||||
}
|
||||
}
|
||||
if (this.displayIndentGuides) {
|
||||
|
|
@ -145,9 +145,9 @@ var Text = function(parentEl) {
|
|||
spaceClass = " ace_invisible_space";
|
||||
tabClass = " ace_invisible_tab";
|
||||
var spaceContent = lang.stringRepeat(this.SPACE_CHAR, this.tabSize);
|
||||
var tabContent = this.TAB_CHAR + lang.stringRepeat("\xa0", this.tabSize - 1);
|
||||
var tabContent = this.TAB_CHAR + lang.stringRepeat(" ", this.tabSize - 1);
|
||||
} else{
|
||||
var spaceContent = lang.stringRepeat("\xa0", this.tabSize);
|
||||
var spaceContent = lang.stringRepeat(" ", this.tabSize);
|
||||
var tabContent = spaceContent;
|
||||
}
|
||||
|
||||
|
|
@ -325,9 +325,9 @@ var Text = function(parentEl) {
|
|||
var replaceReg = /\t|&|<|( +)|([\x00-\x1f\x80-\xa0\xad\u1680\u180E\u2000-\u200f\u2028\u2029\u202F\u205F\u3000\uFEFF])|[\u1100-\u115F\u11A3-\u11A7\u11FA-\u11FF\u2329-\u232A\u2E80-\u2E99\u2E9B-\u2EF3\u2F00-\u2FD5\u2FF0-\u2FFB\u3000-\u303E\u3041-\u3096\u3099-\u30FF\u3105-\u312D\u3131-\u318E\u3190-\u31BA\u31C0-\u31E3\u31F0-\u321E\u3220-\u3247\u3250-\u32FE\u3300-\u4DBF\u4E00-\uA48C\uA490-\uA4C6\uA960-\uA97C\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFAFF\uFE10-\uFE19\uFE30-\uFE52\uFE54-\uFE66\uFE68-\uFE6B\uFF01-\uFF60\uFFE0-\uFFE6]/g;
|
||||
var replaceFunc = function(c, a, b, tabIdx, idx4) {
|
||||
if (a) {
|
||||
return self.showInvisibles ?
|
||||
"<span class='ace_invisible ace_invisible_space'>" + lang.stringRepeat(self.SPACE_CHAR, c.length) + "</span>" :
|
||||
lang.stringRepeat("\xa0", c.length);
|
||||
return self.showInvisibles
|
||||
? "<span class='ace_invisible ace_invisible_space'>" + lang.stringRepeat(self.SPACE_CHAR, c.length) + "</span>"
|
||||
: c;
|
||||
} else if (c == "&") {
|
||||
return "&";
|
||||
} else if (c == "<") {
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ module.exports = {
|
|||
"test rendering of indent guides" : function() {
|
||||
var textLayer = this.textLayer
|
||||
var EOL = "<span class='ace_invisible ace_invisible_eol'>" + textLayer.EOL_CHAR + "</span>";
|
||||
var SPACE = function(i) {return Array(i+1).join("\xa0")}
|
||||
var SPACE = function(i) {return Array(i+1).join(" ")}
|
||||
var DOT = function(i) {return Array(i+1).join(textLayer.SPACE_CHAR)}
|
||||
var TAB = function(i) {return textLayer.TAB_CHAR + SPACE(i-1)}
|
||||
function testRender(results) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue