Add support for line numbers

[L-Steinmacher]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Problem

Currently there is no easy way to add line numbers for the parsed code as each individual element is a span. the usual way in css to add line nubers is to add a before on the span such as

pre span::before {
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  width: 2em; /* Adjust as needed to suit your design */
  text-align: right;
  margin-right: 0.5em; /* Adjust as needed to suit your design */
  color: #999; /* Adjust the color as needed */
}

Solution

Add a wrapper span with special class to more easily add line numbers to code blocks.

Alternatives

If there is a current solution that I'm missing please inform me.

[wooorm]

Hey!

There’s an example with starry-night: https://github.com/wooorm/starry-night#example-adding-line-numbers.
That should likely work here, perhaps with minor adjustments.
I’m open to a similar example here. Not sure it should go in the project though. Perhaps.

[L-Steinmacher]

Thank you for posting these examples! I don't know if only one example will do it for me right now. Here is my current setup with Unified

import remarkParse from 'remark-parse'
import remarkGfm from 'remark-gfm'
import { type Plugin, unified } from 'unified'
import remarkRehype from 'remark-rehype'
import rehypeStringify from 'rehype-stringify'
import rehypeHighlight from 'rehype-highlight'

export default async function markdownToHtml(markdown: string) {
  const result = await unified()
    .use(remarkParse as Plugin)
    .use(remarkGfm)
    .use(remarkRehype)
    .use(rehypeHighlight)
    .use(rehypeStringify)
    .process(markdown)
  return String(result)
}

Would you suggest using the stand alone function to call on the parsed html or integrate into the Unified call? Sorry for the newb questions.

[wooorm]

Sorry for the newb questions.

No problem!

remarkParse as Plugin

That shouldn’t be needed?

Would you suggest using the stand alone function to call on the parsed html or integrate into the Unified call

starry-night is a little lower. It only does the AST. It isn’t on the level of plugins.
Here we are on that level. So it needs to be wrapped in a plugin.
ASTs are complex, but very powerful. So I’d recommend taking some time to play and learn with everything.

So, you’d need to write a rehype plugin that runs after this plugin. Then it would look for code blocks that were transformed, and add this gutter. The code for how to add the gutter should be very similar to that example in starry-night, but now operator on that node instead of an entire AST.

Feel free to ask more Qs!

[Caellian]

An approach I took from pure JS was just inserting a column flex with span elements for each line, make pre a flex as well, and number lines and content lines have same font properties so the text matches.