トップ
料金表
自己紹介
ブログ
お問い合わせ
GAC blog.
あたらしい記事
カテゴリ
gacreate.com
Blog.
<pre>タグに行番号を表示させる
0
JavaScript
2022年06月26日12:22
ブログなどにコードを載せる時<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時間以上かかった😂
* 誤字脱字、内容の間違いのご指摘もお願いします
* ネガティブコメントは非表示にする場合がございます
* 独自のスパムチェックを導入してます