コードブロックの行頭に擬似的に行番号を付ける(Ownd非対応)

プログラミング技術系のブログを書いている方はブログ記事中にソースコードを紹介したい時が多々あると思います。HTMLの文法ではソースコードを紹介したい時はコードブロックタグ（＜pre＞＜code＞〜＜／code＞＜／pre＞）で囲むこととされていますが、Ameba Owndのブログ記事編集画面ではそもそもコードブロックタグを入力することができません。そこで以前に順序付きリストをコードブロックに見せかける方法を紹介しました。

本記事では、他のブログサービスを使っている方向けに、CSSカスタマイズによってコードブロックの行頭に擬似的に行番号を付ける方法をご紹介します。SaKuRaiさん https://www.studiomic.net/pre-line-numbers/ の解説を参考にしました。

想定するHTML

1. <pre>
2. :before
3. <code>
4. ソースコード１行目
5. ソースコード２行目
6. ソースコード３行目
   
7. </code>
8. </pre>

考え方

• code要素の手前に、before擬似要素として縦に細長いブロックを挿入する
• before擬似要素の表示位置はpre要素を原点とした絶対位置に表示する
• 絶対位置表示の結果before擬似要素はpre要素からはみ出すので、pre要素のoverflow-y属性をhiddenに設定してはみ出た部分を隠す
• 絶対位置表示の結果before擬似要素はcode要素と重なって表示されるので、marginやpaddingなどの寸法値を調整して文字が隠れないようにする
• before擬似要素に1(改行)2(改行)3(改行)4(改行)5(改行)…50と書き込む（実用上50行目までで良いと思いますが皆さんのご都合に合わせて調整してください）
• ソースコードの１行が長い時に画面右端で自動改行されると困るので、code要素のwhite-space属性をpreに設定して改行を禁止する
• pre要素のoverflow-x属性をscrollに設定して、ソースコードの横にはみ出た部分も読めるようにする
  

CSSサンプル

1. pre *{font-size:14px; line-height:1.8;} 
2. pre {padding:0; overflow-y:hidden; overflow-x:scroll;} 
3. pre {position:relative} 
4. pre>code:before {position:absolute; top:0px; left:0px;} 
5. pre>code:before {width:32px; display:block; text-align:right; padding-top:10px; 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 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 35\A 36\A 37\A 38\A 39\A 40\A 41\A 42\A 43\A 44\A 45\A 46\A 47\A 48\A 49\A 50\A";}
6. pre>code {white-space:pre;}
7. pre>code {padding-left:32px; margin:10px 10px 10px 10px;} 

備考

• 上記サンプルで表示したいソースコード文字列は３行ですが、上記CSSサンプルでは4行目の4という数字が中途半端に見えていることと思います。code要素のmargin-bottom属性の数値を調整して隠してください。

Ameba Owndでは使えないテクニックですが、WordPressなどの他のブログサービスを使っている方はぜひ参考にしてください。（森山）