RMCreative.ru - Блог Голосов: 1 Адрес блога: http://rmcreative.ru/feed/ Добавлен: 2008-06-12 21:34:00 блограйдером ZaiSL

Верстаем код с номерами строк

Задачка оказалась не совсем тривиальной. Надо учесть следующее:

1. Номера могут начинаться с какого угодно числа, могут разрываться, могут быть не числами (например, ... для обозначения того, что часть кода не приводится).
2. Номера не должны копироваться.
3. Длинные строки должны переноситься.

Решается так:

<table class="code">
    <tr>
        <th data-line-number="1"></th>
        <td>public static function autoload($className)</td>
    </tr>
    <tr>
        <th data-line-number="2"></th>
        <td>{</td>
    </tr>

.code th:before {
   content: attr(data-line-number);
}

Важный момент тут использование data-attributes и псевдо-селектора :before. Первое позволяет расставить номера на стороне сервера, второе — вставить их в ячейку. При этом они не выделяются и не копируются.

Живой пример