_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;
}
Subscribe
  • Post a new comment

    Error

    default userpic

    Your reply will be screened

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 12 comments