Created
September 21, 2020 20:32
-
-
Save uditalias/3969a20ef759bf3a8757499429b30063 to your computer and use it in GitHub Desktop.
Adding line numbers to Docusaurus 2 CodeBlocks using only CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Edit the `src/css/custom.css` file and add the following styles */ | |
| /* | |
| * Reset the line-number counter for each .prism-code scope | |
| */ | |
| .prism-code { | |
| counter-reset: line-number; | |
| } | |
| /* | |
| * Notice the chained .language-ts class name to .prism-code | |
| * You can chain more languages in order to add line numbers | |
| */ | |
| .prism-code.language-ts .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: 2.5rem; | |
| display: inline-block; | |
| opacity: .3; | |
| position: sticky; | |
| left: var(--ifm-pre-padding); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://docusaurus.io/docs/markdown-features/code-blocks#line-numbering
I think you can add this property to the code-block to be able to see line numbers.