Added CodeMirror for syntax highlighting

bvaughn · bvaughn · commit bf8f3bb97207 · 2016-07-23T12:15:34.000+09:00
diff --git a/index.html b/index.html
@@ -3,13 +3,12 @@
   <head>
     <title>react-virtualized</title>
     <meta charset="utf-8">
-    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
-    <link
-      type='image/x-icon'
-      rel='shortcut icon'
-    >
+    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
+    <link type="image/x-icon" rel="shortcut icon" />
+    <link rel="stylesheet" type="text/css" href="https://npmcdn.com/codemirror@5.17.0/lib/codemirror.css" />
+    <link rel="stylesheet" type="text/css" href="https://codemirror.net/theme/dracula.css" />
   </head>
   <body>
-    <div id='root'></div>
+    <div id="root"></div>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -122,6 +122,7 @@
     "react": "^15.2.1",
     "react-addons-shallow-compare": "^15.2.1",
     "react-addons-test-utils": "^15.2.1",
+    "react-codemirror": "^0.2.6",
     "react-dom": "^15.2.1",
     "react-transform-catch-errors": "^1.0.2",
     "react-transform-hmr": "^1.0.2",
diff --git a/source/demo/Wizard/Wizard.js b/source/demo/Wizard/Wizard.js
@@ -1,9 +1,17 @@
 /* @flow */
 import cn from 'classnames'
+import CodeMirror from 'react-codemirror'
 import React, { Component } from 'react'
 import { ContentBox, ContentBoxHeader } from '../ContentBox'
 import styles from './Wizard.css'
 
+require('codemirror/mode/javascript/javascript')
+
+const codeMirrorOptions = {
+  mode: 'javascript',
+  theme: 'dracula'
+}
+
 // @TODO Clean up this class; it's pretty hacky.
 export default class Wizard extends Component {
   constructor (props) {
@@ -37,8 +45,6 @@ export default class Wizard extends Component {
       nonCheckerboardPattern
     } = this._sanitizeState()
 
-    // @TODO Use react-highlighter for markup
-
     return (
       <div>
         <ContentBox>
@@ -107,9 +113,10 @@ export default class Wizard extends Component {
         </ContentBox>
         <ContentBox>
           <ContentBoxHeader text='Suggested Starting Point' />
-          <pre>
-            {this._generateMarkup()}
-          </pre>
+          <CodeMirror
+            options={codeMirrorOptions}
+            value={this._generateMarkup()}
+          />
         </ContentBox>
       </div>
     )
