Line numbers for Docusaurus 2

gistfile1.txt

// Based on https://gist.github.com/uditalias/3969a20ef759bf3a8757499429b30063
// Reduces number gutter and adds border

/* 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-js .token-line::before,
.prism-code.language-ts .token-line::before,
.prism-code.language-go .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);
  border-right: 1px solid;
  padding-right: 0.5rem;
}