Каким образом оформлять исходный код в своей статье? Во-первых, необходимо, чтобы исходный код отличался от обычного текста. Большинство сайтов и форумов так и делают, но как сделать это более читабельно, доступно и элегантно?
Очень популярный способ форматировать сложно структурированный иходник или просто текст с отступами — использовать 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>
Можно создать новые классы под свои нужды. Всё значения цветов и отступов относительны, поэтому можете свободно их подстраивать под дизайн сайта. Удачи!
Возникают неудобство при копировании в “блокнот”. Цифры-то мне точно не нужны, а они копируются.
Мне все же больше нравится способ с тегами
pre
.Он более семантически верный по сравнению со списками, а длинные строки можно и вручную переносить, чтобы не создавать неудобства пользователям.
Опять же, не приходится засорять код конструкциями типа
class="tab4"
Не копируются цифры! Только код! Так что все ок.
shiva, это в IE не копируется, а в Firefox копируется (и правильно, по-моему, делает, т.к. список).
Есть еще одно неудобство – не копируются отступы. В результате копируя красивый код из ИЕ, получаем мерзкую кашу, а из Фокса – к каше добавляются вкрапления мерзопакостных цифр, номеров строчек.
Да, отступы не копируются. Это плохо. Даже очень.
Какой выход?
Может просто прикреплять под каждым исходником текстовый файл с нормальным кодом? Думаю, такой ход был бы отличным решением.
Средствами современных браузеров сделать так, чтобы было красиво и копировалось как надо одновременно можно лишь если есть очень много свободного времени. В качестве примера посмотрите ководство Артемия Лебедева и обратите внимание на ” и ( ). Человек старался.
А про отступы, если следовать стандарту CSS, то использование whitespace’ов можно регулировать.
Сам по себе способ имеет право на жизнь – как и другие, кому как удобнее.
И это всё из-за одного слова? 😉
Кстати, если запихнуть в Wrod слово придел, то как и со словом предел – ошибок MS Word не выдает.
К сожалению, нельзя написать “ol start=…” (в xhtml свойство start объявили deprecated), а при публикации фрагментов исходников очень часто требуется начинать нумерацию не с единицы.
Значительно лучше такие вещи делать через JavaScript. Хоть с выбором “нумерация/без нумерации”.
А копировать лучше из pre, чем из списков. Цифры почти всегда будут мешаться. Так что идея хороша, но требует значительной доработки.
Надо не выпендриваться таким образом а просто ставить юникодный символ “перевод строки” там где строка слишком длинная. Был бы блог в нормальной кодировке – я бы даже продемонстрировал.
Да нормальный вариант, кто хочет, тот использует, кто не хочет, пишет своё. Кстати, у себя на блоге я просто написал плагин с использованием highlight_string, который обрабатывает содержимое в приделах [PHP] … [/PHP], вполне хорошо работает, не надо заморачиваться с раскраской и символами уголков и т.п. Пришлось правда попыхтеть с кавычками, которые WordPress преобразовывает на свой лад и не всегда удобный для копирования, но в целом у кого есть желание и терпение тот, я думаю, найдёт выход?
Есть ещё проблема, про которую не вспоминают.
При копировании кода часто появляются пробелы в конце каждой строчки. У PRE их нет, но при условиях тоже могут появиться. Знает ли кто код с автопереносом длинных строк и с отсутствием пробелов в конце при копировании? Лидирующие тоже нужны, их можно через & nbsp;
Для кода есть свой специальный тэг CODE, и все куски кода должны заключаться в него, как я считаю. А уж для сохранения формата использовать PRE. Так сделано, например, у того же Дэйва Ши на mezzoblue.com.
У тэга PRE было же значение width, которое показывало сколько символов должно поместиться в строке, а в HTML 4.0 его убрали. Почему? Мне, например, непонятно. Данный способ хорош, но…просто списки они не для того предназначены. Я не говорю, что он плохой. Может даже я сам на него перейду, но пока мне ближе точка зрения Александра (aka Spr!tE). Да и дядя Дэйв тоже так делает. 🙂
По теме статьи – класс, использовать не всегда выгодно, но в целом – класс, класс!
про врапинг кода внутри pre
http://www.longren.org/2006/09/27/wrapping-text-inside-pre-tags/
Неудобно вбивать код в виде списка… Мне значительно легче весь код вставить в code-тэг
http://kurapov.name/index/main/1119/
По-настоящему логично код размечается в XHTML 2.0 с помощью контейнера
blockcode
, а строки выделяютсяl
. Строка текста (l
) – это не пункт списка (li
), соответственно генерируемые номера строк вроде бы не должны копироваться.Представление кода в виде списка – это красиво, но не семантично. Во-первых, код – это разновидность цитаты, и он должен целиком как цитатный блок выделяться. Во-вторых, в строках списка перебираются сущности, друг другу параллельные, аналоги, которые можно отсортировать. А строки кода – это последовательно связанные элементы, их отсортировать нельзя, как нельзя отсортировать, например, по алфавиту все абзацы в книжке.
И ещё в хорошем блоке кода должен указываться язык, на котором код написан (как для цитаты должно быть указание, кто её автор).
Поддержу warmrobot: решение со списками элегантное, но способ через pre – все-таки более семантически адекватный.
Кстати, если кому-нибудь окажется полезным: для wordpress есть хороший плагин на эту тему – snippet highlight.
По-настоящему логично код размечается в XHTML 2.0 с помощью контейнера
blockcode
, а строки выделяютсяl
.