Skip to content

feat: wrap line mode #21 - #84

Open
lvolland wants to merge 1 commit into
speed-highlight:mainfrom
lvolland:feat/wrap-line-mode
Open

feat: wrap line mode #21#84
lvolland wants to merge 1 commit into
speed-highlight:mainfrom
lvolland:feat/wrap-line-mode

Conversation

@lvolland

@lvolland lvolland commented Aug 1, 2026

Copy link
Copy Markdown
Contributor

{ wrap: true } on highlightText / highlightElement / highlightAll.

the reason this was never a one-liner: white-space: pre-wrap on the current markup wraps
the text fine, but the gutter is a separate column of one div per source line, so as soon as
a line wraps the numbers slide out of step with the code.

the middle panel is what people reach for today — by line 8 the gutter is lying:

today scrolls horizontally, naive pre-wrap desynchronises the gutter, wrap mode stays aligned

so in wrap mode each line becomes its own grid row — number cell, code cell — and a token
that spans a newline is split at the newline so every cell stays balanced.

highlightText(code, 'js', true, { wrap: true })

cost

dist/index.js         +94 bytes gzipped
dist/themes/*.css     +58 bytes gzipped

nothing else changes: the css goes in default.css, which every other theme already
@imports, and the number cells keep the shj-numbers class so the six themes that
recolour the gutter keep working.

verified

108/108   default output byte-identical to 1.2.19
          36 fixtures × { }, { hideLineNumbers }, multiline=false
36/36     wrap output: text reconstructs exactly, spans balanced inside every
          cell, one cell per source line
8/8       edge cases: empty, single line, crlf, trailing newline, only newlines,
          unterminated string, unterminated block comment, emoji + accents

notes

  • { wrap: true, hideLineNumbers: true } needs no grid at all, so it keeps the current
    markup and only flips white-space — no per-line splitting, no extra bytes in the output
  • counter-reset: line moves from .shj-numbers up to its parent. same result on the
    existing markup, and it lets the grid reuse the counter
  • wrap mode inherits the trailing-newline behaviour from the default path — the phantom last
    number. fix: a trailing newline adds a phantom line number #80 fixes that in the default path; happy to align both once you've picked a side
  • i did not touch dist/

@matubu matubu changed the title feat: wrap line mode feat: wrap line mode #21 Aug 1, 2026
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