1
0
Fork 0
forked from 0x2620/oxjs

better layout for documentation pages, use syntax highlighter

This commit is contained in:
rolux 2011-05-07 23:07:53 +02:00
commit a1ed6a44c5
7 changed files with 121 additions and 115 deletions

View file

@ -11,6 +11,7 @@ Ox.SyntaxHighlighter = function(options, self) {
.defaults({
height: 40,
lineLength: 80, //@ number of characters per line
offset: 1, //@ first line number
showLinebreaks: false, //@ show linebreak symbols
showTabs: false, //@ show tab symbols
showWhitespace: false, //@ show irregular leading or trailing whitespace
@ -24,19 +25,10 @@ Ox.SyntaxHighlighter = function(options, self) {
.options(options || {})
.addClass('OxSyntaxHighlighter');
var foo = $('<div>')
//.css({marginTop: '-1000px'})
.html(Ox.repeat('_', 80))
.appendTo(that.$element);
//alert(foo.width());
foo.remove();
self.options.source = self.options.source
.replace(/\r\n/g, '\n')
.replace(/\r/g, '\n');
//self.options.source = Ox.minify(self.options.source);
self.cursor = 0;
self.source = '';
self.tokens = Ox.tokenize(self.options.source);
@ -73,7 +65,7 @@ Ox.SyntaxHighlighter = function(options, self) {
}
});
self.lines = self.source.split('<br/>');
self.lineNumbersWidth = self.lines.length.toString().length * 7 + 7;
self.lineNumbersWidth = (self.lines.length + self.options.offset - 1).toString().length * 7;
self.sourceCodeWidth = 80 * 7 + (
self.lines.length > 40 ? Ox.UI.SCROLLBAR_SIZE : 0
);
@ -84,28 +76,31 @@ Ox.SyntaxHighlighter = function(options, self) {
);
that.css({
width: self.lineNumbersWidth + self.sourceCodeWidth,
height: self.height
//width: self.lineNumbersWidth + self.sourceCodeWidth,
//height: self.height
});
self.$lineNumbers = new Ox.Element()
.addClass('OxLineNumbers')
.css({
display: 'table-cell',
width: self.lineNumbersWidth + 'px',
height: (self.lines.length * 14) + 'px'
//height: (self.lines.length * 14) + 8 + 'px',
padding: '4px',
})
.html(
Ox.range(self.lines.length).map(function(line) {
return (line + 1) + '&nbsp;';
return (line + self.options.offset);
}).join('<br/>')
)
.appendTo(that);
self.$source = new Ox.Element()
.addClass('OxSourceCode')
.css({
left: self.lineNumbersWidth + 'px',
width: self.sourceCodeWidth + 'px',
height: (self.lines.length * 14) + 'px'
display: 'table-cell',
//width: self.sourceCodeWidth + 'px',
//height: (self.lines.length * 14) + 'px',
padding: '4px'
})
.html(self.source)
.appendTo(that);