diff --git a/browser/main/modals/PreferencesModal/CheckHighlightEditor.js b/browser/main/modals/PreferencesModal/CheckHighlightEditor.js
new file mode 100644
index 00000000..e656733a
--- /dev/null
+++ b/browser/main/modals/PreferencesModal/CheckHighlightEditor.js
@@ -0,0 +1,59 @@
+import React, { PropTypes } from 'react'
+import CodeMirror from 'codemirror'
+import _ from 'lodash'
+const defaultEditorFontFamily = ['Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'monospace']
+
+export default class CheckHighlightEditor extends React.Component {
+    constructor (props) {
+        super(props)
+    }
+
+    componentDidMount () {
+        this.value = this.props.value
+        this.editor = CodeMirror(this.refs.root, {
+            value: this.props.value,
+            lineNumbers: true,
+            lineWrapping: true,
+            theme: this.props.theme,
+            indentUnit: 4,
+            tabSize: 4,
+            inputStyle: 'textarea'
+        })
+
+        this.setMode(this.props.mode)
+
+        let editorTheme = document.getElementById('editorTheme')
+    }
+
+    setMode(mode) {
+        let syntax = CodeMirror.findModeByName('ejs')
+    }
+
+    render() {
+        let { className, fontFamily } = this.props
+        fontFamily = _.isString(fontFamily) && fontFamily.length > 0
+            ? [fontFamily].concat(defaultEditorFontFamily)
+            : defaultEditorFontFamily
+        return (
+            <div className="CheckHilghtEditor"
+                ref = 'root'
+            />
+        )
+    }
+}
+
+CheckHighlightEditor.propTypes = {
+    value: PropTypes.string.isRequired,
+    mode: PropTypes.string,
+    theme: PropTypes.string.isRequired,
+    className: PropTypes.string,
+}
+
+CheckHighlightEditor.defaultProps = {
+    readOnly: true,
+    theme: 'base16-dark',
+    fontSize: 14,
+    fontFamily: 'Monaco, Consolas',
+    indentSize: 4,
+    indentType: 'space'
+}
diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js
index 47903f87..c06858f3 100644
--- a/browser/main/modals/PreferencesModal/UiTab.js
+++ b/browser/main/modals/PreferencesModal/UiTab.js
@@ -4,6 +4,7 @@ import styles from './ConfigTab.styl'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import store from 'browser/main/store'
 import consts from 'browser/lib/consts'
+import CheckHighlghtEditor from '../PreferencesModal/CheckHighlightEditor'
 
 const OSX = global.process.platform === 'darwin'
 
@@ -18,7 +19,6 @@ class UiTab extends React.Component {
 
   handleUIChange (e) {
     let { config } = this.state
-
     config.ui = {
       theme: this.refs.uiTheme.value,
       disableDirectWrite: this.refs.uiD2w != null
@@ -62,7 +62,6 @@ class UiTab extends React.Component {
   render () {
     const themes = consts.THEMES
     const { config } = this.state
-
     return (
       <div styleName='root'>
         <div styleName='group'>
@@ -113,6 +112,11 @@ class UiTab extends React.Component {
                   })
                 }
               </select>
+              <CheckHighlghtEditor
+                  value="var a = 3"
+                  ref='code'
+                  theme={this.state.config.editor.theme}
+              />
             </div>
           </div>
           <div styleName='group-section'>