Search code examples
javascriptcssprettify

How to add line numbers to all lines in Google Prettify?


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.


Solution

  • 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;
    }