On March 3, 2012 In User interface with , , , , tags

Syntax highlighting with Google prettify – Adding Numbers

This is continuation part of syntax highlighting with Google prettify. In this tutorial we will learn how to add numbers to each and every line of code, it’s nothing but making every line of code a list element inside ordered list.

Syntax highlighting with Google prettify – Adding Numbers

In the previous tutorial, we have learnt adding class prettyprint to pre or code will enable syntax highlighting

To add numbers to each line of code. We should add a class linenums.

<pre class=”prettyprint linenums”><code></code></pre>

And make sure you remove the following lines from the prettify.css

li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{
   list-style-type:none
}
li.L1,li.L3,li.L5,li.L7,li.L9{
   background:#eee
}

that’s it we are done adding numbers to code. We can see the numbers before code

Comments are closed.