Оформление кода

Июль 31, 2011 ||  css ||  комментарии

Наверно любой верстальщик иногда анализирует код когда встречает какую либо прикольную фишку на сайтах. Иногда еще и сохраняет куски кода для последующей медитации на нем. Мне больше нравится слово тупить но оно слегка предсказывает результат ) Короче говоря, мне было интересно посмотреть как верстается и оформляется показ кода разными верстальщиками.

ryanfait.com

code-styling

<ol class="code">
    <li>&lt;input type="radio" name="radio" class="styled" /&gt; Yes</li>
    <li>&lt;input type="radio" name="radio" class="styled" /&gt; 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

code-styling

Такой себе минимализм. Код генерится похоже плагином syntaxhighlighter.

Весь код приводить страшо, уж очень его много, приведу только структуру строки:

<div class="line alt2">
  <span class="content">
    <code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</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-styling

Полный минимализм и в дизайне и в коде.

&lt;div id=&quot;page&quot;&gt;
    &lt;header&gt;&lt;/header&gt;
    &lt;article&gt;
        &lt;section id=&quot;main&quot;&gt;&lt;/section&gt;
        &lt;aside&gt;&lt;/aside&gt;
    &lt;/article&gt;
    &lt;footer&gt;&lt;/footer&gt;
&lt;/div&gt;
        pre, code {
            font-size: 1em;
        }
        pre {
            white-space: pre-wrap;
            white-space: -o-pre-wrap;
        }

html5doctor.com

code-styling
<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

code-styling
<pre><code>div {
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}</pre></code>
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 блок с кодом симпатично деградирует до:

code-styling

Snook.ca

code-styling
<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

code-styling
<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>&nbsp; &nbsp; 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

code-styling

<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 код в специальные символы можно с помощью Emmet, а именно фильтрами. Работает это так:

div#content>p.title|e

преобразуется в

&lt;div id="content"&gt;
&lt;p class="title"&gt;&lt;/p&gt;
&lt;/div&gt;
По теме
comments powered by Disqus