Skip to content

wrapLongLines + line numbering with wrapped lines #309

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 14 commits into from
Oct 2, 2020

Conversation

simmerer
Copy link
Collaborator

Fixes #235 and introduces a few API & styling changes along the way.

  1. New prop: wrapLongLines
  2. New default prop value: showInlineLineNumbers = true
  3. Explicit white-space styling on <code> tag

1. New prop: "wrapLongLines"

wrapLongLines takes care of adding white-space: pre-wrap styling to the <code> tag: no need to do this yourself via CSS or codeTagProps anymore.

There are a few potential consequences of this new prop.

Containing elements around each line

If you've set wrapLongLines={true}, React Syntax Highlighter will wrap each line of code in its own <span>, just as if you'd explicitly set wrapLines={true}.

This could be a breaking change for anyone who is currently:

  • manually setting white-space: pre-wrap on their <code> element
  • has wrapLines={false} or is using Prism, which defaults to not creating containing elements around each line's elements
  • is theming with CSS direct-descendant selectors that would break if there was a containing element around each line's elements

wrapLines is another awkward prop name that should eventually be changed, because it affects containing elements, not text-wrapping. wrapLongLines now actually does what some people mistakenly thought wrapLines would do.

display: flex to provide long-line wrapping that doesn't flow into the line number area

If you're using wrapLongLines={true} and are showing line numbers (showLineNumbers={true}), we'll now style each line element with display: flex.

This overrides the display: block styling that most themes apply to each line.

Probably won't be a noticeable change for most users, but if you see any unexpected line-height changes with this change, that's probably the cause.

2. New default prop value (potentially breaking change)

showInlineLineNumbers = true

The old default for line numbering (showLineNumbers + showInlineLineNumbers = false) created a separate <code> element containing all line numbers.

This was problematic when using a virtualized renderer or when applying white-space: pre-wrap to the code area. Since having line numbers inside each line element is advantageous in several cases, I think it should become the default method of rendering line numbers.

showInlineLineNumbers is confusingly named, I admit: it should have been "preferInlineNumbering" or "putLineNumbersInline", since showLineNumbers is still the prop that controls whether or not line numbers are visible at all.

3. Explicit white-space styling on <code> tag (potentially breaking change)

In order to set white-space: pre-wrap when wrapLongLines={true}, RSH now explicitly sets white-space: pre when in the default state of wrapLongLines={false}. If you've manually applied white-space: pre-wrap via codeTagProps or your theme CSS, this might override your intended styling.

The workaround here is to migrate to using the new wrapLongLines={true} prop, which will provide the pre-wrap styling for you.

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.

Wrap long lines not working
2 participants