webページに掲載するソースコードに行数表示を付けたい

webページ中のコード表示に行数表示を追加する方法をcssで作ってみました

サンプルコード
参考・既存の方式

今回実現できた機能は次の通り

webページでの表示について

コード部分をドラッグで範囲選択しても行数表示は含まない
1行が長いコードは横スクロールする
行数表示を画面内に残したまま横スクロールする

webページへの投稿作業について

ソースコード自体はできるだけコピペだけで済ませる

---

サンプルコード

2カラム方式とol li方式の2パターン作ってみたのですが、ol li方式はうまくいかず断念
　2カラム方式は行数部分が力業ではあるものの、ソースコピペで良く、行数表示を残したままの横スクロールも実現できたので、このブログではこちらの方式を採用します

せっかく作ったので、両方式のサンプルを掲載します

1. 自作のCSS 2カラム方式
html

1.
2.
3.
4.
5.
6.

<div class="codebox">
    <div class="codeheader">タイトルなど</div>
    <pre class="coderows"><code>1.<br>2.</code></pre>
    <pre class="codetext"><code>ここにソースコードをコピペで貼り付け
    行数部分は力業</code></pre>
</div>

css

1.
2.
3.
4.
5.
6.
7.
8.
9.
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.

/*-- コード表示部ボックス --*/
div.codebox{
    width: 510px;
    margin: 0px;
    padding: 0px;
    background-color: #aeaeae;
}

/*-- タイトルヘッダ --*/
div.codeheader{
    width: 470px;
    margin: 0px;
    padding: 4px 20px;
    border-top: #2b2823 solid 1px;
    border-bottom: #2b2823 solid 1px;
    line-height: 1.6em;
    font-size: small;
    color: #2b2823;
}

/*-- 行数表示部 --*/
pre.coderows{
    width: 40px;
    float: left;
    margin-top: 0px;
    padding: 10px 5px 10px 10px;
    text-align: right;
}

pre.coderows code{
    line-height: 1.6em;
    font-size: medium;
    color: #2b2823;
}

/*-- コードテキスト部 --*/
pre.codetext{
    width: 415px;
    margin-left: 40px;
    margin-top: 0px;
    padding: 10px 20px;
    background-color: #2b2823;
    overflow-x: scroll;
}

pre.codetext code{
    line-height: 1.6em;
    font-size: medium;
    color: #fff;
}

行数の表示が力技
コード自体はほぼコピペでOK（"<" ">" の変換は必要）
コード部分のみの横スクロールができる
横スクロール時は、ブラウザによって右端の余白表示が異なる


2. 自作のCSS ol方式
html

<div class="codebox">
    <div class="codeheader">タイトルなど</div>
    <pre class="codeol"><ol><code><li>ここにソースコードを貼り付け</li><li>1行ごとにliタグで囲む必要がある</li></code></ol></pre>
</div>

css

/*-- コード表示部ボックス --*/
div.codebox{
  width: 510px;
  margin: 0px;
  padding: 0px;
  background-color: #aeaeae;
}
/*-- タイトルヘッダ --*/
div.codeheader{
  width: 470px;
  margin: 0px;
  padding: 4px 20px;
  border-top: #2b2823 solid 1px;
  border-bottom: #2b2823 solid 1px;
  line-height: 1.6em;
  font-size: small;
  color: #2b2823;
}
/*-- コードテキスト部ボックス --*/
pre.codeol{
  background-color: #aeaeae;
  width: 510px;
  margin-top: 0px;
  overflow-x: scroll;
}
/*-- コード部背景と余白調整 --*/
pre.codeol ol{
  background-color: #2b2823;
  margin-top: 0px;
  margin-left: 55px;
  margin-bottom: 0px;
  padding: 10px 0px;
}
/*-- 余白調整 --*/
pre.codeol ol li{
  margin-bottom: 0.3em;
  padding-bottom: 0px;
  padding-left: 15px;
}
pre.codeol code{
  line-height: 1.6em;
  font-size: medium;
  color: #fff;
}

コード部分のみの横スクロールはできない
文字数が多い場合、olからはみ出してしまう
行番号とコードの文字色を別にすることができない
横方向の位置設定がめんどい
web掲載用のコードは行ごとにliタグつけて改行を消す必要がある

---

参考・既存の方式

ソースコードに行数表示を追加する表現は既存の方法があり、今回自分で作る上でも参考にしています
　なぜわざわざ自分で作るに至ったのかというと、ブログの仕様により採用できないことが大きく影響しています
　で、自分で作るなら欲しい機能を付けてしまおうと思い、既存の方法には見当たらなかった行数表示したままの横スクロールもやってみました

技術ブログの「ソースコード」表示を効果的にカスタマイズする方法
ol li方式
code-prettifyを使用
liタグ自体が改行をするため、手作業でやるにはコード中の改行を消す必要がある
inline化すれば対応できる？

記事内にソースコードをキレイに表示するWordPressプラグイン「Crayon Syntax Highlighter」
Crayon Syntax Highlighterを使用
WordPressのプラグインなので、これを使用していることが前提条件

CSSでコードブロックの行番号を表示する
cssのcounterでlinenumberをカウントする方式
行数分だけspanタグが必要
ソースコード自体はコピペでOK

HTMLやCSSのソースコードをそのままページに貼り付ける方法
table方式
GitHub Gistを使用
行数の値自体はcssで表示しているぽい