コードブロックにCSSだけで行番号を表示する - Qiita

下図のようにコードブロックにCSSで行番号を表示する方法を紹介します。 前提 CSSで行番号を表示するにあたって、コードブロックのHTMLは行が<span>などの要素で表現されている必要があります。 行番号を表示するCSS 行番号を表示するCSSは次のようになります。 .code { counter-reset: line-number; } .code span { counter-increment: line-number; display: list-item; padding-left: 1rem; margin-left: 1rem; } .code span::marker { content: counter(line-number); color: #aaa; }