Question

Here’s the thing. I use ‘Highlight.js‘ (a javascript-based automatic syntax highlighter) to syntax-highlight code on my website. But it doesn’t support line numbers or zebra-striping (for alternate lines of code).

My code block is wrapped in <pre><code> blocks like this:

<pre><code>
&lt;script type=&quot;text/javascript&quot;&gt;
// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
for (var i = 42; --i &gt;= 0;) {
alert(&#39;Hello &#39; + String(world));
}
}
&lt;/script&gt;
&lt;style&gt;
p { color: pink }
b { color: blue }
u { color: &quot;umber&quot; }
&lt;/style&gt;
</code></pre>

And the output looks like this:

Now I want to show line numbers for the code block dynamically using JavaScript. How do I do that? (Also, if possible, how do I show zebra-striping?)

Thanks.

PS: I don’t know JavaScript, so please try to be as clear as possible. I will try my best to understand. Thanks.

Answer 1

You could use an alternate framework such as http://alexgorbatchev.com/SyntaxHighlighter/

Or take a look here and find something that suites.
http://www.1stwebdesigner.com/css/16-free-javascript-code-syntax-highlighters-for-better-programming/