some improvements to syntax highlighter

demos/syntax/js/syntax.js

@@ -18,10 +18,14 @@ Ox.load('UI', {
         $options = Ox.Element()
             .append(
                 Ox.FormElementGroup({
-                    elements: ['showLineNumbers', 'showLinebreaks', 'showTabs', 'showWhitespace'].map(function(v, i) {
+                    elements: [
+                        'showLineNumbers', 'showLinebreaks', 'showTabs', 'showWhitespace', 'stripComments'
+                    ].map(function(v, i) {
                         return Ox.Checkbox({
                             overlap: 'right',
-                            title: Ox.toDashes(v).split('-').map(function(v) { return Ox.toTitleCase(v); }).join(' '),
+                            title: Ox.toDashes(v).split('-').map(function(v) {
+                                return Ox.toTitleCase(v);
+                            }).join(' '),
                             width: 160
                         }).bindEvent({
                             change: function(event) {

source/Ox.UI/css/Ox.UI.css

@@ -1455,23 +1455,24 @@ SyntaxHightlighter
 */
 
 .OxSyntaxHighlighter > div {
+    display: table-cell;
+    padding: 4px;
     font-family: Menlo, Monaco, DejaVu Sans Mono, Bitstream Vera Sans Mono, Consolas, Lucida Console;
     //line-height: 14px;
 }
 .OxSyntaxHighlighter > .OxLineNumbers {
-    padding: 4px;
     text-align: right;
     -moz-user-select: none;
     -webkit-user-select: none;
 }
 .OxSyntaxHighlighter > .OxSourceCode {
-    padding: 4px;
+    white-space: nowrap;
     -moz-user-select: text;
     -webkit-user-select: text;
 }
 .OxSyntaxHighlighter > .OxSourceCode .OxLinebreak {
-    -moz-user-select: none;
-    -webkit-user-select: none;
+    //-moz-user-select: none;
+    //-webkit-user-select: none;
 }
 
 /*

source/Ox.UI/js/Core/Ox.SyntaxHighlighter.js

@@ -1,7 +1,15 @@
 // 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) {
@@ -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,36 +65,44 @@ 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) {
+                    Ox.range(lines.length).map(function(line) {
                         return (line + self.options.offset);
                     }).join('<br/>')
                 )
@@ -106,10 +111,15 @@ Ox.SyntaxHighlighter = function(options, self) {
         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);
     }
 

source/Ox.UI/themes/classic/css/classic.css

@@ -421,6 +421,9 @@ SyntaxHighlighter
 .OxThemeClassic .OxSourceCode .OxTab {
     color: rgb(192, 192, 192);
 }
+.OxThemeClassic .OxSourceCode .OxWhitespace {
+    color: rgb(192, 192, 192);
+}
 .OxThemeClassic .OxSourceCode .OxWhitespace.OxLeading,
 .OxThemeClassic .OxSourceCode .OxWhitespace.OxTrailing {
     background: rgb(255, 128, 128);

source/Ox.js

@@ -3950,11 +3950,9 @@ Ox.repeat = function(val, num) {
     var ret;
     if (Ox.isArray(val)) {
         ret = [];
-        if (num >= 1) {
-            Ox.loop(num, function() {
+        num >= 1 && Ox.loop(num, function() {
             ret = Ox.merge(ret, val);
         });
-        }
     } else {
         ret = num >= 1 ? new Array(num + 1).join(val.toString()) : '';
     }
@@ -4463,10 +4461,6 @@ Ox.isRegExp <f> Tests if a value is a regular expression
 @*/
 
 Ox.isRegExp = function(val) {
-    /*
-    >>> Ox.isRegExp(/ /)
-    true
-    */
     return val instanceof RegExp;
 };