Line numbers for code blocks | Voters

Line numbers for code blocks

complete

Sebastian

Would be great to have an option for adding line numbers to code blocks included with Docusaurus.

February 25, 2022

Joshua Chen

marked this post as

complete

Joshua Chen

marked this post as

in progress

Actually, now we have a PR for this: https://github.com/facebook/docusaurus/pull/7007

Joshua Chen

marked this post as

closed

Hi, you can easily do it through either swizzling the CodeBlock
 component, or through simple CSS.
.prism-code {
counter-reset: line-number;
}
.prism-code .token-line::before {
counter-increment: line-number;
content: counter(line-number);
margin-right: calc(var(--ifm-pre-padding) * 1.5);
text-align: right;
min-width: 1.5rem;
display: inline-block;
opacity: .3;
position: sticky;
left: var(--ifm-pre-padding);
}