ブログなどにコードを載せる時<pre>タグを使ってコードを書くとエスケープせずにそのまま表示されるので便利。
行番号も表示されたら見やすくなるかなと思い調査。

調べると、行番号を表示させるのにプラグインを使ったり、
難しい事ばっかりやってるサイトだらけなので、考えてみた。



line1,line2,line3の左にナンバリングするにはを考える。

<pre class="code">
line1
line2
line3
</pre>

リストにすれば出来そうなので、
line(n)を<li>タグで囲んでJavaScript(jQuery使用)で置換します。

if($('.code').length > 0) {
  //1ページ内に<pre>タグを何個も書く事もあるので要素の数だけループさせます
  $('.code').each(function(i) {
    //<pre class="code">内のを改行コード前の文字を<li>タグで囲って置換して
    //<pre class="code">内に入れ直します
    $(this).html($(this).html().replace(/(.*)\n/g, "<li>$1</li>"));
  });
}

置換されたHTMLはこうなります。

<pre class="code">
<li>line1</li><li>line2</li><li>line3</li>
</pre>

あとはCSSでカスタマイズしていきます。

.code {
  /* preをリスト要素に変換します */
  display: list-item;
  /* カウンターをリセット */
  counter-reset: item;
}
.code > li {
  /* スタイルを破棄 デフォルトで定義されてる「・」や「1.」は使わない */
  list-style: none;
}
.code > li:before {
  width: 35px;
  text-align: right; /* 数字を右寄せ */
  display: inline-block;
  counter-increment: item; /* カウントアップ */
  content: counter(item); /* カウントされた数字を表示 */
}

好きなようにCSSでデザインを調整すれば、完成です。

list1
list2
list3

さらっと書いたけど、思いつくのに5時間以上かかった😂

書き込み