search

shikijs / twoslash

You take some Shiki, add a hint of TypeScript compiler, and 🎉 incredible static code samples
https://shikijs.github.io/twoslash/
MIT License
1.08k stars 54 forks source link

Can't really add line numbers because of how empty lines are treated. #65

Closed benlesh closed 3 years ago

benlesh commented 3 years ago

I can almost add line numbers like this:

pre.shiki {
  counter-reset: lineNumber;
}

pre.shiki div.line::before {
  user-select: none;
  border-right: 1px solid #404040;
  color: #858585;
  content: counter(lineNumber);
  counter-increment: lineNumber;
  display: inline-block;
  font-variant-numeric: tabular-nums;
  margin-right: 1.2em;
  padding-right: 1.2em;
  text-align: right;
  width: 2.4em;
}

The result is SO CLOSE:

image

However... when I do that it doesn't work properly with empty lines, because this seems to leverage \n inside of the <code> element, instead of adding something like <div class="line">&nbsp;</div> or the like. (NOTE: The reason I suggest the &nbsp; here, is because if the div is simply empty, then user's can't really select and copy and paste the newline, TMK.)