oxjs/source/Ox.UI/js/Code/SyntaxHighlighter.js

139 lines
5.1 KiB
JavaScript
Raw Normal View History

2011-11-05 16:46:53 +00:00
'use strict';
/*@
2012-05-31 10:32:54 +00:00
Ox.SyntaxHighlighter <f> Syntax Highlighter
([options[, self]]) -> <o:Ox.Element> Syntax Highlighter
options <o> Options
lineLength <n|0> If larger than zero, show edge of page
offset <n|1> First line number
replace <[[]]|[]> Array of replacements
Each array element is an array of two arguments to be passed to the
replace function, like [str, str], [regexp, str] or [regexp, fn]
showLinebreaks <b|false> If true, show linebreaks
showLineNumbers <b|false> If true, show line numbers
showWhitespace <b|false> If true, show whitespace
showTabs <b|false> If true, show tabs
source <s|[o]|''> JavaScript source, or array of tokens
stripComments <b|false> If true, strip comments
tabSize <n|4> Number of spaces per tab
self <o> Shared private variable
@*/
Ox.SyntaxHighlighter = function(options, self) {
2011-11-03 15:42:41 +00:00
self = self || {};
var that = Ox.Element({}, self)
.defaults({
lineLength: 0,
offset: 1,
replace: [],
showLinebreaks: false,
showLineNumbers: false,
showTabs: false,
showWhitespace: false,
source: '',
stripComments: false,
2012-05-26 15:48:19 +00:00
tabSize: 4
})
.options(options || {})
2012-05-28 16:21:00 +00:00
.update(renderSource)
.addClass('OxSyntaxHighlighter');
renderSource();
function renderSource() {
var $lineNumbers, $line, $source, width,
lines, source = '', tokens,
linebreak = (
2011-11-03 15:42:41 +00:00
self.options.showLinebreaks
? '<span class="OxLinebreak">\u21A9</span>' : ''
) + '<br/>',
tab = (
self.options.showTabs ?
'<span class="OxTab">\u2192</span>' : ''
) + Ox.repeat('&nbsp;', self.options.tabSize - self.options.showTabs),
whitespace = self.options.showWhitespace ? '\u00B7' : '&nbsp;';
tokens = Ox.isArray(self.options.source)
? self.options.source
: Ox.tokenize(self.options.source);
tokens.forEach(function(token, i) {
var classNames,
2012-05-26 10:55:54 +00:00
type = token.type == 'identifier'
? Ox.identify(token.value) : token.type;
if (
2012-05-26 10:55:54 +00:00
!(self.options.stripComments && type == 'comment')
) {
2012-05-26 10:55:54 +00:00
classNames = 'Ox' + Ox.toTitleCase(type);
if (self.options.showWhitespace && type == 'whitespace') {
if (isAfterLinebreak() && hasIrregularSpaces()) {
classNames += ' OxLeading';
} else if (isBeforeLinebreak()) {
classNames += ' OxTrailing';
}
}
source += '<span class="' + classNames + '">' +
Ox.encodeHTMLEntities(token.value)
.replace(/ /g, whitespace)
.replace(/\t/g, tab)
.replace(/\n/g, linebreak) + '</span>';
}
function isAfterLinebreak() {
return i == 0 ||
tokens[i - 1].type == 'linebreak';
}
function isBeforeLinebreak() {
return i == tokens.length - 1 ||
tokens[i + 1].type == 'linebreak';
}
function hasIrregularSpaces() {
2012-05-26 10:55:54 +00:00
return token.value.split('').reduce(function(prev, curr) {
return prev + (curr == ' ' ? 1 : 0);
}, 0) % self.options.tabSize;
}
});
lines = source.split('<br/>');
that.empty();
if (self.options.showLineNumbers) {
$lineNumbers = Ox.Element()
.addClass('OxLineNumbers')
.html(
Ox.range(lines.length).map(function(line) {
return (line + self.options.offset);
}).join('<br/>')
)
.appendTo(that);
}
self.options.replace.forEach(function(replace) {
source = source.replace(replace[0], replace[1])
});
$source = Ox.Element()
.addClass('OxSourceCode')
.html(source)
.appendTo(that);
if (self.options.lineLength) {
$line = Ox.Element()
.css({
position: 'absolute',
top: '-1000px'
})
.html(Ox.repeat('&nbsp;', self.options.lineLength))
.appendTo(that);
width = $line.width() + 4; // add padding
$line.remove();
['moz', 'webkit'].forEach(function(browser) {
$source.css({
background: '-' + browser +
'-linear-gradient(left, rgb(255, 255, 255) ' +
width + 'px, rgb(192, 192, 192) ' + width +
'px, rgb(255, 255, 255) ' + (width + 1) + 'px)'
});
});
}
}
return that;
};