Pre CodeブロックにCSS擬似要素で行番号をつける方法

お題はこれ。

demo0

成果物はCSSだけで行番号をつけるサンプル
「MDN moz://a」ライクに・・・までの3工程。

一時的なマイブーム状態で「clipboard.js」を使いたいがために最初に考えたのが、PreコードにCSSだけで行番号をつけられるか?からはじまって、面白いことにググって見つけた2記事ともが同じサイトをイメージしていたのが興味深くて。

まずは先にQiitaで見つけた CSSでコードブロックの行番号を表示する をそのまま再現するとこんな感じ。

demo0

おぉぅ。とか喜ぶも、ラストに挿むspanタグの数、つまり全体の行数を把握しなきゃいけないのか、とズボラモードが首を擡げた。

# 1行目
# 2行目
# 3行目
# 4行目

で、さらに検索を続けて preに行番号、の別解(cssで) という記事を読んでいるうちに、(あぁ:beforeかぁ・・・)と最大ヒントを貰ってしまう。

どちらの記事も「content: counter」で 1+1=2 , 2+1=3 , 3+1=4 … とプログラム的に考えておられた。

でも自分が:before要素で連想したのはもっと泥臭い方。
content: “ABC・・・”; というアナログな文字入れ  

content: "1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A";

と最初から書いてしまっておけばいい。配列として用意しておく。50行設定なら「50\A」まで書かなきゃだし、100行なら「100\A」まで「\A」で改行する文字列をCSSに書いておくと

demo1

想定していたものがそれなりに出来た。

これ本当に「19\A」までしか書かなかったので20行目以降は行番号も黒背景も途切れるんですけどね。   3行しか使わなくても overflow: hidden; で未使用行は隠れる仕組み。

<pre>や<code>に自然改行を入れる場合は

 white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    white-space: pre-wrap;          /* CSS3 */
    word-wrap: break-word;          /* IE 5.5+ */

を指定するが、この行番号は模擬で実際行には付随していないため、改行なしで横スクロールを出す設定に限られる。
<code> に overflow: hidden;
<pre> に overflow-x: scroll; を指定しておくと最後のサンプルのようになりました。

demo3

 
ここに「highlight.js」などのSyntax Highlightを付加すれば普通に読みやすくなるはず。

2番目のサンプルが出来たあたりで、う、これじゃプラグインの重さげなのと大差ない・・・・と行番号不要説へ傾いたけど(うちは連続して長いコードを載せることはなさそう)
「CSS限定」括りで考えるのはクイズみたいに面白かったので、記事にしてみました。

<pre class=” “>の別バージョンとして多色保存しておくのもいいかも。