react-syntax-highlighter

New major version!

16.0.0 brings a major version update to the refractor dependency, which remedies some security issues but could result in a breaking change to your app's dependencies. Please update with care.

What's Changed

• Update refractor to version 5 by @lodinukal in https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/604

New Contributors

• @lodinukal made their first contribution in https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/604

Full Changelog: https://github.com/react-syntax-highlighter/react-syntax-highlighter/compare/v15.6.6...v16.0.0

Updated overrides block attempting to solve transitive prismjs dependency issue:

"overrides": {
    "prismjs": "^1.30.0",
    "refractor": {
      "prismjs": "^1.30.0"
    }
  }

Full Changelog: https://github.com/react-syntax-highlighter/react-syntax-highlighter/compare/v15.6.5...v15.6.6

What's Changed

• Bump elliptic from 6.5.5 to 6.6.0 by @dependabot[bot] in https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/576
• Bump ws from 6.2.2 to 6.2.3 by @dependabot[bot] in https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/574
• Bump express from 4.19.2 to 4.21.1 by @dependabot[bot] in https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/572
• Bump send and express by @dependabot[bot] in https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/571
• Bump cookie and express by @dependabot[bot] in https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/570
• Bump serve-static and express by @dependabot[bot] in https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/569
• Bump body-parser and express by @dependabot[bot] in https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/568
• Add Boemly to the built with section of the readme by @lukasbals in https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/467

New Contributors

• @lukasbals made their first contribution in https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/467

Full Changelog: https://github.com/react-syntax-highlighter/react-syntax-highlighter/compare/v15.6.4...v15.6.5

What's Changed

• Override refractor 3.6.0's prismjs dependency by @simmerer in https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/605

Full Changelog: https://github.com/react-syntax-highlighter/react-syntax-highlighter/compare/v15.6.3...v15.6.4

What's Changed

• fix line count error by @bbbert in https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/583
• fix spelling error by @BrianHung in https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/579

New Contributors

• @bbbert made their first contribution in https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/583
• @BrianHung made their first contribution in https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/579

Full Changelog: https://github.com/react-syntax-highlighter/react-syntax-highlighter/compare/v15.6.2...v15.6.3

What's Changed

• Upgrade prismjs dependency by @SMG-717 in https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/599
• removed languages unsupported by highlight.js by @sammaji in https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/586

New Contributors

• @SMG-717 made their first contribution in https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/599
• @sammaji made their first contribution in https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/586

Full Changelog: https://github.com/react-syntax-highlighter/react-syntax-highlighter/compare/v15.6.1...v15.6.2

• Fix: #487 Fix: Allow override of display: styles when wrapLongLines is true

Been awhile! 😰

• Feat: #555 Add Vue language support
• Feat: #534 Add a11yOneLight theme
• Bugfix: #561 Fix bug with wrapLines that butchers highlighting
• Docs: #559 Adding languages

• https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/466: updated prismjs to 1.27.0, fixing the XSS vuln mentioned in https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/461

As noted in the PR, updating prism usually brings along a few surprises; this one gave us a new programming language named false, which as you can imagine is fun to import and parse within Javascript.

Thanks to everyone for your patience. We'll be getting back in the groove of regular releases here.

Fixed a version-pin regression for highlight: we're now at highlight 10.4.1 and lowlight 1.17.0 as intended.

Thanks for @tu4mo for catching this one!

Updates

• bumped lowlight to 1.17.0 to resolve highlight dependency version mismatches: https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/344

Thanks to @aurelien-reeves for his first PR here!

Bugfixes

• prevented an inadvertent last-line line number from appearing: https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/341
• increased inline line number minwidth by .25em to avoid code misalignments: https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/342

Updates

Bumped highlight.js to 10.4.1, fixing a security vulnerability. This brought along a few additions:

New highlight languages

• nodeRepl (node-repl)

New highlight styles

• gradientLight
• stackoverflowDark
• stackoverflowLight

Bugfix

• @karlhorky added a fourth level of powerset permutations, ensuring nested objects end up with the correct combination of classnames

Updates

• prismjs 1.22.0
• refractor 3.2.0
• prism-themes 1.5.0

This adds three new Prism themes:

• coldark-cold
• coldark-dark
• coy-without-shadows

And eight new Prism-supported languages:

• birb
• bsl
• mongodb
• naniscript
• purescript
• sml
• stan
• typoscript

Bugfixes

• Corrected an incorrect link to react-syntax-highlighter-virtualized-renderer in the README

Thanks to @dschaller, @cheapsteak, and @karlhorky for contributing!

Bugfix

• https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/317 - Minor fix related to yesterday's 15.2.0 release (thank you for taking care of this, @karlhorky)

Changes

• https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/314 - Updates style-applying logic. Language-specific styles for a given theme can now override the default styling of that theme.

Thanks again to @karlhorky, who is on a roll here!

Changes

• https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/313 - updated to prism-themes 1.4.1

Just a minor update to regenerate local Prism themes that employed nested token styling:

• darcula
• shades-of-purple
• synthwave84
• vs

Check 'em out in the Prism demo.

Changes

• https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/305 - Corrects a longstanding flaw in our token highlighting, allowing styling of nested tokens via CSS. Technically a breaking change for theme styling, though it fixes a feature that didn't actually work for themes prior to this anyway!

