Оформление кода
Наверно любой верстальщик иногда анализирует код когда встречает какую либо прикольную фишку на сайтах. Иногда еще и сохраняет куски кода для последующей медитации на нем.
Мне больше нравится слово тупить
но оно слегка предсказывает результат )
Короче говоря, мне было интересно посмотреть как верстается и оформляется показ кода разными верстальщиками.
ryanfait.com
<ol class="code">
<li><input type="radio" name="radio" class="styled" /> Yes</li>
<li><input type="radio" name="radio" class="styled" /> No</li>
</ol>
ol.code {
margin: 0 0 3em;
padding: 6px 6px 6px 30px;
border: 2px solid #c00;
}
ol.code li {
margin: 0 0 1px 12px;
padding: 0.5em;
color: #000;
font: 1.1em monospace;
background: #fff5f5;
list-style-type: decimal;
}
Отступы автор делает при помощи неразрывных пробелов. Любопытно что он не использует привычный в таком случае тег pre.
chikuyonok.ru
Такой себе минимализм. Код генерится похоже плагином syntaxhighlighter.
Весь код приводить страшо, уж очень его много, приведу только структуру строки:
<div class="line alt2">
<span class="content">
<code class="spaces"> </code>
<span class="block" style="margin-left: 20px;">
<code class="plain">.wrap, .h, .f {</code>
</span>
</span>
</div>
Мне казалось что при оформлении кода логично использовать тег pre и white-space: pre;, но оказывается что это не так уж очевидно ) В дейсвительности проблема в том что если использовать для отступов табы то рано или поздно вы столкнетесь с тем что какой-то код не влезает в отведенную область. Получается что надо контролировать размер отступа. Это можно сделать либо пробелами либо фиксированным css отступом.
Вот в плагине syntaxhighlighter сделано оступом – style=’margin-left: 20px;’>
.content {
background-color: white;
}
.spaces {
display: none;
}
.block {
display: block;
padding-left: 1.5em;
text-indent: -1.5em;
}
.plain{
color: black;
}
habrahabr.ru
Полный минимализм и в дизайне и в коде.
<code><pre>
<div id="page">
<header></header>
<article>
<section id="main"></section>
<aside></aside>
</article>
<footer></footer>
</div>
</pre></code>
pre, code {
font-size: 1em;
}
pre {
white-space: pre-wrap;
white-space: -o-pre-wrap;
}
html5doctor.com
<pre>
<span class="tag"><blockquote><h1></span>
<span class="pln">OMG a heading!</span>
<span class="tag"></h1></span>
<span class="pln"><br> </span>
<span class="tag"><ul><li></span>
<span class="pln">Block quotes can contain more than just paragraphsâ¦</span>
<span class="tag"></li></ul></span>
<span class="pln"><br></span>
<span class="tag"></blockquote></span>
</pre>
pre, code, tt, kbd {
font: .9375em 'andale mono','lucida console',monospace;
line-height: 1.6;
}
pre {
margin: 1.5em 0;
white-space: pre;
word-wrap: break-word;
white-space: -moz-pre-wrap;
white-space: -o-pre-wrap;
white-space: -pre-wrap;
white-space: -hp-pre-wrap;
white-space: pre-wrap;
white-space: pre-line;
}
.tag {
color: #008;
}
.pln {
color: black;
}
...
Длинные сложносделанные стили для pre обьясняются совместимостью с разными старыми браузерами, статья об этом.
24ways.org
<pre><code>div {
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
</code></pre>
pre {
display: block;
margin-bottom: 18px;
background-color: rgb(255, 255, 255);
background-color: rgba(255, 255, 255, .75);
padding: 10px;
overflow: auto;
}
code {
color: rgb(179, 45, 71);
color: rgba(179, 45, 71, .75);
background-color: rgb(255, 255, 255);
background-color: rgba(255, 255, 255, .75);
padding: 3px 5px;
font: bold 13px/18px "Courier New", Courier, mono;
}
24ways подзабили на старые ИЕ, об этом говорит цвет в rgb, и в IE блок с кодом симпатично деградирует до:
Snook.ca
<pre><code>.element-invisible {
height: 0;
overflow: hidden;
position: absolute;
}
</code></pre>
pre {
margin-left: -20px;
background: url(/img/code-bookmark.png) no-repeat 0 0;
}
pre code {
display: block;
margin-left: 20px;
padding: 10px;
font-size: 90%;
background-color: rgba(255,255,255,.5);
overflow: auto;
}
Часто встречается overflow: auto;, насколько я понял это для случая если код оказывается больше контейнера, появятся скроллеры.
css-tricks.com
<pre rel="CSS" class="prettyprint">
<code>
<span class="pln">li</span>
<span class="pun">:</span>
<span class="pln">nth</span>
<span class="pun">-</span>
<span class="pln">child</span>
<span class="pun">(</span>
<span class="lit">5</span>
<span class="pun">)</span>
<span class="pln"></span>
<span class="pun">{</span>
<span class="pln"><br> color</span>
<span class="pun">:</span>
<span class="pln"> green</span>
<span class="pun">;</span>
<span class="pln"><br> </span>
<span class="pun">}</span>
</code>
</pre>
Я так подозреваю что есть какой то способ конвертации HTML кода в такую вот бодягу, вряд ли это делается руками.
pre {
position: relative;
background: #333;
color: white;
font-family: Courier, MonoSpace;
line-height: 1.8;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
font-size: 16px;
width: 730px;
padding: 10px;
margin: 0 0 20px 0;
overflow: auto;
}
pre::after {
content: attr(rel);
position: absolute;
font-size: 24px;
top: 22px;
line-height: 0;
right: 12px;
color: orangeRed;
font-family: "myriad-pro-1","myriad-pro-2", HelveticaNeue, Helvetica, Arial, Sans-Serif;
font-weight: bold;
}
pre code {
padding: 0;
color: white;
background: #333;
}
code {
background: #EEE;
color: black;
font-family: Courier, MonoSpace;
border-radius: 4px;
font-size: 16px;
padding: 0px 5px 1px 5px;
white-space: nowrap;
}
.pln {
color: #DFC484;
}
.pun {
color: #EEE;
}
.lit {
color: #C9783E;
}
Интересно и логично сделан вывод языка кода из атрибута rel.
alistapart.com
<pre><code>
.block {
width: 200px;
height: 200px;
}
</code></pre>
pre {
line-height: 1.5em;
}
pre, code {
font: 100.1% Monaco, "Andale Mono","Lucida Console","Bitstream Vera Sans Mono","Courier New", monospace, serif;
}
blockquote, pre {
padding: 0.25em 40px;
}
pre code {
font-size: 1em;
line-height: 1.5em;
}
Полезные инструменты
Сконвертировать HTML код в специальные символы можно с помощью Zen Coding, а именно фильтрами. Работает это так,
div#content>p.title|e
преобразуется в
<div id="content">
<p class="title"></p>
</div>
Вот еще несколько инструментов:
Convert Special Characters into HTML Entities
Tabifier