Semantic-Org · levithomason · Sep 22, 2016 · Sep 22, 2016
diff --git a/config.js b/config.js
@@ -65,11 +65,12 @@ config = Object.assign({}, config, {
   compiler_output_path: paths.base(config.dir_docs_dist),
   compiler_public_path: __BASE__ || '/',
   compiler_vendor: [
+    'brace',
     'classnames',
     'faker',
     'react',
+    'react-ace',
     'react-dom',
-    'react-highlight',
   ],
   compiler_stats: {
     hash: false,            // the hash of the compilation

diff --git a/docs/app/Components/ComponentDoc/ComponentExample.js b/docs/app/Components/ComponentDoc/ComponentExample.js
@@ -1,7 +1,7 @@
 import React, { Component, createElement, PropTypes } from 'react'
-import Highlight from 'react-highlight'
 
 import { exampleContext } from 'docs/app/utils'
+import Editor from 'docs/app/Components/Editor/Editor'
 import { getUnhandledProps } from 'src/lib'
 import { Grid, Header, Icon } from 'stardust'
 
@@ -38,24 +38,30 @@ export default class ComponentExample extends Component {
   }
 
   renderCode = () => {
+    const { examplePath } = this.props
     const { showCode } = this.state
     if (!showCode) return
 
     return (
       <Grid.Column>
-        <Highlight className='language-javascript'>
-          {this.fileContents}
-        </Highlight>
+        <Editor id={examplePath} value={this.fileContents} readOnly />
       </Grid.Column>
     )
   }
 
   render() {
     const { children, description, title } = this.props
+    const { showCode } = this.state
     const rest = getUnhandledProps(ComponentExample, this.props)
 
+    const style = { marginBottom: '4em', transition: 'box-shadow 0 ease-out' }
+    if (showCode) {
+      style.transitionDuration = '0.2s'
+      style.boxShadow = '0 0 30px #ccc'
+    }
+
     return (
-      <Grid columns={1} style={{ marginBottom: '4em' }}>
+      <Grid columns={1} style={style}>
         <Grid.Column>
           <Grid>
             <Grid.Column width={12}>

diff --git a/docs/app/Components/Editor/Editor.js b/docs/app/Components/Editor/Editor.js
@@ -0,0 +1,40 @@
+import React, { PropTypes } from 'react'
+import AceEditor from 'react-ace'
+import 'brace/mode/jsx'
+import 'brace/mode/html'
+import 'brace/theme/tomorrow'
+
+function Editor(props) {
+  const { id, mode, readOnly, value } = props
+
+  return (
+    <AceEditor
+      name={id}
+      mode={mode}
+      theme='tomorrow'
+      width='100%'
+      height='100px'
+      value={value}
+      editorProps={{ $blockScrolling: Infinity, displayIndentGuides: false }}
+      highlightActiveLine={false}
+      readOnly={readOnly}
+      maxLines={Infinity}
+      showGutter={false}
+      showPrintMargin={false}
+      tabSize={2}
+    />
+  )
+}
+
+Editor.propTypes = {
+  id: PropTypes.string.isRequired,
+  mode: PropTypes.oneOf(['html', 'jsx']),
+  readOnly: PropTypes.bool,
+  value: PropTypes.string.isRequired,
+}
+
+Editor.defaultProps = {
+  mode: 'jsx',
+}
+
+export default Editor
diff --git a/docs/app/Views/Introduction.js b/docs/app/Views/Introduction.js
@@ -1,6 +1,5 @@
 import React, { PropTypes } from 'react'
-import Highlight from 'react-highlight'
-
+import Editor from 'docs/app/Components/Editor/Editor'
 import pkg from 'package.json'
 import {
   Container,
@@ -117,9 +116,7 @@ const Comparison = ({ jsx, html }) => (
     <Grid columns='equal' centered textAlign='left'>
       <Grid.Column computer='8' largeScreen='7' widescreen='7' width='16'>
         <Label size='tiny' attached='top left'>JSX</Label>
-        <Highlight className='language-javascript'>
-          {jsx}
-        </Highlight>
+        <Editor id={btoa(jsx)} value={jsx} readOnly />
       </Grid.Column>
       <Grid.Column largeScreen='2' only='large screen' textAlign='center'>
         <Divider vertical>
@@ -128,9 +125,7 @@ const Comparison = ({ jsx, html }) => (
       </Grid.Column>
       <Grid.Column computer='8' largeScreen='7' widescreen='7' width='16'>
         <Label size='tiny' attached='top right'>Rendered HTML</Label>
-        <Highlight className='language-html'>
-          {html}
-        </Highlight>
+        <Editor id={btoa(html)} mode='html' value={html} readOnly />
       </Grid.Column>
     </Grid>
   </Segment>

diff --git a/docs/app/index.ejs b/docs/app/index.ejs
@@ -3,7 +3,6 @@
 <head>
   <meta charset="UTF-8">
   <link rel="shortcut icon" type="image/x-icon" href=<%= (__BASE__ || '') + '/logo.png' %> />
-  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/github-gist.min.css">
   <link rel="stylesheet"
         href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/<%= htmlWebpackPlugin.options.versions.sui %>/semantic.min.css">
   <script src="//cdnjs.cloudflare.com/ajax/libs/Faker/<%= htmlWebpackPlugin.options.versions.faker %>/faker.min.js"></script>

diff --git a/package.json b/package.json
@@ -63,6 +63,7 @@
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-1": "^6.5.0",
     "babel-register": "^6.9.0",
+    "brace": "^0.8.0",
     "chai": "^3.3.0",
     "chai-enzyme": "^0.5.0",
     "connect-history-api-fallback": "^1.2.0",
@@ -101,11 +102,11 @@
     "phantomjs-prebuilt": "^2.1.7",
     "raw-loader": "^0.5.1",
     "react": "^15.3.1",
+    "react-ace": "^3.5.0",
     "react-addons-test-utils": "^15.3.1",
     "react-docgen": "^2.10.0",
     "react-document-title": "^2.0.2",
     "react-dom": "^15.3.1",
-    "react-highlight": "^0.8.0",
     "react-hot-loader": "^1.3.0",
     "react-router": "^2.7.0",
     "react-transform-catch-errors": "^1.0.2",

diff --git a/webpack.config.js b/webpack.config.js
@@ -116,8 +116,6 @@ if (!__TEST__) {
 // No Parse
 // ------------------------------------
 webpackConfig.module.noParse = [
-  // highlight.js dep throws if parsed
-  /autoit/,
   /\.json$/,
 ]