ソースコード表示 （セル表示）

Question

とあるサイトを参考にさせてもらってソースコードを表示するように作ったんですが、行番号とコードの列がうまいこと、横になりません。横に揃える方法を教えて下さい。

このように表示するテンプレートがあるみたいなのですが、自分で作ってみたので、これを採用したいと思います。

Answer 1

シェアウェアの秀丸エディタを使ってみては？等倍フォントで表示してください。

Comments

[ryo-dev]

エディタは、今気に入っているの使ってるんで、大丈夫です。

Answer 2

まあいまさらだがリストを使えばいいが。

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #ffd;
  font: 30px sans-serif;
}


ol {
    padding-left: 50px;
}

li {
    border-left: 1px solid black;
    border-bottom: 1px solid red;
}

li {
   background-color: #C0C0C0;
}


li:nth-child( 2n ) {
   background-color: #FFFFFF;
}

サンプル

リスト化は

<!-- 開始時 -->
<ul>
   <li>Line 1
Line 2
:
Line n</li>
</ul>

を javascript で 各行の先頭に <li> を追加するなどご自由に

Answer 3

行数と、数字の行の数があってなかったからでした。