Добавление номера к параграфу

Захотелось сделать нумерованные абзацы в тексте. Да, как у Лебедева в «Ководстве».

Собственно, задача простая. Надо взять нужные абзацы и добавить к ним номера. Каждый абзац у меня представляется тегом p. Хотя это, конечно, необязательно. Поскольку данный тег может быть где-то еще и его нумеровать совсем не надо, я сделал обертку нумеруемого текста из div с указанием класса. Вот функция на JavaScript, которая добавляет номер к абзацу.

function numerateParagraphs() {
  paragraphs = $(".story p");
  
  for(i = 0; i < paragraphs.length; i++) {
    currentNumber = i + 1;
    paragraphs[i].innerHTML = "" + currentNumber + 
                              "" + paragraphs[i].innerHTML;
  }
}

Сначала получаем все параграфы, которые должны быть пронумерованы. Для этого использовался селектор jQuery. Все p внутри элемента с классом story. Можно и без jQuery обойтись, с помощью getElementByID, а вот getElementsByClassName надо использовать осторожно, ибо IE с ней плохо дружит. Получили параграфы, добавили к каждому номер, заключенный в span и имеющий свой класс, чтобы потом в CSS это красиво оформить. Вот и все. Сама CSS может выглядеть как-то так:

.paragraph-number {
  font-size: 8px;
  color: silver;
  margin-left: -30px;
  display: block;
  position: absolute;
}

Скорее всего, это далеко не лучшее решение. Но оно было придумано и сделано за пару минут, пусть это его извиняет. Отдельное спасибо @DoubleG_ за консультацию по JS.

javascript