Как добавить номера строк во все строки в Google Prettify?

Question

Я использую prettify:

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

Это работает, но номер строки показывают каждые 5 строк, а не для каждой строки. Я использую эти файлы

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

В основном в конце этой страницы http://google -code-prettify.googlecode.com / svn / trunk / styles / index.html вы можете видеть, что я хочу, но я посмотрел на этот код и я не могу понять это.

Answer 1

Основная причина list-style-type: none в 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 }

Вы можете удалить это правило или переопределить его с помощью:

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

Answer 2

Решение

Вместо изменения CSS вы можете просто добавить строку CSS для достижения желаемого поведения:

<style>

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

</style>  

Пример

Полный пример может иметь приведенный ниже код. Просмотр результатов через jsfiddle или см. Ниже

<code><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

http://img801.imageshack.us/img801/8498/al6c.png

Answer 3

Мне нравится иметь чередующиеся цвета фона, поэтому сделал это так:

/* 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; }