umade.ru

Форматирование исходного кода

Каким образом оформлять исходный код в своей статье? Во-первых, необходимо, чтобы исходный код отличался от обычного текста. Большинство сайтов и форумов так и делают, но как сделать это более читабельно, доступно и элегантно?

Очень популярный способ форматировать сложно структурированный иходник или просто текст с отступами — использовать HTML-тэг <pre>.

Недостатки тэга <pre>

У тэга <pre> есть недостатки. Один из них — это выходящий за предел экрана текст. Если непрерывная строка очень длинная, то она будет выходить за обозначенные рамки, вследствие чего часто ломается конструкция сайта и появляется горизонтальная прокрутка. Этого можно избежать, если прописать в CSS pre {overflow: auto}. В этом случае текст не выходит за приделы, а горизонтальная прокрутка остается внутри блока. Это исправляет ситуацию, но горизонтальная прокрутка всё равно создаёт неудобства.

Ещё один минус тэга <pre> — при печати страницы длинна строки ограничена, а так как <pre> не умеет автоматически переносить текст, то строки урезаются.

Форматировать код с помощью списков

Этот метод ещё в 2002 году публично оформил Симон Willison. Суть этого метода — использовать упорядоченные списки <ol>, где каждая строка <li> — это отдельная строка исходного кода. Причём списки автоматически нумеруются, что очень удобно — каждая строка кода будет соответствовать своему порядковому номеру. Ещё заметил одно удобство — кода вы копируете текст с веб-страницы в Word, код переносится вместе с нумерацией.

Немного поэкспериментировав и подсмотрев, как другие западные блогеры используют и модифицируют упорядоченные списки для презентации кода, я пришёл к тому, чтобы использовать такую же методику на umade.ru, и теперь более чем рад удобному восприятию и стильной презентацией исходников.

xHTML-код прост и выглядит следующим образом:

<ol class="code">
<li><code>Вставляем строку кода здесь</code></li>
<li><code>ещё одну сюда</code></li>
<li><code>и так далее.</code></li>
</ol>

Далее идёт код, который необходимо прописать в CSS-файле:

ol {margin:0 0 10px 0; padding:0;}
ol.code {
border:1px solid #ddd;
padding:3px 5px 3px 35px;
font-family:Courier;
list-style-type:decimal-leading-zero;
}
ol.code li {
padding:4px 5px;
margin:2px 0;
background:#f8f8f8;
}
ol.code li code {
letter-spacing: 0;
font-family:Courier;
}
ol.code .new{
color:#b10000
}
ol.code .comment {
color:#0c4b7c;
}
ol.code li.tab1 {padding-left:20px;}
ol.code li.tab2 {padding-left:40px;}
ol.code li.tab3 {padding-left:60px;}
ol.code li.tab4 {padding-left:80px;}

Классы tab1, tab2, tab3 и tab4 отвечают за отступы. Чтобы применить отступ, необходимо прописать для элемента <li> нужный класс отступа. Классы new и comment отвечают за новую строку и комментарий соответственно. Пример:

<ol class="code">
<li><code>Обычная строка кода</code></li>
<li class="tab1"><code>отступ tab1</code></li>
<li class="tab1"><code>отступ tab2</code></li>
<li class="tab1"><code>отступ tab3</code></li>
<li class="tab1"><code>отступ tab4</code></li>
<li class="new"><code>Новая строка кода</code></li>
<li class="comment">// и комментарий</li>
</ol>

Можно создать новые классы под свои нужды. Всё значения цветов и отступов относительны, поэтому можете свободно их подстраивать под дизайн сайта. Удачи!

