CSS to Display Line Numbers in Code

Displaying line numbers in code

style.css

/* Display line numbers for code syntax - applied when window width is 768px or larger */
@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;
    
    /* Specify font, color, etc. for line numbers here */
    font-family: Menlo,Monaco,Consolas,"Courier New",monospace; color: grey }
  
  /* Display line numbers in a darker color for the cursor line */
  .code-block code > span:not([class])::before { opacity: .5 }
  .cursor-line .code-block code > span:not([class])::before { opacity: 1; font-weight: bolder } }