7

CSS カウンターと<code>タグを使用して、構文が強調表示されたコード スニペットと自動生成された行番号を表示しています。

JSFiddle

HTML:

<code>
 <div class="line"><span>line 1</span></div>
 <div class="line"><span>line 2</span></div>
 ...
</code>

CSS:

code {
    display: inline-block;
    border: 1px black solid;
    padding: 1em;
    font-family: "Consolas", "Monaco", "Courier New", monospace;

    counter-reset: line;
}

code .line {
    display: block;

    counter-increment: line;
}

code .line::before {
    border-right: 1px black solid;
    padding-right: 1em;
    margin-right: 1em;

    content: counter(line);
}

9 行までは問題なく動作しますが、2 桁になると整列しなくなります。

CSSカウンター

線の左端を揃えるにはどうすればよいですか? または、行番号を右揃えにしますか?

私はすでに試しました：

  • counter(line, decimal-leading-zero)- 99 行までは動作しますが、100 行で壊れてしまい、見た目が気に入りません
  • JavaScript でコンテンツを変更するが、getComputedStyle(line, '::before').content単に返す"counter(line)"
4

1 に答える 1

6

実際のニーズに基づいてdisplay:inline-block;とを使用できます。width

デモ: http://jsfiddle.net/zXsXU/14/

code .line::before {
    display:inline-block;
    width:2em;
    border-right: 1px black solid;
    padding-right: 1em;
    margin-right: 1em;
    content: counter(line);
}
于 2013-05-14T01:32:53.730 に答える