Всего оставлено 21 комментарий

  1. Splurov 31 марта 2006

    Возникают неудобство при копировании в “блокнот”. Цифры-то мне точно не нужны, а они копируются.

  2. Spr!tE 31 марта 2006

    Мне все же больше нравится способ с тегами pre.
    Он более семантически верный по сравнению со списками, а длинные строки можно и вручную переносить, чтобы не создавать неудобства пользователям.
    Опять же, не приходится засорять код конструкциями типа class="tab4"

  3. shiva 31 марта 2006

    Не копируются цифры! Только код! Так что все ок.

  4. Splurov 31 марта 2006

    shiva, это в IE не копируется, а в Firefox копируется (и правильно, по-моему, делает, т.к. список).

  5. kpumuk 31 марта 2006

    Есть еще одно неудобство – не копируются отступы. В результате копируя красивый код из ИЕ, получаем мерзкую кашу, а из Фокса – к каше добавляются вкрапления мерзопакостных цифр, номеров строчек.

  6. Никита 31 марта 2006

    Да, отступы не копируются. Это плохо. Даже очень.

    Какой выход?

    Может просто прикреплять под каждым исходником текстовый файл с нормальным кодом? Думаю, такой ход был бы отличным решением.

  7. Евгений Скульдицкий 31 марта 2006

    Средствами современных браузеров сделать так, чтобы было красиво и копировалось как надо одновременно можно лишь если есть очень много свободного времени. В качестве примера посмотрите ководство Артемия Лебедева и обратите внимание на ” и ( ). Человек старался.
    А про отступы, если следовать стандарту CSS, то использование whitespace’ов можно регулировать.

  8. Repenomamus Robustus 3 апреля 2006

    Сам по себе способ имеет право на жизнь – как и другие, кому как удобнее.

  9. Никита 3 апреля 2006

    И это всё из-за одного слова? 😉

    Кстати, если запихнуть в Wrod слово придел, то как и со словом предел – ошибок MS Word не выдает.

  10. gray 7 апреля 2006

    К сожалению, нельзя написать “ol start=…” (в xhtml свойство start объявили deprecated), а при публикации фрагментов исходников очень часто требуется начинать нумерацию не с единицы.

  11. Noita 11 апреля 2006

    Значительно лучше такие вещи делать через JavaScript. Хоть с выбором “нумерация/без нумерации”.

    А копировать лучше из pre, чем из списков. Цифры почти всегда будут мешаться. Так что идея хороша, но требует значительной доработки.

  12. Julik 26 июня 2006

    Надо не выпендриваться таким образом а просто ставить юникодный символ “перевод строки” там где строка слишком длинная. Был бы блог в нормальной кодировке – я бы даже продемонстрировал.

  13. wmas 11 июля 2006

    Да нормальный вариант, кто хочет, тот использует, кто не хочет, пишет своё. Кстати, у себя на блоге я просто написал плагин с использованием highlight_string, который обрабатывает содержимое в приделах [PHP] … [/PHP], вполне хорошо работает, не надо заморачиваться с раскраской и символами уголков и т.п. Пришлось правда попыхтеть с кавычками, которые WordPress преобразовывает на свой лад и не всегда удобный для копирования, но в целом у кого есть желание и терпение тот, я думаю, найдёт выход?

  14. 12345 28 июля 2006

    Есть ещё проблема, про которую не вспоминают.
    При копировании кода часто появляются пробелы в конце каждой строчки. У PRE их нет, но при условиях тоже могут появиться. Знает ли кто код с автопереносом длинных строк и с отсутствием пробелов в конце при копировании? Лидирующие тоже нужны, их можно через & nbsp;

  15. warmrobot 26 августа 2006

    Для кода есть свой специальный тэг CODE, и все куски кода должны заключаться в него, как я считаю. А уж для сохранения формата использовать PRE. Так сделано, например, у того же Дэйва Ши на mezzoblue.com.
    У тэга PRE было же значение width, которое показывало сколько символов должно поместиться в строке, а в HTML 4.0 его убрали. Почему? Мне, например, непонятно. Данный способ хорош, но…просто списки они не для того предназначены. Я не говорю, что он плохой. Может даже я сам на него перейду, но пока мне ближе точка зрения Александра (aka Spr!tE). Да и дядя Дэйв тоже так делает. 🙂

  16. Gorky 4 января 2007

    По теме статьи – класс, использовать не всегда выгодно, но в целом – класс, класс!

  17. vlmonk 16 января 2007

    про врапинг кода внутри pre
    http://www.longren.org/2006/09/27/wrapping-text-inside-pre-tags/

  18. Артём Курапов 24 февраля 2007

    Неудобно вбивать код в виде списка… Мне значительно легче весь код вставить в code-тэг
    http://kurapov.name/index/main/1119/

  19. Кадабра 7 апреля 2007

    По-настоящему логично код размечается в XHTML 2.0 с помощью контейнера blockcode, а строки выделяются l. Строка текста (l) – это не пункт списка (li), соответственно генерируемые номера строк вроде бы не должны копироваться.

    Представление кода в виде списка – это красиво, но не семантично. Во-первых, код – это разновидность цитаты, и он должен целиком как цитатный блок выделяться. Во-вторых, в строках списка перебираются сущности, друг другу параллельные, аналоги, которые можно отсортировать. А строки кода – это последовательно связанные элементы, их отсортировать нельзя, как нельзя отсортировать, например, по алфавиту все абзацы в книжке.

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

  20. juice 5 сентября 2007

    Поддержу warmrobot: решение со списками элегантное, но способ через pre – все-таки более семантически адекватный.

    Кстати, если кому-нибудь окажется полезным: для wordpress есть хороший плагин на эту тему – snippet highlight.

  21. Олег 8 ноября 2008

    По-настоящему логично код размечается в XHTML 2.0 с помощью контейнера blockcode, а строки выделяются l.

Поиск по сайту

Из последнего

Архив статей и записей