Props to @karlhorky for incredibly detailed and patient work on this.

Bugfix

• Show line numbers only when showLineNumbers == true - https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/312 (thanks to @AbhyudayaSharma for this one!)

Added tests

• explicitly test combinations of showLineNumbers and showInlineLineNumbers for expected behavior

Changes

See https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/309 for details.

TL;DR:

• New prop: wrapLongLines
• New default prop value: showInlineLineNumbers={true}

Yes that's a confusingly-named prop. We'll fix that soon

This could be a breaking change if you're using showLineNumbers and are expecting a separate <code> element containing your line numbers. If you want to keep that behavior, you'll now need to explicitly pass showInlineLineNumbers={false}

• Thanks to the new wrapLongLines functionality, RSH applies explicit white-space styling on the <code> tag.

This could be a breaking change if the inline style overrides a white-space property that you're supplying via external CSS.

Documentation update again

Remembered to update CHANGELOG at the same time as version change. We'll get this right from now on!

Documentation update

• recreated/updated CHANGELOG for versions 10.x through current, fixing https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/214

Bugfix:

• https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/301: brought back createElement that went missing as of version 13.5.

import createElement from "react-syntax-highlighter/create-element";

Thanks to @samuela for spotting this one.

Enhancements

• https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/299: clean up old files in project root, add jest to eslint

Grateful to @ktmud for stepping in with that improvement.

Dependency updates

• https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/300: Updated to refractor 3.1.0, which brings in prismjs 1.21.0. We'd pinned react-syntax-highlighter 13.3.1 to prismjs 1.21.0, but didn't realize that refractor's dependency would keep us at 1.20.0

Bugfixes

• JS error when using lineNumberStyle() for inline line numbers (https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/296)
• incorrect 'hljs' className applied to <pre> when using Prism (https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/297)

Enhancements

• added ESLint (https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/298)
• added favicon to demo (https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/295)
• new addition to the "built with" list (https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/293)

Thanks to @ktmud for jumping in with contributions!

Updates

• prism updated to 1.21.0, with lots of improvements: CHANGELOG for prism 1.21.0
• added Github repo link to the upper right corner of demo pages

Bugfixes

• https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/287 - Truncated Prism shell-session language command output
• https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/285 - Incorrect syntax highlighting for mutli-line comments
• https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/278 - Unexpected behavior with useInlineStyles={false}

Thanks to @urish and @prichey for contributing PRs!

Minor bugfix: neglected to include rebuilt "Prism async light" demo files in 13.2.0 release

• Updates our prism-themes dependency to pull in new themes, including vsc-dark-plus
• Prism async demo now dynamically loads autogenerated Prism themes list (EDIT: neglected to include built demo files, fixed in 13.2.1)

New Prism themes available

• a11yDark
• dracula
• materialDark
• materialLight
• materialOceanic
• nord
• shadesOfPurple
• synthwave84
• vscDarkPlus

Updates to demos

• indicate that Highlight powers the default demo
• restored Prism demo that went missing in 13.0.0
• autogenerate demo-specific style lists (and add a comment to autogenerated files pointing out that they're autogenerated)
• demos now autoload full lists of languages and styles from highlight/prism
• minor UI adjustments

Updates

• latest highlight ^10.1.1 and lowlight ^1.14.0 dependencies
• latest refractor ^3.0.0 and prism ^1.20.0 dependencies
• updated/fixed tests
• updated demos
• CircleCi v2 config added

New API features

showInlineLineNumbers prop

<SyntaxHighlighter
  showLineNumbers={true} // required to show line numbers, whether inline or not
  showInlineLineNumbers={true} // render them inside wrapped lines, instead of as a separate <code> block
  renderer={virtualizedRenderer({
    rowHeight: 20
  })}
>
  {code}
</SyntaxHighlighter>

When paired with showLineNumbers={true}, showInlineLineNumbers={true} injects line numbers into each wrapped line of code, instead of creating a separate <code></code> block for the numbers. This allows line numbering to work with virtualized renderers such as react-syntax-highlighter-virtualized-renderer.

Inline line numbers are styled so that they're not selected when drag-selecting multiple lines of highlighted text, preserving expected behavior.

Breaking changes

• If you rely on the darkula theme from highlight.js, highlight v10 has renamed that style to darcula.

Highlight v10 introduced some breaking changes for us here which we've worked around, but shouldn't cause breakage for most people relying on react-syntax-highlighter and not consuming highlight.js directly.

Supported languages

Note: react-syntax-highlighter provides an automated build wrapper around styles and languages provided by highlight.js (via lowlight) and prism (via refractor). Changes here are simply describing what's changed in those libraries. If you'd like to see another language or style added, please contribute to those libraries.

New highlight.js languages

• cLike (c-like)
• c
• latex
• phpTemplate (php-template)
• pythonRepl (python-repl)

Renamed/removed highlight.js languages

• cs (renamed to csharp)
• nimrod (renamed to nim)
• tex (removed)

New prism.js languages

• antlr4
• aql
• bbcode
• brightscript
• concurnas
• dax
• etlua
• excelFormula (excel-formula)
• factor
• firestoreSecurityRules (firestore-security-rules)
• ftl
• gdscript
• latte
• llvm
• moonscript
• neon
• powerquery
• qml
• robotframework
• solidity
• solutionFile (solution-file)
• sparql
• sqf
• turtle
• zig