pre.line-numbers {
  position: relative !important;
  padding-left: 3.8em !important;
  counter-reset: linenumber;
}

pre.line-numbers > code {
  position: relative;
}

.line-numbers .line-numbers-rows {
  position: absolute;
  pointer-events: none;
  top: 0;
  font-size: 100%;
  left: -3.8em;
  width: 3em; /* works for line-numbers below 1000 lines */
  letter-spacing: -1px;
  border-right: 1px solid #999;
  user-select: none;

}

.line-numbers-rows > span {
  pointer-events: none;
  display: block;
  counter-increment: linenumber;
}

.line-numbers-rows > span:before {
  content: counter(linenumber);
  color: #999;
  display: block;
  padding-right: 0.8em;
  text-align: right;
}

// line-highlight
// pre[data-line] {
//   position: relative;
//   padding: 1em 0 1em 3em !important;
// }
//
// .line-highlight {
//   position: absolute;
//   left: 0;
//   right: 0;
//
//   background: hsla(24, 20%, 50%,.08);
//   background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
//
//   pointer-events: none;
//
//   line-height: inherit;
//   white-space: pre;
// }

// .line-highlight:before,
// .line-highlight[data-end]:after {
//   content: attr(data-start);
//   position: absolute;
//   top: .4em;
//   left: .6em;
//   min-width: 1em;
//   padding: 0 .5em;
//   background-color: hsla(24, 20%, 50%,.4);
//   color: hsl(24, 20%, 95%);
//   font: bold 65%/1.5 sans-serif;
//   text-align: center;
//   vertical-align: .3em;
//   border-radius: 999px;
//   text-shadow: none;
//   box-shadow: 0 1px white;
// }
//
// .line-highlight[data-end]:after {
//   content: attr(data-end);
//   top: auto;
//   bottom: .4em;
// }
 
