forked from 0x2620/oxjs
better layout for documentation pages, use syntax highlighter
This commit is contained in:
parent
f5f19c1c11
commit
a1ed6a44c5
7 changed files with 121 additions and 115 deletions
|
|
@ -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) + ' ';
|
||||
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);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue