コードの行番号を表示する
https://gyazo.com/bd9b8fac01f340c5dd9a4c6e75a38a0f
code:style.css
@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: 0.5;
}
.cursor-line .code-block code > span:not(class)::before { opacity: 1;
font-weight: bolder;
}
}