コードの行番号を表示する
これも、行数が増えるごとに表示速度が遅くなってくる…。1万字を超えてると5秒くらいかかった。いつもではない。
表示サンプル（画像）
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行目の表示
コード記法の前にセクション区切り役の行があれば大丈夫。
初出 2017-11-20
2017-11-22 ちょっと手直し
2018-05-16 プレゼンモード回避用のCSSとりました