Sorry about the English, I don't know Russian at all:
I added some functionality to highlight.js to give it alternating rows and row numbers. In order to activate it, you can either:
add:
hljs.addAlternatingRows();
hljs.addLineNumbers();
to your document headers or:
class='startAt1 alternating-rows'
to the code tag (you can start at other numbers as well: startAt# is the syntax).
If you happen to have turned it on via javascript, you can turn it off by:
hljs.noAlternatingRows();
hljs.noLineNumbers();
in javascript or by adding:
class='no-linenumbers no-alternating-rows'
to the code tag.
Both features work independently of each other and the css classes will override the javascript settings. I tried adding reasonable styling to each of the css files as well and I added some tests as well as modifying the export.html file to support this. Also, it defaults to the current functionality.
=== modified file 'export.html'
--- export.html 2008-04-21 13:12:25 +0000
+++ export.html 2008-04-21 15:41:42 +0000
@@ -34,11 +34,19 @@
var t2 = document.getElementById("t2");
var selector = document.getElementById("langSelector");
var selectedLang = selector.options[selector.selectedIndex].value.toLowerCase();
- if(selectedLang) {
- viewDiv.innerHTML = '<pre><code class="'+selectedLang+'">'+t1.value.escape()+"</code></pre>";
- } else { // try auto
- viewDiv.innerHTML = '<pre><code>' + t1.value.escape() + "</code></pre>";
+ var linenumbers = document.getElementById("lineNumber");
+ var startAt = linenumbers.value;
+ if(startAt != '') startAt = 'startAt'+startAt;
+ var alternateRows = document.getElementById("alternateRows").checked;
+ var classinsert = '';
+ if(selectedLang || startAt != '' || alternateRows) {
+ classinsert = ' class="';
+ if(selectedLang) classinsert = classinsert+selectedLang+' ';
+ if(startAt != '') classinsert = classinsert+startAt+' ';
+ if(alternateRows) classinsert = classinsert+'alternating-rows';
+ classinsert = classinsert+'"';
}
+ viewDiv.innerHTML = '<pre><code'+classinsert+'>' + t1.value.escape() + "</code></pre>";
hljs.highlightBlock(viewDiv.firstChild.firstChild);
t2.value = viewDiv.innerHTML;
}
@@ -64,6 +72,8 @@
langSelectorHtml += '</select></label>';
document.write(langSelectorHtml);
</script>
+ <br/><label>Starting Line Number: <input id="lineNumber"></label>
+ <br/><label>Alternate Rows: <input type="checkbox" id="alternateRows"></label>
<table width="100%">
<tr>
<td><textarea rows="20" cols="50" id="t1"></textarea></td>
=== modified file 'highlight.js'
--- highlight.js 2008-04-21 13:12:25 +0000
+++ highlight.js 2008-04-21 15:41:42 +0000
@@ -300,11 +300,41 @@
}
}
}
+
+ function getStartingLineNumber(block) {
+ var classes = block.className.split(/\s+/);
+ for (var i = 0; i < classes.length; i++) {
+ if (classes == 'no-linenumbers') {
+ return -1;
+ }
+ if (classes.match("startAt") != null) {
+ //nearest I can tell there are some wierd things happenning with numbers; hence the "/ 1" part
+ return classes.match(/\d+/) / 1;
+ }
+ }
+ if(lineNumbers) return 1;
+ return -1;
+ }
+ function getAlternatingRowsOn(block) {
+ var classes = block.className.split(/\s+/);
+ for (var i = 0; i < classes.length; i++) {
+ if (classes == 'no-alternating-rows') {
+ return false;
+ }
+ if (classes == 'alternating-rows') {
+ return true;
+ }
+ }
+ return alternatingRows;
+ }
+
function highlightBlock(block) {
try {
var text = blockText(block);
var language = blockLanguage(block);
+ var startAt = getStartingLineNumber(block);
+ var alternatingRows = getAlternatingRowsOn(block);
} catch (e) {
if (e == 'No highlight')
return;
@@ -327,6 +357,9 @@
}
if (result) {
+ if(startAt != -1 || alternatingRows)
+ result = insertLines(result, startAt, alternatingRows);
+
var className = block.className;
if (!className.match(language)) {
className += ' ' + language;
@@ -339,6 +372,61 @@
}
}
+ function insertLines(highlightedText, startAt, alternatingRows) {
+ var counter = startAt + 1 - 1; //make sure it is a number; otherwise Math.log doesn't work right
+ var result = "";
+ //IE does wierd stuff when splitting blank lines, so insert a space
+ highlightedText = highlightedText.replace(/(\r\n|\r|\n)(\r\n|\r|\n)/g, "$1 $2");
+ var lines = highlightedText.split(/\r\n|\r|\n/);
+ var spaces = Math.ceil(Math.log(lines.length) / Math.log(10));
+ var newline = "";
+ var line;
+ var i;
+ var tokenArray = new Array();
+ if(spaces < 6)
+ spaces = 6;
+ for (line = 0; line < lines.length - 1; ++line) {
+ newline = "";
+ if(alternatingRows) {
+ newline = "<span class=\"";
+ if(line%2 == 0)
+ newline = newline + "row";
+ else
+ newline = newline + "alternaterow";
+ newline = newline + "\">";
+ }
+ if(startAt != -1) {
+ newline = newline + "<span class=\"rownumber\">";
+ for (i = 0; i < (spaces - (Math.ceil(Math.log(counter + 1) / Math.log(10)))); ++i)
+ newline = newline + " ";
+ newline = newline + counter + " </span>";
+ }
+ for(var restartTokenCt = 0; restartTokenCt < tokenArray.length; ++restartTokenCt) {
+ newline = newline + tokenArray[restartTokenCt];
+ }
+ var tokens = lines[line].match(/(<span class="\w+">)|(<\/span>)|(.*?)/g);
+ for (var tokenct = 0;tokenct<tokens.length;++tokenct) {
+ if (tokens[tokenct].match(/(<span class="\w+">)/)) {
+ tokenArray.push(tokens[tokenct]);
+ } else if (tokens[tokenct].match(/(<\/span>)/)) {
+ tokenArray.pop();
+ }
+ }
+ newline = newline + lines[line];
+ for(var restartTokenCt = 0; restartTokenCt < tokenArray.length; ++restartTokenCt) {
+ newline = newline + "</span>";
+ }
+
+ newline = newline + "\n";
+ if(alternatingRows) {
+ newline = newline + "</span>";
+ }
+ counter++;
+ result = result + newline;
+ }
+ return result;
+ }
+
function langRe(language, value, global) {
var mode = 'm' + (language.case_insensitive ? 'i' : '') + (global ? 'g' : '');
return new RegExp(value, mode);
@@ -445,6 +533,14 @@
this.initHighlightingOnLoad = initHighlightingOnLoad;
this.highlightBlock = highlightBlock;
+ var lineNumbers = false
+ this.noLineNumbers = function() { lineNumbers = false; }
+ this.addLineNumbers = function() { lineNumbers = true; }
+
+ var alternatingRows = false;
+ this.noAlternatingRows = function() { alternatingRows=false; }
+ this.addAlternatingRows = function() { alternatingRows=true; }
+
// Common regexps
this.IDENT_RE = '[a-zA-Z][a-zA-Z0-9_]*';
this.UNDERSCORE_IDENT_RE = '[a-zA-Z_][a-zA-Z0-9_]*';
=== modified file 'styles/ascetic.css'
--- styles/ascetic.css 2008-04-21 13:12:25 +0000
+++ styles/ascetic.css 2008-04-21 15:41:42 +0000
@@ -1,4 +1,4 @@
-?/*
+/*
Original style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
@@ -34,4 +34,16 @@
.winutils,
.flow {
font-weight: bold;
-}
\ No newline at end of file
+}
+
+.rownumber {
+ border-right: 2px solid #AAA;
+ margin-right: 4px;
+ background-color: #EEE;
+}
+
+.alternaterow {
+ width: 100%;
+ display: block;
+ background-color: #F9F9F9;
+}
=== modified file 'styles/dark.css'
--- styles/dark.css 2008-04-21 13:12:25 +0000
+++ styles/dark.css 2008-04-21 15:41:42 +0000
@@ -1,4 +1,4 @@
-?/*
+/*
Dark style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
@@ -90,4 +90,16 @@
.html .css,
.html .javascript {
opacity: 0.5;
-}
\ No newline at end of file
+}
+
+.rownumber {
+ border-right: 1px solid #888;
+ margin-right: 2px;
+ background-color: #484848;
+}
+
+.alternaterow {
+ width: 100%;
+ display: block;
+ background-color: #505050;
+}
=== modified file 'styles/default.css'
--- styles/default.css 2008-04-21 13:12:25 +0000
+++ styles/default.css 2008-04-21 15:41:42 +0000
@@ -1,4 +1,4 @@
-?/*
+/*
Original style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
@@ -93,3 +93,15 @@
.html .javascript {
opacity: 0.5;
}
+
+.rownumber {
+ border-right: 2px solid #666;
+ margin-right: 4px;
+ background-color: #EEE;
+}
+
+.alternaterow {
+ width: 100%;
+ display: block;
+ background-color: #F9F9F9;
+}
=== modified file 'styles/far.css'
--- styles/far.css 2008-04-21 13:12:25 +0000
+++ styles/far.css 2008-04-21 15:41:42 +0000
@@ -91,4 +91,17 @@
.flow {
color: #FFF;
font-weight: bold;
-}
\ No newline at end of file
+}
+
+.rownumber {
+ border-right: 2px solid #CCC;
+ margin-right: 4px;
+ color: #0F0;
+ font-weight: bold;
+}
+
+.alternaterow {
+ width: 100%;
+ display: block;
+ background-color: #007;
+}
=== modified file 'styles/idea.css'
--- styles/idea.css 2008-04-21 13:12:25 +0000
+++ styles/idea.css 2008-04-21 15:41:42 +0000
@@ -72,4 +72,17 @@
.diff .change {
background: #bccff9;
-}
\ No newline at end of file
+}
+
+.rownumber {
+ border-right: 2px solid #666;
+ margin-right: 4px;
+ background-color: #EEE;
+ font-weight: bold;
+}
+
+.alternaterow {
+ width: 100%;
+ display: block;
+ background-color: #F9F9F9;
+}
=== modified file 'styles/sunburst.css'
--- styles/sunburst.css 2008-04-21 13:12:25 +0000
+++ styles/sunburst.css 2008-04-21 15:41:42 +0000
@@ -105,4 +105,19 @@
.deletion {
background-color: #420E09;
color: #F8F8F8;
-}
\ No newline at end of file
+}
+
+.rownumber {
+ margin:0 4px;
+ color: #8996A8;
+ display:-moz-inline-stack; /* ff2 */
+ display: inline-block;
+ white-space: normal;
+ width: 60px;
+}
+
+.alternaterow {
+ width: 100%;
+ display: block;
+ background-color: #111;
+}
=== modified file 'styles/zenburn.css'
--- styles/zenburn.css 2008-04-21 13:12:25 +0000
+++ styles/zenburn.css 2008-04-21 15:41:42 +0000
@@ -105,3 +105,8 @@
opacity: 0.5;
}
+.alternaterow {
+ width: 100%;
+ display: block;
+ background-color:#303030;
+}
=== modified file 'test.html'
--- test.html 2008-04-21 13:12:25 +0000
+++ test.html 2008-04-21 15:41:42 +0000
@@ -34,6 +34,10 @@
<script type="text/javascript" src="highlight.js"></script>
<script type="text/javascript">
hljs.initHighlightingOnLoad.apply(null, hljs.ALL_LANGUAGES);
+ //hljs.addAlternatingRows();
+ //hljs.noAlternatingRows();
+ //hljs.addLineNumbers();
+ //hljs.noLineNumbers();
</script>
<body>
@@ -711,4 +715,73 @@
</div>
</code></pre>
+ <tr>
+ <th>Line numbers
+ <td>
+<pre><code class="startAt1">@requires_authorization
+def somefunc(param1, param2):
+ '''A docstring'''
+ if param1 > param2:
+ # interesting
+ print 'Gre\'ater'
+ print ''
+ return (param2 - param1 + 1) or None
+
+class SomeClass:<br> pass
+</code></pre>
+
+ <tr>
+ <th>Line numbers can start somewhere other than 1
+ <td>
+<pre><code class="startAt53 cpp"> for (unsigned i = 0; i < 0xFFFF; i++)
+ cout << "Hello, World!" << endl;
+</code></pre>
+
+ <tr>
+ <th>Alternating Rows
+ <td>
+<pre><code class="alternating-rows">@requires_authorization
+def somefunc(param1, param2):
+ '''A docstring'''
+ if param1 > param2:
+ # interesting
+ print 'Gre\'ater'
+ print ''
+ return (param2 - param1 + 1) or None
+
+class SomeClass:<br> pass
+</code></pre>
+
+ <tr>
+ <th>Explicitly No Alternating Rows
+ <td>
+<pre><code class="no-alternating-rows">@requires_authorization
+def somefunc(param1, param2):
+ '''A docstring'''
+ if param1 > param2:
+ # interesting
+ print 'Gre\'ater'
+ print ''
+ return (param2 - param1 + 1) or None
+
+class SomeClass:<br> pass
+</code></pre>
+
+ <tr>
+ <th>Alternating rows and <br>Line numbers
+ <td>
+<pre><code class="alternating-rows startAt53 java"> protected static final Logger _log = Logger.getLogger(L2Character.class.getName());
+
+ public static final Short ABNORMAL_EFFECT_BLEEDING = 0x0001; // not sure
+ public static final Short ABNORMAL_EFFECT_POISON = 0x0002;
+
+ public void detachAI() {
+ _ai = null;
+ //jbf = null;
+ if (1 > 5) {
+ return;
+ }
+ }
+</code></pre>
+
</table>
I am emailing this to Maniac (Ivan Sagalaev, Иван Сагалаев, I think?). Is that right?
