<rmcreative>

RSS

Все заметки с тегами «CSS, code»

Можно уточнить:

    (1)
    (1)
  1. Верстаем код с номерами строк

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

    Живой пример

    13 комментариев
  2. Кроссбраузерный способ переноса строк в code и pre

    7 декабря 2007

    Комментировать