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.

[talatkuyuk]

I've created a rehype plugin for line numbering and line highlighting for code blocks.

You can reach to rehype-highlight-code-lines on github and on npm.

Important

You need to use rehype-highlight before rehype-highlight-code-lines. They work together like a charm.

See some examples for rehype-highlight and rehype-highlight-code-lines work together.

• demo blog application using next-mdx-remote-client within Next.js app router
• demo blog application using next-mdx-remote-client within Next.js pages router

A snapshot from above apps:

May I request that the author would add rehype-highlight-code-lines to the README.md home page and promote it?.

[wooorm]

yes, sure, that’s good! Could go in “related” (https://github.com/rehypejs/rehype-highlight#related). And maybe somewhere else too?

[talatkuyuk]

Thanks @wooorm . Line numbering and line highlighting is another most demanded feature align with code highlighting. For this reason, I want to get rehype-highlight-code-lines paired with rehype-highlight in the documentation. It could be more suitable to create a separate chapter after Example like below

Line Numbering and Line Highlighting

If it is suitable, I can create a PR, do I ?

[wooorm]

yeah an example is also fine :)

I don’t think you need to delve too deep, in the example. Something short and basic seems like enough to me? People can always read more about line numbering in your readme?

[talatkuyuk]

I've created the PR #32