Custom line numbering

[rojakcoder]

So we can add line numbers to code blocks now. I'm wondering if we can change the starting line number?

So, instead of lines 1-3 for this code block:

1. console.log('First line');
2. console.log('Second line');
3. console.log('Third line');

Can we have it starting from, say, 6:

6. console.log('First line');
7. console.log('Second line');
8. console.log('Third line');

[slorber]

I'm wondering if we can change the starting line number?

we don't provide this feature but you can swizzle the code block logic and implement it your self if you want

What's your motivation to do so, which API would you use to achieve it, and which docs system supports this already?

[rojakcoder]

The motivation is to indicate a specific section in the file so that readers can see which part of the file quickly. Frankly, I haven't seen this in other systems before.

[dschiller]

Absolutely agree and there is Material for MkDocs supporting that at https://squidfunk.github.io/mkdocs-material/reference/code-blocks/#adding-line-numbers

[slorber]

Thanks for the reference

It seems that we can achieve it quite easily, simply by adding a CSS rule such as counter-reset: line-count 3; anywhere above the lines.

<div style={{"counter-reset": "line-count 3"}}>

```jsx showLineNumbers
import React from 'react';

function MyComponent(props) {
  if (props.isBar) {
    return <div>Bar</div>;
  }

  return <div>Foo</div>;
}

export default MyComponent;
```

</div>

Not an ideal solution though, but at least it works:

[slorber]

Implemented in #10846