Line Numbers

[jimthedev]

Hello there. I think this looks really neat and was curious if line numbers was something that would be possible to add and if you'd be open to it as the maintainer?

Thanks!

[andreruffert]

Hello there. I think this looks really neat and was curious if line numbers was something that would be possible to add and if you'd be open to it as the maintainer?

Thanks!

@jimthedev thanks for sharing this idea! :)

Currently I don't see "line numbers" as part of the component itself. I personally prefer composition of components wherever it makes sense. @zachleat made a <line-numbers> web component to add line numbers next to various HTML elements.

It works super well in combination with the <syntax-highlight> element e.g.

👀 https://codepen.io/andreruffert/pen/vEOqyGr

Would that work in your case, or would you encounter any limitations?

[jimthedev]

Wow that is very cool. I didn't know about that component and that they'd compose. Perhaps just a mention of this possibility to compose in the docs would be enough then, or people can find this discussion.

[Danny-Engelman]

Or create your own extended Web Component

Starting point:

  customElements.whenDefined("syntax-highlight").then(SyntaxHighlight=>{
   customElements.whenDefined("line-numbers").then(LineNumbers=>{
    customElements.define("syntax-highlight-linenumbers",class extends SyntaxHighlight{