var hljs = require('highlight.js');
var React = require('react');
var ReactDOM = require('react-dom');

var Highlight = React.createClass({
  getDefaultProps: function () {
    return {
      innerHTML: false,
      className: null
    };
  },
  componentDidMount: function () {
    this.highlightCode();
  },
  componentDidUpdate: function () {
    this.highlightCode();
  },
  highlightCode: function () {
    var domNode = ReactDOM.findDOMNode(this);
    var nodes = domNode.querySelectorAll('pre code');
    if (nodes.length > 0) {
      for (var i = 0; i < nodes.length; i=i+1) {
        hljs.highlightBlock(nodes[i]);
      }
    }
  },
  render: function () {
    if (this.props.innerHTML) {
      return <div dangerouslySetInnerHTML={{__html: this.props.children}} className={this.props.className || null}></div>;
    } else {
      return <pre><code className={this.props.className}>{this.props.children}</code></pre>;
    }
  }
});

module.exports = Highlight;

@@ -1,73 +1,52 @@
-var hljs = require('highlight.js');%0Avar React = require(
+import React, %7B Component %7D from 
 'react'
-)
 ;%0A
-var
+import
  Rea
@@ -55,18 +55,13 @@
 DOM 
-= require(
+from 
 'rea
@@ -71,46 +71,78 @@
 dom'
-);%0A%0Avar Highlight = React.createClass(
+;%0Aimport hljs from 'highlight.js';%0A%0Aclass Highlight extends Component 
 %7B%0A  
@@ -156,27 +156,16 @@
 ultProps
-: function 
 () %7B%0A   
@@ -219,16 +219,17 @@
 me: null
+,
 %0A    %7D;%0A
@@ -227,25 +227,25 @@
 ,%0A    %7D;%0A  %7D
-,
+%0A
 %0A  component
@@ -252,27 +252,16 @@
 DidMount
-: function 
 () %7B%0A   
@@ -286,17 +286,17 @@
 e();%0A  %7D
-,
+%0A
 %0A  compo
@@ -308,27 +308,16 @@
 idUpdate
-: function 
 () %7B%0A   
@@ -342,17 +342,17 @@
 e();%0A  %7D
-,
+%0A
 %0A  highl
@@ -359,27 +359,16 @@
 ightCode
-: function 
 () %7B%0A   
@@ -368,19 +368,21 @@
 ) %7B%0A    
-var
+const
  domNode
@@ -416,19 +416,21 @@
 s);%0A    
-var
+const
  nodes =
@@ -468,16 +468,17 @@
 code');%0A
+%0A
     if (
@@ -512,11 +512,11 @@
 or (
-var
+let
  i =
@@ -542,12 +542,10 @@
 h; i
-=i+1
+++
 ) %7B%0A
@@ -600,17 +600,17 @@
    %7D%0A  %7D
-,
+%0A
 %0A  rende
@@ -614,43 +614,81 @@
 nder
-: function () %7B%0A    if (this.props.
+() %7B%0A    const %7B innerHTML, children, className %7D = this.props;%0A%0A    if (
 inne
@@ -713,12 +713,32 @@
 urn 
-%3Cdiv
+(%0A        %3Cdiv%0A         
  dan
@@ -764,16 +764,17 @@
 L=%7B%7B
+ 
 __html: 
 this
@@ -769,35 +769,24 @@
 __html: 
-this.props.
 children
 %7D%7D class
@@ -781,10 +781,21 @@
 dren
+ 
 %7D%7D
+%0A         
  cla
@@ -798,35 +798,24 @@
  className=%7B
-this.props.
 className %7C%7C
@@ -824,32 +824,34 @@
 ull%7D
+%0A        
 %3E%3C/div%3E
+)
 ;%0A    %7D
- else %7B%0A  
+%0A%0A
     
@@ -861,13 +861,30 @@
 urn 
-%3Cpre%3E
+(%0A      %3Cpre%3E%0A        
 %3Ccod
@@ -896,27 +896,16 @@
 ssName=%7B
-this.props.
 classNam
@@ -912,19 +912,8 @@
 e%7D%3E%7B
-this.props.
 chil
@@ -928,47 +928,50 @@
 ode%3E
+%0A      
 %3C/pre%3E
-;
 %0A    
-%7D
+);
 %0A  %7D%0A%7D
-);%0A%0Amodule.exports =
+%0A%0Aexport default
  Hig

change Highlight to ES6