行番号を表示する
https://gyazo.com/bd9b8fac01f340c5dd9a4c6e75a38a0f
code:style.css
/* 行番号を表示 -- ウィンドウ幅768px以上で適用 */
@media screen and (min-width: 768px) {
.lines {
counter-reset: line;
}
/* タイトルから数えるときは :not(.line-title) を消す */
.line:not(.line-title) {
counter-increment: line;
}
/* タイトルから数えるときは :not(.line-title) を消す */
.app:not(.presentation) .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;
}
/* カーソル行の行番号を濃く表示する */
.line:not(.line-title)::before {
opacity: 0.5;
}
.line.cursor-line:not(.line-title)::before {
opacity: 1;
font-weight: bolder;
}
}