<rmcreative>

RSS

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

27 января 2014

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

  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. Первое позволяет расставить номера на стороне сервера, второе — вставить их в ячейку. При этом они не выделяются и не копируются.

Живой пример

Комментарии RSS

  1. №8772
    kotchuprik
    kotchuprik 27 янв. 2014 г., 15:29:20

    Стоит дописать, что это CSS2.1 и работает IE8+

  2. №8774
    slavcodev
    slavcodev 27 янв. 2014 г., 15:51:20

    kotchuprik, такие вещи уже можно не уточнять. IE8- давно похоронили :)

  3. №8775
    Alex
    Alex 27 янв. 2014 г., 22:31:32

    Да, css это вещь. Именно современный css, который я не знаю..

  4. №8776
    Vitaly
    Vitaly 27 янв. 2014 г., 22:51:21

    как такое решение? не тестил ни в каких браузерах работает в хроме. Сам css не самый удачный, но написан на скорую руку на коленке. :)

    просто по разметке немного по читабельнее, нет нагромождений с table и не надо нумеровать строки если это специально не требуется.

    http://jsfiddle.net/nGQPL/1/

  5. №8777
    Константин
    Константин 28 янв. 2014 г., 0:10:32

    Вариант с <dl>, который мне больше нравится: jsfiddle.net/PbnsL/

  6. №8778
    Sam
    Sam 28 янв. 2014 г., 0:35:18

    Vitaly, интересно, хотя из того же PHP проще нумеровать строки, чем считать заранее.

    Константин, годно.

  7. №8780
    Аноним
    Аноним 28 янв. 2014 г., 21:16:19

    С точки зрения разметки предложенное решение абсолютно несемантично. Для организации подобных украшений лучше использовать javascript.

  8. №8782
    slavcodev
    slavcodev 28 янв. 2014 г., 21:20:57

    Vitaly, Константин — обе версии с заданной шириной блока для номера строки, стоит заметить что в задаче нам заранее этой ширины не высчитать, так что тут без таблицы или display:table-cell для блока, не обойтись.

  9. №8783
    Аноним
    Аноним 28 янв. 2014 г., 21:22:05

    Александр, возможно, было бы правильным блокировать кнопку отправки сообщения после нажатия на неё во избежание публикации повторных комментариев.

  10. №8784
    slavcodev
    slavcodev 28 янв. 2014 г., 21:23:07

    Аноним есть семантичное решение. jsfiddle.net/K3WUD/4/

  11. №8785
    Vitaly
    Vitaly 28 янв. 2014 г., 21:30:17

    slavcodev, мне показалось что это все же удобнее чем нагромождения с table, особенно учитывая что более 5 символов будет требоваться редко, то можно этим пренебречь. Взамен получаете возможность не нумеровать строки если не нужна особая нумерация, более простая и понятная разметка и возможность менять порядок на клиенте.

    можно подсмотреть другие решения — например github имеет интересное решение без псевдо элементов.

  12. №8786
    Sam
    Sam 28 янв. 2014 г., 21:43:56

    Vitaly, моё решение как раз навеяно github.

  13. №10513
    Rose
    Rose 28 мая 2016 г., 14:38:34
    <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>>
  1. Почта опубликована не будет.

  2. Можно использовать синтаксис Markdown или HTML.

  3. Введите ответ в поле. Щёлкните, чтобы получить другую задачу.