akiran / react-highlight Goto Github PK
View Code? Open in Web Editor NEWReact component for syntax highlighting
Home Page: https://react-highlight.neostack.com/
License: MIT License
React component for syntax highlighting
Home Page: https://react-highlight.neostack.com/
License: MIT License
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.
Warning: Highlight.getDOMNode(...) is deprecated. Please use ReactDOM.findDOMNode(instance) instead.
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'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?
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
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.
Hi @akiran , it would be possible to add the possibility of adding the line number.
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.
is it normal?
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 !
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 ?
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?
└─┬ [email protected]
├── UNMET PEER DEPENDENCY jasmine-core@*
├── UNMET PEER DEPENDENCY karma@>=0.9
├── [email protected]
├── [email protected]
└── UNMET PEER DEPENDENCY phantomjs@>=1.9
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.
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.
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>
highlight.js has a nice tabReplace option, is it possible to use it within react-highlight?
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.
i'm importing markdown files
rendering via react-markdown
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?
"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
.
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. :)
$ 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
It's too big for size
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.
Upgraded to React 16 last night and now the react highlight throws the above error
Requesting a live demo so I can see how it works before downloading
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.
After a state change in my component, causing a render, the highlighting disappears..
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
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 :-)
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
react-addons-test-utils
has been deprecated and has been put in the react-dom
package since React v15.5.0.
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.
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.
How to format CURL codes in highlightJS component
Note: Page goes blank when trying to add curl commands in react application
when do you support react 16?
I noticed this issue when I saw all the PR tests failing. See jsdom/jsdom#2304 for more info.
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'
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?
Could we get a support to graphql language?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.