Google Prettify with Bootstrap: Line Numbers Not Showing

Question

I am using Google Prettify with Twitter Bootstrap. It is working, but for some reason, the line numbers are not appearing.

Here is the markup:

<pre class="prettyprint linenums">
    <ol class="linenums">
        <li class="L0">
            <span class="kwd">public</span>
            <span class="pln"> </span>
            <span class="kwd">override</span>
            <span class="pln"> </span>
            <span class="kwd">void</span>
            <span class="pln"> </span>
            <span class="typ">Dispose</span>
            <span class="pun">()</span>
        </li>
        <li class="L1">
            <span class="pln"> </span>
            <span class="pun">{</span>
        </li>
        <li class="L2">
            <span class="pln"> </span>
            <span class="kwd">base</span>
            <span class="pun">.</span>
            <span class="typ">Dispose</span>
            <span class="pun">();</span>
        </li>
            <li class="L3">
            <span class="pln"> </span>
            <span class="pun">}</span>
        </li>
    </ol>
</pre>

and I call it like this:

<script type="text/javascript">
    $(document).ready(function () {
        prettyPrint();
    });
</script>

I don't have any custom CSS.. just using the Bootstrap CSS only..

score 22 · Accepted Answer · answered Jul 26 '12 at 11:36

22

I recommend you use those 2 files:

http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css

http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js

and add this in your footer:

<script>
  !function ($) {
    $(function(){
      window.prettyPrint && prettyPrint()   
    })
  }(window.jQuery)
</script>

found in application.js from http://twitter.github.com/

answered Jul 26 '12 at 11:36

baptme

10,062
3
52
57

1

Can you please explain me what the script snippet is doing ? – Vivek Jun 21 '13 at 17:57

score 4 · Answer 2 · answered Oct 13 '12 at 01:17

4

Make sure you don't have list-style: none; anywhere in your CSS file.

answered Oct 13 '12 at 01:17

henrywright

10,070
23
89
150

score 2 · Answer 3 · answered Jun 21 '13 at 19:07

The operative part of the default stylesheet is

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

which turns off list bulleting for all items with index i where (i % 10) ∉ (4,9).

Adding a high priority style will override the default in prettify.css so you don't need to come up with your own theme.

<style>
li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 { list-style-type: decimal !important }
</style>

should do it.

Google Prettify with Bootstrap: Line Numbers Not Showing

3 Answers3