_gray (name_is_gray) wrote in ru_webdev,
_gray
name_is_gray
ru_webdev

Нумерация строк

А никто не пробовал реализовать средствами CSS нумерацию строк в блоках с кодом, когда строки в HTML «разбиваются» <br />-ами, а инденты — через &nbsp;? Через :before или :after, к примеру…


HTML:


<div class='code' style='background: #eee'>
<span class='keywd'>for</span> (<span class='keywd'>var</span> <var>i</var> = 1; <var>i</var> < 100; <var>i</var>++)<br />
  <span class='keywd'>echo</span> ("Boo");<br />
<em>// Комментарий</em><br /><br />

<span class='keywd'>function</span> myFunc (<var>att1</var>, <var>att2</var>) {<br />
  <span class='keywd'>return</span> <var>att1</var> * <var>att2</var>;<br />
}
</div>

CSS:


body {
  background: #eee;
}

div.code {
  background: #fff;
  font: 11px 'Courier New', Monaco, monospace;
  width: 480px; padding: 10px; margin: 0 auto 30px;
  border: 1px solid #ddd;
}

var {
  color: #900;
  font-style: normal;
}

span.keywd {
  color: #c90;
}

.code em {
  color: #888;
  font-style: normal;
}
  • Post a new comment

    Error

    default userpic

    Your reply will be screened

  • 12 comments