allow for replacement function in DocPanel and DocPage

index.js

@@ -202,7 +202,8 @@ Ox.load(function() {
 
         re: {
 
-            code: new RegExp(
+            code: [
+                new RegExp(
                     '<span class="OxIdentifier">Ox</span>'
                     + '(<span class="OxOperator">\.</span>'
                     + '<span class="OxIdentifier">UI</span>)?'
@@ -210,14 +211,21 @@ Ox.load(function() {
                     + '<span class="OxIdentifier">([\\$\\w]+)<\/span>',
                     'g'
                 ),
-
-            comment: /\b(Ox\.\w+)\b/g
+                function (str) {
+                    return '<a href="#doc/' + Ox.stripTags(str)
+                        + '" class="doclink">' + str + '</a>';
+                }
+            ],
+            comment: [
+                /\b(Ox\.\w+)\b/g,
+                '<a href="#doc/$1" class="OxMonospace doclink">$1</a>'
+            ]
 
         },
 
         ui: {
 
-            documentation: function() {
+            doc: function() {
                 return Ox.DocPanel({
                     files: app.data.documentation,
                     getModule: function(item) {
@@ -228,7 +236,8 @@ Ox.load(function() {
                         var file = item.file.replace(/^dev\//, '');
                         return item.section || file.split('/')[2].split('.')[0];
                     },
-                    path: 'dev/'
+                    path: 'dev/',
+                    replace: [app.re.code],
                 });
             },
 
@@ -237,17 +246,8 @@ Ox.load(function() {
                         examples: app.data.examples,
                         keywords: /\b(Ox\.[\w]+)\b/g,
                         path: 'examples/',
-                        replaceCode: [[
-                            app.re.code,
-                            function (str) {
-                                return '<a href="#doc/' + Ox.stripTags(str)
-                                    + '" class="doclink">' + str + '</a>';
-                            }
-                        ]],
-                        replaceComment: [[
-                            app.re.comment,
-                            '<a href="#doc/$1" class="OxMonospace doclink">$1</a>'
-                        ]],
+                        replaceCode: [app.re.code],
+                        replaceComment: [app.re.comment],
                         selected: ''
                     })
                     .bindEvent({
@@ -323,14 +323,18 @@ Ox.load(function() {
             sections: function() {
                 var $element = (Ox.UI ? $ : Ox.$)('<div>').addClass('ui sections');
                 [
-                    'about', 'readme', 'examples', 'documentation',
-                    'downloads', 'development', 'contact'
+                    'about', 'readme', 'examples', 'doc',
+                    'downloads', 'dev', 'contact'
                 ].forEach(function(section, i) {
                     Ox.$('<span>')
                         .addClass('button' + (
                             app.user('section') == section ? ' selected' : ''
                         ))
-                        .html(Ox.toTitleCase(section))
+                        .html(Ox.toTitleCase(
+                            section == 'doc' ? 'documentation'
+                            : section == 'dev' ? 'development'
+                            : section
+                        ))
                         .bind({
                             click: function() {
                                 app.$ui.sections.children().removeClass('selected');

source/Ox.UI/js/Code/Ox.DocPage.js

@@ -6,6 +6,7 @@ Ox.DocPage <f> DocPage
     (options, self) -> <o> DocPage object
     options <o> Options object
         item <o> doc item
+        replace <[[]]|[]> See Ox.SyntaxHighlighter
     self    <o> Shared private variable
 @*/
 Ox.DocPage = function(options, self) {
@@ -13,7 +14,8 @@ Ox.DocPage = function(options, self) {
     self = self || {};
     var that = Ox.Element({}, self)
         .defaults({
-            item: {}
+            item: {},
+            replace: []
         })
         .options(options || {})
         .css({
@@ -182,6 +184,7 @@ Ox.DocPage = function(options, self) {
                         );
                         $elements.push(
                             Ox.SyntaxHighlighter({
+                                replace: self.options.replace,
                                 showLineNumbers: true,
                                 // fixme: silly
                                 source: item.source.map(function(token) {

source/Ox.UI/js/Code/Ox.DocPanel.js

@@ -11,6 +11,7 @@ Ox.DocPanel <f> Documentation Panel
             getModule <f> returns module for given item
             getSection <f> returns section for given item
             path <s|''> path prefix
+            replace <[[]]|[]> See Ox.SyntaxHighlighter
             resizable <b|true> is resizable
             resize <a|[128, 256, 384]> resize positions
             size <s|256> default size
@@ -34,6 +35,7 @@ Ox.DocPanel = function(options, self) {
                 return item.section;
             },
             path: '',
+            replace: [],
             resizable: true,
             resize: [128, 256, 384],
             size: 256
@@ -160,7 +162,8 @@ Ox.DocPanel = function(options, self) {
             selected = data.ids[0];
             if (selected[0] != '_') {
                 self.$page = Ox.DocPage({
-                    item: getItemByName(selected)
+                    item: getItemByName(selected),
+                    replace: self.options.replace
                 });
                 that.$element.replaceElement(1, self.$page);
                 that.triggerEvent('select', {