Pre に行番号を付ける方法

Pre タグにCSSで行番号を付けるには次のようにする。

スクロールバーもついでに装飾。

Javascriptを使うまでもない。

 pre {
 background-color: #002000;
 color: #E2E2E2;
 font-family: Consolas, Monaco, 'Andale Mono', monospace;
 direction: ltr;
 text-align: left;
 white-space: pre;
 word-spacing: normal;
 -moz-tab-size: 4;
 -o-tab-size: 4;
 tab-size: 4;
 -webkit-hyphens: none;
 -moz-hyphens: none;
 -ms-hyphens: none;
 hyphens: none;
 padding: 15px;
 display: block;
 font-size: 15px;
 border-radius: 22px;
 overflow: auto;
 position: relative;
 padding: 1em 1em 1em 3em;
 }

pre:before {
 content: "01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 7576 77 78 79 80";
 height: 96%;
 width: 2em;
 position: absolute;
 left: 5px;
 word-wrap: break-word;
 overflow: hidden;
 color: green;
 white-space: pre-line;
 }

pre::-webkit-scrollbar{
 height: 10px;
 width:10px;
 }
 pre::-webkit-scrollbar-track{
 background: transparent;
 border:none;
 }
 pre::-webkit-scrollbar-thumb{
 background: transparent;
 border-radius: 10px;
 box-shadow: inset 0 0 8px rgba(255,255,255,0.8);
 }