<rmcreative>

RSS

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

  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 комментариев