42

I am using prettify:

<pre class="prettyprint linenums">
  some code
</pre>

It works but the line number show every 5 lines and not for every line. I am using these files

<link href="../src/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../src/prettify.js"></script>

Basically at the end of this page http://google-code-prettify.googlecode.com/svn/trunk/styles/index.html you can see that I want, but I looked at that code and I can't figure it out.

John Conde
  • 217,595
  • 99
  • 455
  • 496
aurel
  • 3,082
  • 10
  • 44
  • 56

3 Answers3

47

The root cause is list-style-type: none in prettify.css:

/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 { list-style-type: none /* <<< THIS is the cause! */ }
/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background: #eee }

You can either remove that rule or override it with:

.linenums li {
    list-style-type: decimal;
}
Simone
  • 20,302
  • 14
  • 79
  • 103
  • Ha ha, I spend hours last night, and I should have thought of that, though it seems that I must have removed it from that style sheet but I did not remove it from my global style. - Thanks – aurel Dec 06 '11 at 12:30
  • 42
    Why on earth is this the default? – Mike Weller Jun 14 '12 at 09:52
  • 1
    Not sure when it started, but the copy of prettify I downloaded had a hard coded path to the css file on the CDN. So even though I had modified my local copy it was ignoring it. – Peter Feb 17 '14 at 16:25
  • Yep, if you use this solution make sure you change the run_prettify.js function to use "./prettify.css" instead of "https://cdn.rawgit.com/google/code-prettify/master/loader/prettify.css" – JSideris Aug 08 '16 at 19:07
29

Solution

Instead of modifying the CSS you can simply add in a line of CSS to achieve the desired behavior:

<style>

    .prettyprint ol.linenums > li { list-style-type: decimal; }

</style>  

Example

A full example might have the code below. View results via jsfiddle or see below

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css" />

    <style>
        .prettyprint ol.linenums > li { list-style-type: decimal; }
    </style>

<pre class="prettyprint linenums">
 foo
 bar
 bis
 sed
 awk
 cat
</pre>


<script src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.js"></script>

Glorfindel
  • 21,988
  • 13
  • 81
  • 109
cwd
  • 53,018
  • 53
  • 161
  • 198
3

I like having the alternating background colors, so did it this way:

/* White background color for all even-numbered lines */
li.L0,
li.L2,
li.L4,
li.L6,
li.L8  { background-color: #fff; }
/* Light-gray background color for all odd-numbered lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background-color: #eee; }
djunod
  • 4,876
  • 2
  • 34
  • 28