Hi @akiran! Thank you for putting this library out there. It seems that highlightJS supports using webworkers for better performance? Is that on your radar to support?

It looks like a horizontal scroller is hard to eliminate, due to a long line of code.

i'm importing markdown files
rendering via react-markdown

when do you support react 16?

Hello, we started getting build and deployment failures that I traced to this package. An example error is one such as below:

ERROR in 33-chunk-ad7e81b972059fad92fe.js from UglifyJs
Unexpected token: keyword (const) [./node_modules/highlight.js/lib/languages/reasonml.js:36,0][33-chunk-ad7e81b972059fad92fe.js:18860,2]

This is because the highlight.js package recently introduced code using const, which breaks UglifyJS: highlightjs/highlight.js@1c70469.

I fixed this for my team's purposes by forking this repo and setting highlight.js to version 9.11.0:
https://github.com/drewmoore/react-highlight/blob/9eb2b4cdab046fda8317e6ca03ab0483b9a955ff/package.json#L28

I would be happy to submit a PR if you would like. This issue has been reported on the highlight.js repo at highlightjs/highlight.js#1871

I want to use component more semantic.

The common usage is:

<Highlight className='language-name-of-snippet'>
  {"code snippet to be highlighted"}
</Highlight>

If I want to use Javascript. Maybe it can use like:

var JS = require('react-highlight').JS;

<JS>
  {"code snippet to be highlighted"}
</JS>

It is more semantic and doesn't write the className. :)

Hi I am getting following error:

DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Please help me into this.

React.createClass has been deprecated and extracted to it's own package since React v15.5.0.

The following warning is displayed if that version of React is used:
Warning: Highlight: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

See Migrating from React.createClass to fix this.

This could be a temporary fix, but I think moving to ES6 classes is more appropriate :-)

I noticed this issue when I saw all the PR tests failing. See jsdom/jsdom#2304 for more info.

"main": "index.jsx", should be "main": "index.js", with out the x. Thanks for the lib!

EDIT

This was the result of an npm install moments ago, version 0.5.0.

$ npm install react-highlight --save
npm WARN install Couldn't install optional dependency: Unsupported
[email protected] /home/rs55df/Workspace/redux
├── UNMET PEER DEPENDENCY highlight.js@^8.4.x
└── [email protected] 

npm WARN EPEERINVALID [email protected] requires a peer of highlight.js@^8.4.x but none was installed.
npm WARN EPACKAGEJSON [email protected] No repository field.
npm WARN EPACKAGEJSON [email protected] No license field.

I tried checking whether I could fix this myself, but I couldn't get the tests to run locally, encountering the same errors as in the build that is failing: https://travis-ci.org/akiran/react-highlight/builds/84639338

highlight.js has a nice tabReplace option, is it possible to use it within react-highlight?

After a state change in my component, causing a render, the highlighting disappears..

npm WARN peerDependencies The peer dependency highlight.js@^8.4.x included from react-highlight will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.

highlight.js also makes more sense as a regular dependency.

I am trying to run npm install on my package.json and got this error when installing with react-highlight added in package.json file.

npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: Use uuid module instead
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: The major version is no longer supported. Please update to 4.x or newer
npm WARN [email protected] requires a peer of jest@>=22.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of jest@>=22.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of babel-eslint@^7.2.3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of eslint-plugin-jsx-a11y@^5.1.1 but none is installed. You must install peer dependencies yourself.

npm ERR! path /node_modules/highlight.js/tools/build.js
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall chmod
npm ERR! enoent ENOENT: no such file or directory, chmod '/node_modules/highlight.js/tools/build.js'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     /.npm/_logs/2019-02-25T09_40_49_597Z-debug.log```


Can someone help me with this ?

Let's say I have something like:

const url = "https://github.com/";

Is there a way to make the link clickable when I render it?

Hi I am getting following error:

DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Please help me into this.

Many webpack configs don't build dependencies due to hot-loading issues, performance, and etc. It's hard to integrate this package if you require it to be built for usage.

Hi,

Content which are loaded dynamically are only getting highlighted on page load . Content is not getting updated inside when component is re-rendered .

It's too big for size

How can i update the dynamic content with the below mentioned component
<Highlight language="javascript">{}`

Actual Result:

Expected Result:

react-addons-test-utils has been deprecated and has been put in the react-dom package since React v15.5.0.

Module not found: Can't resolve 'react/lib/React' in 'D:\yyyfed\YYYFE\node_modules.15.6.2@react-dom\lib

Module not found: Can't resolve 'react/lib/React' in 'D:\yyyfed\YYYFE\node_modules.15.6.2@react-dom\lib'

