●「行番号を表示する」改良版
経緯
原因と対策
lineのclassはページ一覧のdescriptionの子要素にも設定されている
よってエディタ画面のみで適用されるように親セレクタを指定しておく必要がある
親を辿っていくと… .page #editor.editor .lines .lineとなっており、とりあえず.editorを指定すれば大丈夫そう
classはブラウザのデベロッパーツールで確認できる
「ページ内の要素を選択して検査」をすればクリック一回でわかる（Chromeでの表記）
code:style.css
/* 行番号を表示 -- ウィンドウ幅768px以上で適用 */
@media screen and (min-width: 768px) {
.editor .lines { counter-reset: line }
/* タイトルから数えるときは :not(.line-title) を消してね */
.editor .line:not(.line-title) { counter-increment: line }
/* タイトルから数えるときは :not(.line-title) を消してね */
.app:not(.presentation) .editor .line:not(.line-title)::before {
content: counter(line);
position: absolute; display: inline-block; left: -110px; z-index: 10;
min-width: 50px; text-align: right; vertical-align: middle;
/* 行番号のフォントとか色とかの指定はここ */
font-family: monospace; color: grey }
/* カーソル行の行番号を濃く表示する */
.editor .line:not(.line-title)::before { opacity: .5 }
.editor .line.cursor-line:not(.line-title)::before { opacity: 1; font-weight: bolder } }
めちゃくちゃ便利なCSSだからのらてつ研究所にも取り入れることにしよう！
counterとか全然わからないのでお勉強したい。