コードの行番号を表示する

行番号を表示するに続き、CSSカウンターを使ったUserCSSのテスト！その2

これも、行数が増えるごとに表示速度が遅くなってくる…。1万字を超えてると5秒くらいかかった。いつもではない。

表示サンプル（画像）

https://gyazo.com/10f022749af7bf4f64c5d8b33a7b9fe2

code:style.css

/* コード記法の行番号を表示 -- ウィンドウ幅768px以上で適用 */

@media screen and (min-width: 768px) {

.section-title, .code-block-start { counter-reset: codeline }

.code-block code > span:not(class) { counter-increment: codeline }

.code-block code > span:not(class)::before {

content: counter(codeline);

position: absolute; display: inline-block; left: -4em; z-index: 10;

min-width: 50px; text-align: right; vertical-align: bottom;

/* ↓行番号のフォントとか色とかの指定はここ */

font-family: monospace; color: grey }

/* カーソル行の行番号を濃く表示する */

.code-block code > span:not(class)::before { opacity: .5 }

.cursor-line .code-block code > span:not(class)::before { opacity: 1; font-weight: bolder } }

これ、ほんとは

.code-block-start { counter-reset: codeline }

だけでカウンターリセットしたかったけど、なんかだめだった…。DOMの深さのせい？

上のサンプル画像がうまくいってるのは、コード記法の前にインデントがなくて、上が空行だから。

インデントなし、かつ上に空行ありでコード記法を書くと、それがセクションの始まりになるので

.section-title { counter-reset: codeline }

こっちが適用されてカウンターが利くようになるよ。

つまりインデントしてあるコード記法には正しい行番号がでない…。

↓1行目なのに16行目の表示

https://gyazo.com/a7ceedfe04a7067bb4b576a7ecffdc81

コード記法の前にセクション区切り役の行があれば大丈夫。

https://gyazo.com/16c10df0cda33cbebdf2e73340c557bd

2017-11-22 ちょっと手直し

2018-05-16 プレゼンモード回避用のCSSとりました