How to format CURL codes in highlightJS component
Note: Page goes blank when trying to add curl commands in react application

Warning: Highlight.getDOMNode(...) is deprecated. Please use ReactDOM.findDOMNode(instance) instead.

Juste a suggestion for Syntax highlighting of mutiple code snippets.

Replace innerHTML into the next version by dangerousInnerHTML

<Highlight innerHTML={true}>
  {"html with multiple code snippets"}
</Highlight>

Like this:

<Highlight dangerousInnerHTML={true}>
  {"html with multiple code snippets"}
</Highlight>

or juste like this.

<Highlight dangerousInnerHTML>
  {"html with multiple code snippets"}
</Highlight>

Already used the optimized version, but it seems does not work.
js/dll/test-81b69cb11034e487ea3b.min.js 652 kB 0 [emitted] test

The minimal solution for this react component 💃

import React, { Component, PropTypes } from 'react'
import hljs from 'highlight.js/lib/highlight'
import javascript from 'highlight.js/lib/languages/javascript'
import php from 'highlight.js/lib/languages/php'
import python from 'highlight.js/lib/languages/python'
import sql from 'highlight.js/lib/languages/sql'
import objectivec from 'highlight.js/lib/languages/objectivec'
import 'highlight.js/styles/tomorrow.css'

const propTypes = {
  children: PropTypes.any
}

class CodeBlock extends Component {
  componentDidMount() {
    hljs.registerLanguage('javascript', javascript)
    hljs.registerLanguage('php', php)
    hljs.registerLanguage('python', python)
    hljs.registerLanguage('sql', sql)
    hljs.registerLanguage('objectivec', objectivec)

    hljs.highlightBlock(this.element)
  }

  render() {
    return (
      <pre ref={ref => { this.element = ref }}>
        <code>
          {this.props.children}
        </code>
      </pre>
    )
  }
}

CodeBlock.propTypes = propTypes

export default CodeBlock

Hi @akiran , it would be possible to add the possibility of adding the line number.

The styles will most likely be in node_modules/highlight.js/styles folder.

Why would I have a highlight.js in my node_modules if I have installed the package with

npm install react-highlight --save

Should I install in parallel highlight.js ? In your package.json, there is :

"dependencies": {
   "highlight.js": "^9.6.0"
}

Which means the package should be under node_modules/react-highlight/node_modules/highlight.js/styles

Re-Rendering the code and creating multiple nested span when there is an action in the page

for ex: if there is an button click and the block getting re-rendered and adding many nested span for the existing span elements

Hi , i try to change the style sheet in html file of create-react-app , but it seems that only one dark theme is being applied for highlight. I tried Github and monokai sublime style sheets , it doesnt seem to work. Please help !

It seems the current highlight.js version has a vulnerability as outlined here: GHSA-7wwv-vh3v-89cq

If this is still planned for maintenance, I can issue a PR.

Highlight JS has some new maintainers after a period of slow development and can be expected to be going through some more rapid changes in the coming weeks and months. I expect that users of this lib (myself included) will have requests to bump the highlightJS dependency to get the new goods.

I was think that, given this is largely just a wrapper library, that is might make sense to mirror the major/minor release numbers for an easy reference. This would, of course, make it awkward to release additional features to the wrapper without waiting and bundling with highlight releases, but if the maintainers feel this library is essentially done outside of future hightlightJS it would probably be fine.

Upgraded to React 16 last night and now the react highlight throws the above error

When you install react highlight by npm or yarn, index.js points to lib/index.js which does not exist. You need to probably make compiled code public. It seems that it relates only to 0.11.0 version.

Requesting a live demo so I can see how it works before downloading

I have a piece of code that contains some dropdowns, it should allow the user to pick some values to place in the code.

When I try to highlight my component, the onChange events of the select stop working. Is there a solution?

I realize that highlight.js has a very large bundle but I suggest passing an array prop to define the languages they want to import. My highlight.js currently takes up 539kb parsed size and 188kb gzipped. This is over half of my bundle and six times more than react.

I should be able to work on this in the upcoming weeks.

I'm getting this error when trying to use this package:

Error: ENOTDIR, stat '/path/src/node_modules/react-highlight/package.json/node_modules/reactify'

I'm using React 0.12.0 and Express 3.4.8

Any idea of how to fix it?

Could we get a support to graphql language?

is it normal?

I'm getting the following error from the package:
Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

I'm having an issue with this package where it's not highlighting the code I'm feeding it, or even applying the classes I expect it to give it. I've attached two images one of an error I'm getting in the console, and one of the generated HTML.

I upgraded to the latest version and I'm running react 15.1. Is this a know issue or am I just missing somthing obvious.