New CodeBlock prop: lineNumber

[ucffool]

Describe what feature you'd like. Pseudo-code, mockups, or screenshots of similar solutions are encouraged!

The default would be 0 (hide).
If specified, such as 42, each line in the code block would be numbered sequentially on the left, starting with the specified value.

This is two features in one:

• The ability to add line numbers in the code block
• The ability to customize the starting line number.

This would be a standout feature, since most implementations of line numbering has no option to adjust the starting number.

What type of pull request would this be?

New Feature

Any links to similar examples or other references we should review?

No response

[endigo9740]

There's a number of improvements I want for code blocks, including line numbering, row highlighting, etc. But right now
we're limited in some regard to the way Highlight.js syntax highlighting works. It essentially manipulates the markup to add wrapping elements to add color highlighting.

A trivial example would be something like:

Before:

<div>Skeleton</div>

After Highlight.js processing:

<span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>Skeleton<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

So this concept of "lines" doesn't really exist, as everything gets scrambled a bit.

Long story short, some research is needed to see if there's a standardized way to do this. This may, however, involve moving away from Highlight.js in favor of another library that has this functionality build in.

Just want to set expectations here for what it'll take to implement something like this.

[bennymi]

A bit of a shameless plug, but @ucffool you might be interested in my SvHighlight library: https://github.com/bennymi/svhighlight

It was adapted from Skeleton's CodeBlock component and offers highlighting and some other features. There's no prop for starting line numbers yet but it's something that could be added.

[ucffool]

@bennymi I actually already had that starred! It's actually more than I need for this particular project but thanks for the reminder and shamefree plug.

[Hi-ImKyle]

Not sure if it's worth looking at but another UI called Mantine for React uses PrismJS for code highlighting, they are able to add the line numbers, though I'm not sure if PrismJS actually supports it out of the box so maybe you can take a peak at how they do it. Here's their page for the Prism component.

That being said I like @bennymi's library, just it doesn't really work for me, the lines are super spaced out for no reason from what I can tell so I'd like to ever so slightly push this to a potential final solution.

[endigo9740]

@Hi-ImKyle Yep we're aware of Prism. It was in the running alongside Highlight when we created the codeblock component. We just felt Highlight was friendlier since it doesn't require installing various language dependencies. Skeleton is about ease of use, so meshed well with our goals.

Doing a quick scan on the Prism docs, none of the examples use line numbers. So this may echo what I said in my previous comment - line numbers are a custom solution on top of the syntax highlighting from these libraries. If you can find documentation for how to enable this via Prism please do share.

FYI our code block can potentially support multiple syntax libraries, so again, we will consider Prism if they provide a turnkey solution for this.

[bennymi]

@Hi-ImKyle curious to see what you mean with the lines being too spaced out. If you have a screenshot of it could you open a issue for it on the github page so I can have a look at it?