.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "env",
+    "react"
+  ]
+}

.eslintrc

@@ -0,0 +1,24 @@
+{
+  "rules": {
+    "no-extra-parens": 0,
+    "react/jsx-uses-vars": 1,
+    "global-strict": 1,
+    "quotes": [2, "single"],
+    "no-underscore-dangle": 0,
+    "space-infix-ops": 0,
+    "no-alert": 0
+  },
+  "ecmaFeatures": {
+    "jsx": true,
+  },
+  "env": {
+    "node": true,
+    "browser": true,
+    "es6": true,
+    "jasmine": true
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+      "react"
+  ]
+}

.gitignore

@@ -28,3 +28,5 @@ node_modules
 .lock-wscript
 .sass-cache
 build
+lib
+package-lock.json

.npmignore

@@ -0,0 +1 @@
+build

.travis.yml

@@ -0,0 +1,3 @@
+language: node_js
+node_js:
+  - "stable"

README.md

@@ -1,24 +1,51 @@
 # react-highlight
+
 React component for syntax highlighting using highlight.js
 
+![Build Status](https://travis-ci.org/akiran/react-highlight.svg?branch=master)
+
+### Latest version
+
+`0.11.1`
+
+## [Documentation](https://react-highlight.neostack.com/)
+
+### CodeSandbox Example
+
+[![Edit new](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/mj6wlmor9p)
+
 ### Installation
+
 ```bash
   npm install react-highlight --save
-``` 
+```
 
 ### Usage
+
 #### Importing component
+
 ```js
-  var Highlight = require('react-highlight');
+import Highlight from 'react-highlight'
 ```
 
 #### Adding styles
+
 Choose the [theme](https://highlightjs.org/static/demo/) for syntax highlighting and add corresponding styles of highlight.js
+
 ```css
   <link rel="stylesheet" href="/path/to/styles/theme-name.css">
 ```
 
+The styles will most likely be in `node_modules/highlight.js/styles` folder.
+
+Props:
+
+* className: custom class name
+* innerHTML: enable to render markup with dangerouslySetInnerHTML
+* element: render code snippet inside specified element
+
 #### Syntax highlighting of single code snippet
+
 Code snippet that requires syntax highlighting should be passed as children to Highlight component in string format. Language name of code snippet should be specified as className.
 
 ```html
@@ -28,13 +55,14 @@ Code snippet that requires syntax highlighting should be passed as children to H
 ```
 
 #### Syntax highlighting of mutiple code snippets
+
 Set `innerHTML=true` to highlight multiple code snippets at a time.
 This is especially usefull if html with multiple code snippets is generated from preprocesser tools like markdown.
 
 **Warning:** If innerHTML is set to true, make sure the html generated with code snippets is from trusted source.
 
 ```html
 <Highlight innerHTML={true}>
-  {"html with multiple code snippets"} 
+  {"html with multiple code snippets"}
 </Highlight>
-```
+```

index.js

@@ -0,0 +1 @@
+module.exports = require('./lib');

package.json

@@ -1,10 +1,11 @@
 {
   "name": "react-highlight",
-  "version": "0.4.1",
+  "version": "0.14.0",
   "description": "React component for syntax highlighting",
-  "main": "index.jsx",
+  "main": "index.js",
   "scripts": {
-    "start": "./node_modules/.bin/gulp server"
+    "prepublish": "babel ./src --out-dir ./lib --plugins=transform-class-properties,transform-react-jsx --presets=env",
+    "test": "BABEL_ENV=test jest"
   },
   "repository": {
     "type": "git",
@@ -23,29 +24,37 @@
     "url": "https://github.com/akiran/react-highlight/issues"
   },
   "homepage": "https://github.com/akiran/react-highlight",
+  "dependencies": {
+    "highlight.js": "^10.5.0"
+  },
   "devDependencies": {
-    "autoprefixer-core": "^4.0.2",
-    "css-loader": "^0.9.0",
-    "gulp": "^3.8.10",
-    "gulp-ruby-sass": "^0.7.1",
-    "highlight.js": "^8.4.x",
-    "html-loader": "^0.2.3",
-    "jsx-loader": "^0.12.2",
-    "markdown-loader": "^0.1.2",
-    "multiline": "^1.0.1",
+    "autoprefixer": "^6.7.7",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-eslint": "^6.1.2",
+    "babel-jest": "^22.4.3",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-react-jsx": "^6.24.1",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
+    "eslint": "^3.19.0",
+    "eslint-plugin-react": "^6.10.3",
+    "html-loader": "^0.4.5",
+    "jest": "^22.4.2",
+    "jsx-loader": "^0.13.2",
+    "markdown-loader": "^2.0.0",
+    "multiline": "^1.0.2",
+    "node-libs-browser": "^2.0.0",
     "raw-loader": "^0.5.1",
-    "react": "*",
-    "react-hot-loader": "^0.5.0",
-    "sass-loader": "^0.3.1",
-    "style-loader": "^0.8.2",
-    "webpack": "^1.4.13",
-    "webpack-dev-server": "^1.6.6"
-  },
-  "peerDependencies": {
-    "highlight.js": "^8.4.x",
-    "react": "*"
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
+    "react-test-renderer": "^16.2.0",
+    "regenerator-runtime": "^0.11.1",
+    "webpack": "^3.6.0",
+    "webpack-dev-server": "^2.9.1"
   },
-  "browserify": {
-    "transform": "reactify"
-  }
+  "peerDependencies": {}
 }

src/index.js

@@ -0,0 +1,54 @@
+import hljs from 'highlight.js';
+import React from 'react';
+
+class Highlight extends React.Component {
+    constructor(props) {
+      super(props)
+      this.setEl = this.setEl.bind(this)
+    }
+    componentDidMount() {
+        this.highlightCode();
+    }
+
+    componentDidUpdate() {
+        this.highlightCode();
+    }
+
+    highlightCode() {
+        const nodes = this.el.querySelectorAll('pre code');
+
+        for (let i = 0; i < nodes.length; i++) {
+            hljs.highlightBlock(nodes[i])
+        }
+    }
+
+    setEl(el) {
+        this.el = el;
+    };
+
+    render() {
+        const {children, className, element: Element, innerHTML} = this.props;
+        const props = { ref: this.setEl, className };
+
+        if (innerHTML) {
+            props.dangerouslySetInnerHTML = { __html: children };
+            if (Element) {
+                return <Element {...props} />;
+            }
+            return <div {...props} />;
+        }
+
+        if (Element) {
+            return <Element {...props}>{children}</Element>;
+        }
+        return <pre ref={this.setEl}><code className={className}>{children}</code></pre>;
+    }
+}
+
+Highlight.defaultProps = {
+    innerHTML: false,
+    className: null,
+    element: null,
+};
+
+export default Highlight;

src/optimized.js

@@ -0,0 +1,59 @@
+import hljs from'highlight.js/lib/highlight';
+import React from'react';
+
+class Highlight extends React.Component {
+    componentDidMount() {
+        this.highlightCode();
+    }
+
+    componentDidUpdate() {
+        this.highlightCode();
+    }
+
+    highlightCode() {
+        const {className, languages} = this.props;
+        const nodes = this.el.querySelectorAll('pre code');
+
+        if ((languages.length === 0) && className) {
+            languages.push(className);
+        }
+
+        languages.forEach(lang => {
+            hljs.registerLanguage(lang, require('highlight.js/lib/languages/' + lang));
+        });
+
+        for (let i = 0; i < nodes.length; i++) {
+            hljs.highlightBlock(nodes[i])
+        }
+    }
+
+    setEl = (el) => {
+        this.el = el;
+    };
+
+    render() {
+        const {children, className, element: Element, innerHTML} = this.props;
+        const props = { ref: this.setEl, className };
+
+        if (innerHTML) {
+            props.dangerouslySetInnerHTML = { __html: children };
+            if (Element) {
+                return <Element {...props} />;
+            }
+            return <div {...props} />;
+        }
+
+        if (Element) {
+            return <Element {...props}>{children}</Element>;
+        }
+        return <pre ref={this.setEl}><code className={className}>{children}</code></pre>;
+    }
+}
+
+Highlight.defaultProps = {
+    innerHTML: false,
+    className: '',
+    languages: [],
+};
+
+export default Highlight;

test/highlight.test.js

@@ -0,0 +1,55 @@
+import Highlight from '../src'
+import ReactDOM from 'react-dom'
+import TestUtils from 'react-dom/test-utils'
+import ReactDOMServer from 'react-dom/server'
+import React from 'react'
+
+describe('highlight', () => {
+  test('should display text inside it', () => {
+    const text = TestUtils.renderIntoDocument(<Highlight>Some text</Highlight>)
+
+    expect(ReactDOM.findDOMNode(text).textContent).toBe('Some text')
+  })
+
+  test('should have pre and code tags in markup', () => {
+    const text = ReactDOMServer.renderToStaticMarkup(
+      <Highlight>Some text</Highlight>
+    )
+
+    expect(text).toBe('<pre><code>Some text</code></pre>')
+  })
+
+  test('should assign className prop', () => {
+    const text = ReactDOMServer.renderToStaticMarkup(
+      <Highlight className="html">Some text</Highlight>
+    )
+
+    expect(text).toBe('<pre><code class="html">Some text</code></pre>')
+  })
+
+  test('should render children in span', () => {
+    const text = ReactDOMServer.renderToStaticMarkup(
+      <Highlight element="span">Some text</Highlight>
+    )
+
+    expect(text).toBe('<span>Some text</span>')
+  })
+
+  test('should render innerHTML in span', () => {
+    const text = ReactDOMServer.renderToStaticMarkup(
+      <Highlight innerHTML={true} element="span">
+        Some text
+      </Highlight>
+    )
+
+    expect(text).toBe('<span>Some text</span>')
+  })
+
+  test('should accept innerHTML prop', () => {
+    const text = TestUtils.renderIntoDocument(
+      <Highlight innerHTML={true}>{'<div>Sometext</div>'}</Highlight>
+    )
+
+    expect(ReactDOM.findDOMNode(text).textContent).toBe('Sometext')
+  })
+})