WIP code highlighting

mxstbr · mxstbr · commit de1d07c16f9a · 2016-03-03T13:09:38.000+01:00
diff --git a/site/components/CodeHighlight/index.js b/site/components/CodeHighlight/index.js
@@ -0,0 +1,42 @@
+import {
+  default as React,
+  Component,
+  PropTypes,
+} from "react";
+
+import {
+  default as ReactComponentWithPureRenderMixin,
+} from "react-addons-pure-render-mixin";
+
+export default class Code extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    children: PropTypes.any,
+  };
+
+  componentDidMount() {
+    this._highlight();
+  }
+
+  shouldComponentUpdate = ReactComponentWithPureRenderMixin.shouldComponentUpdate;
+
+  componentDidUpdate() {
+    this._highlight();
+  }
+
+  _highlight() {
+    Prism.highlightElement(this.refs.code);
+  }
+
+  render() {
+    const className = (this.props.language ? 'language-' + this.props.language : '');
+    return (
+      <code
+        ref="code"
+        className={className}
+      >
+        {this.props.code}
+      </code>
+    );
+  }
+}
diff --git a/site/components/StatePreview/index.js b/site/components/StatePreview/index.js
@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import styles from './styles';
 
+import Code from "../CodeHighlight";
+
 export default class StatePreview extends Component {
 
   render() {
@@ -17,7 +19,10 @@ export default class StatePreview extends Component {
     return (
       <div style={ styles.root }>
         <pre style={ codeStyle }>
-          { JSON.stringify(this.props.editorState.getCurrentContent().toJS(), null, 2) }
+          <Code
+            language="javascript"
+            code={ JSON.stringify(this.props.editorState.getCurrentContent().toJS(), null, 2) }
+          />
         </pre>
       </div>
     );
diff --git a/site/index.html b/site/index.html
@@ -44,6 +44,7 @@ <h2 class="available-plugins">Available Plugins</h2>
       </span>
       on Planet Earth :)
   </footer>
+  <script src="node_modules/prismjs/prism.js"></script>
   <script src="static/bundle.js"></script>
 </body>
 </html>
diff --git a/site/package.json b/site/package.json
@@ -13,7 +13,9 @@
     "url": "http://github.com/nikgraf/unicorn-editor.git"
   },
   "dependencies": {
+    "prismjs": "1.4.1",
     "react": "=0.14.7",
+    "react-addons-pure-render-mixin": "0.14.7",
     "react-dom": "^=0.14.7"
   },
   "devDependencies": {
diff --git a/site/server.js b/site/server.js
@@ -19,6 +19,11 @@ app.use(require('webpack-dev-middleware')(compiler, {
 app.use(require('webpack-hot-middleware')(compiler));
 
 app.get('*', (req, res) => {
+  // Get prism.js
+  if (req.originalUrl === '/node_modules/prismjs/prism.js') {
+    res.sendFile(path.join(__dirname, 'node_modules/prismjs/prism.js'));
+    return;
+  }
   res.sendFile(path.join(__dirname, 'index.html'));
 });
 
