sanj/oxjs
1
0
Fork 0
forked from 0x2620/oxjs
Code Pull requests Activity

some improvements to syntax highlighter

Browse source
This commit is contained in:
rolux 2011-05-08 22:38:51 +02:00
commit 30ebbee085
5 changed files with 76 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

108
source/Ox.UI/js/Core/Ox.SyntaxHighlighter.js
View file

@ -1,12 +1,20 @@
// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.SyntaxHighlighter <function> Syntax Highlighter
(options[, self]) -> <o> Syntax Highlighter
options <o> Options
offset <n|1> First line number
showLineNumbers <b|false> If true, show line numbers
showLinebreaks <b|false> If true, show linebreaks
showWhitespace <b|false> If true, show whitespace
stripComments <b|false> If true, strip comments
self <o> Shared private
@*/
Ox.SyntaxHighlighter = function(options, self) {
self = self || {};
self = self || {};
var that = Ox.Element({}, self)
.defaults({
height: 40,
@ -28,35 +36,24 @@ Ox.SyntaxHighlighter = function(options, self) {
renderSource();
function encodeToken(source, token) {
var linebreak = '<br/>',
tab = Ox.repeat('&nbsp;', self.options.tabLength);
if (self.options.showLinebreaks) {
if (token.type == 'linebreak') {
linebreak = '\u21A9' + linebreak;
} else {
linebreak = '<span class="OxLinebreak">\u21A9</span>' + linebreak;
}
}
if (self.options.showTabs) {
tab = '<span class="OxTab">\u2192' + tab.substr(6) + '</span>';
}
return Ox.encodeHTML(source)
.replace(/ /g, '&nbsp;')
.replace(/\t/g, tab)
.replace(/\n/g, linebreak);
}
function renderSource() {
var lines, source = '', tokens,
linebreak = (
self.options.showLinebreaks ?
'<span class="OxLinebreak">\u21A9</span>' : ''
) + '<br/>',
tab = (
self.options.showTabs ?
'<span class="OxTab">\u2192</span>' : ''
) + Ox.repeat('&nbsp;', self.options.tabLength - self.options.showTabs),
whitespace = self.options.showWhitespace ? '\u00B7' : '&nbsp;';
self.options.source = self.options.source
.replace(/\r\n/g, '\n')
.replace(/\r/g, '\n');
self.cursor = 0;
self.source = '';
self.tokens = Ox.tokenize(self.options.source);
self.tokens.forEach(function(token, i) {
tokens = Ox.tokenize(self.options.source);
tokens.forEach(function(token, i) {
var classNames,
source = self.options.source.substr(token.offset, token.length);
substr = self.options.source.substr(token.offset, token.length);
if (
!(self.options.stripComments && token.type == 'comment')
) {
@ -68,48 +65,61 @@ Ox.SyntaxHighlighter = function(options, self) {
classNames += ' OxTrailing'
}
}
self.source += '<span class="' + classNames + '">' +
encodeToken(source, token.type) + '</span>';
source += '<span class="' + classNames + '">' +
Ox.encodeHTML(substr)
.replace(/ /g, whitespace)
.replace(/\t/g, tab)
.replace(/\n/g, linebreak) + '</span>';
}
self.cursor += token.length;
function isAfterLinebreak() {
return i == 0 ||
self.tokens[i - 1].type == 'linebreak';
tokens[i - 1].type == 'linebreak';
}
function isBeforeLinebreak() {
return i == self.tokens.length - 1 ||
self.tokens[i + 1].type == 'linebreak';
return i == tokens.length - 1 ||
tokens[i + 1].type == 'linebreak';
}
function hasIrregularSpaces() {
return source.split('').reduce(function(prev, curr) {
return substr.split('').reduce(function(prev, curr) {
return prev + (curr == ' ' ? 1 : 0);
}, 0) % self.options.tabLength;
}
});
self.lines = self.source.split('<br/>');
lines = source.split('<br/>');
that.empty();
///*
var $test = new Ox.Element()
.css({
position: 'absolute',
top: '-1000px'
})
.html(Ox.repeat('&nbsp;', self.options.lineLength))
.appendTo(that);
var width = $test.width() + 4; // add padding
$test.removeElement();
//*/
if (self.options.showLineNumbers) {
self.$lineNumbers = new Ox.Element()
.addClass('OxLineNumbers')
.css({
display: 'table-cell',
padding: '4px',
})
.html(
Ox.range(self.lines.length).map(function(line) {
return (line + self.options.offset);
}).join('<br/>')
)
.appendTo(that);
.addClass('OxLineNumbers')
.html(
Ox.range(lines.length).map(function(line) {
return (line + self.options.offset);
}).join('<br/>')
)
.appendTo(that);
}
self.$source = new Ox.Element()
.addClass('OxSourceCode')
.css({
display: 'table-cell',
padding: '4px'
background: '-moz-linear-gradient(left, rgb(255, 255, 255), rgb(255, 255, 255) ' +
width + 'px, rgb(248, 248, 248) ' + width + 'px, rgb(248, 248, 248))'
})
.html(self.source)
.css({
background: '-webkit-linear-gradient(left, rgb(255, 255, 255) ' +
width + 'px, rgb(192, 192, 192) ' + width + 'px, rgb(255, 255, 255) ' +
(width + 1) + 'px)'
})
.html(source)
.appendTo(that);
}