Skip to content

feat: support custom starting line number in code blocks (#287)#407

Open
sleitor wants to merge 1 commit intovercel:mainfrom
sleitor:feat/code-block-start-line
Open

feat: support custom starting line number in code blocks (#287)#407
sleitor wants to merge 1 commit intovercel:mainfrom
sleitor:feat/code-block-start-line

Conversation

@sleitor
Copy link
Contributor

@sleitor sleitor commented Feb 19, 2026

Summary

Implements the feature requested in #287: support for custom starting line numbers in fenced code blocks via a startLine=N meta option.

Thanks to @haydenbleasel for the CSS workaround hint in the issue — this PR formalises it as a first-class feature!

Usage

```js startLine=10
const x = 1;
const y = 2;
```

Line numbers will begin at 10 instead of the default 1.

How it works

  1. remarkCodeMeta remark plugin (lib/remark/code-meta.ts) — forwards the fenced-code meta string to the hast code element as a metastring property, so it is available to the custom React code component.
  2. Sanitize schema — the default rehype-sanitize schema is updated to allow the metastring attribute on code elements.
  3. CodeComponent (lib/components.tsx) — parses startLine=N from metastring and passes it as a startLine prop to CodeBlock.
  4. CodeBlockBody (lib/code-block/body.tsx) — applies counter-reset: line N-1 as an inline style when startLine > 1. This overrides the Tailwind [counter-reset:line] class and makes CSS counters begin from the specified number.
  5. CodeBlock / HighlightedCodeBlockBody — the startLine prop is threaded through the component tree.

Changes

  • packages/streamdown/lib/remark/code-meta.ts — new remark plugin
  • packages/streamdown/index.tsx — import plugin, update sanitize schema, add to defaultRemarkPlugins
  • packages/streamdown/lib/components.tsx — parse startLine from meta, pass to CodeBlock
  • packages/streamdown/lib/code-block/index.tsx — add startLine prop
  • packages/streamdown/lib/code-block/highlighted-body.tsx — pass startLine through
  • packages/streamdown/lib/code-block/body.tsx — apply counter-reset style
  • packages/streamdown/__tests__/code-block-start-line.test.tsx — 12 new tests
  • .changeset/code-block-start-line.md — changeset

Tests

12 new tests covering:

  • remarkCodeMeta unit tests (plugin attaches/omits metastring correctly)
  • CodeBlockBody with startLine prop (correct CSS counter-reset value)
  • CodeBlock integration (renders with correct CSS for various startLine values)

All 804 tests pass.

Add support for specifying a custom starting line number via the code
fence meta string, e.g.:

```js startLine=10
const x = 1;
```

Implementation:
- Add `remarkCodeMeta` remark plugin that forwards the fenced-code meta
  string to hast as the `metastring` property so it is available to the
  custom React code component.
- Update the rehype-sanitize default schema to allow the `metastring`
  attribute on `code` elements.
- Parse `startLine=N` from the meta string in `CodeComponent` and pass
  the value down as a `startLine` prop.
- In `CodeBlockBody`, apply `counter-reset: line N-1` as an inline style
  when `startLine > 1`, which overrides the Tailwind counter-reset class
  and makes CSS counters begin from the specified number.
- Pass `startLine` through the `CodeBlock` and
  `HighlightedCodeBlockBody` call chains.
- Add 12 tests covering the remark plugin, CodeBlockBody prop, and
  CodeBlock integration.

Closes: resolves vercel#287
@vercel
Copy link
Contributor

vercel bot commented Feb 19, 2026

Someone is attempting to deploy a commit to the Vercel Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

Comments