diff --git a/components/codeImage.js b/components/codeImage.js
index 9574f34..33a7a7d 100644
--- a/components/codeImage.js
+++ b/components/codeImage.js
@@ -3,6 +3,8 @@ import React from 'react'
 import { NativeTypes } from 'react-dnd-html5-backend'
 import { DropTarget } from 'react-dnd'
 import domtoimage from 'dom-to-image'
+import highlight from 'highlight.js'
+import CodeMirror from 'react-codemirror'
 
 const padding = '50px 50px'
 
@@ -22,9 +24,13 @@ const unfold = (f, seed) => {
 const MAX_LINES = 40
 
 class CodeImage extends React.Component {
-  constructor () {
-    super()
-    this.state = {}
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      code: this.props.children
+    }
+    
     this.save = this.save.bind(this)
   }
 
@@ -39,6 +45,22 @@ class CodeImage extends React.Component {
       })
   }
 
+  highlight () {
+    highlight.initHighlighting.called = false
+    highlight.initHighlighting()
+  }
+
+  componentDidMount () {
+    // highlight
+    this.highlight()
+
+    //highlight when content changes
+    this.editor.addEventListener('input', () => {
+      console.log('edit')
+      this.highlight()
+    })
+  }
+
   render () {
     let code = this.state.droppedContent || this.props.children || DEFAULT_CODE
     const split = code.split(EOL)
@@ -46,13 +68,18 @@ class CodeImage extends React.Component {
 
     return this.props.connectDropTarget(
       <div id='section'>
+        <link rel='stylesheet' href='https://highlightjs.org/static/demo/styles/default.css'/>
         <div id='container' ref={(container) => { this.container = container }}>
-          <pre>
-            <code onClick={this.save}>
-              {code}
-            </code>
-          </pre>
+
+          <div contentEditable="true" ref={(editor) => { this.editor = editor}}>
+            <pre>
+              <code>
+                {this.props.initCode}
+              </code>
+            </pre>
+          </div>
         </div>
+        <button onClick={this.highlight}/>
         <style jsx>{`
           #section {
             width: 100%;
@@ -63,9 +90,7 @@ class CodeImage extends React.Component {
           #container {
             background: green;
             padding: ${padding};
-            display: flex;
-            justify-content: center;
-            align-items: center;
+           
           }
           pre {
             background: white;
diff --git a/package.json b/package.json
index 58a458f..de6ccff 100644
--- a/package.json
+++ b/package.json
@@ -14,11 +14,14 @@
     "dom-to-image": "^2.5.2",
     "express": "^4.15.3",
     "form-data": "^2.2.0",
+    "highlight.js": "^9.12.0",
     "morgan": "^1.8.2",
     "next": "^2.4.3",
     "react": "^15.5.4",
     "react-dnd": "^2.4.0",
     "react-dnd-html5-backend": "^2.4.1",
-    "react-dom": "^15.5.4"
+    "react-dom": "^15.5.4",
+    "react-codemirror": "^1.0.0",
+    "react-syntax-highlight": "^0.0.6"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 1d3e5ce..b48536b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1036,6 +1036,10 @@ cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
   dependencies:
     inherits "^2.0.1"
 
+classnames@^2.2.5:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
+
 cliui@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
@@ -1060,6 +1064,10 @@ code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
 
+codemirror@^5.18.2:
+  version "5.26.0"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.26.0.tgz#bcbee86816ed123870c260461c2b5c40b68746e5"
+
 combined-stream@^1.0.5, combined-stream@~1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009"
@@ -1151,6 +1159,14 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+create-react-class@^15.5.1:
+  version "15.6.0"
+  resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.0.tgz#ab448497c26566e1e29413e883207d57cfe7bed4"
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.3.1"
+    object-assign "^4.1.1"
+
 cross-spawn@5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
@@ -1724,6 +1740,10 @@ hawk@~3.1.3:
     hoek "2.x.x"
     sntp "1.x.x"
 
+highlight.js@^9.10.0, highlight.js@^9.12.0:
+  version "9.12.0"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.12.0.tgz#e6d9dbe57cbefe60751f02af336195870c90c01e"
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -2084,6 +2104,14 @@ locate-path@^2.0.0:
     p-locate "^2.0.0"
     path-exists "^3.0.0"
 
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+
+lodash.isequal@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+
 lodash@^4.14.0, lodash@^4.2.0, lodash@^4.5.1, lodash@^4.6.1:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
@@ -2416,7 +2444,7 @@ oauth-sign@~0.8.1:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
 
-object-assign@^4.0.1, object-assign@^4.1.0:
+object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
 
@@ -2714,6 +2742,17 @@ rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-codemirror@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/react-codemirror/-/react-codemirror-1.0.0.tgz#91467b53b1f5d80d916a2fd0b4c7adb85a9001ba"
+  dependencies:
+    classnames "^2.2.5"
+    codemirror "^5.18.2"
+    create-react-class "^15.5.1"
+    lodash.debounce "^4.0.8"
+    lodash.isequal "^4.5.0"
+    prop-types "^15.5.4"
+
 react-deep-force-update@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-2.0.1.tgz#4f7f6c12c3e7de42f345992a3c518236fa1ecad3"
@@ -2744,6 +2783,12 @@ react-proxy@^3.0.0-alpha.0:
   dependencies:
     lodash "^4.6.1"
 
+react-syntax-highlight@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/react-syntax-highlight/-/react-syntax-highlight-0.0.6.tgz#2a657a9a693ffd16a22181ad08de96902957f87a"
+  dependencies:
+    highlight.js "^9.10.0"
+
 react@^15.5.4:
   version "15.5.4"
   resolved "https://registry.yarnpkg.com/react/-/react-15.5.4.tgz#fa83eb01506ab237cdc1c8c3b1cea8de012bf047"