#3, minor docs fixes

CHANGELOG.md

@@ -1,3 +1,7 @@
+2.0.1
+==================
+* bump `peerDependencies` to support react 16.x
+
 2.0.0
 ==================
 * deprecate 1.x due to dependency conflicts occurring from over-strict versioning of codemirror as a `dependency`. Codemirror is now designated as a `peerDependency`

docs/src/components/Syntax.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+let prism = require('prismjs');
+
+export default class Syntax extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.code = `
+require('codemirror/lib/codemirror.css'); // e.g. webpack css loader
+require('codemirror/theme/material.css');
+require('codemirror/theme/neat.css');
+require('codemirror/mode/xml/xml.js');
+require('codemirror/mode/javascript/javascript.js');
+
+import 'Codemirror' from 'react-codemirror';
+
+<CodeMirror
+  value={this.value}
+  options={{
+    mode: this.mode
+    theme: this.theme,
+    lineNumbers: true
+  }}
+  onSet={(editor, value) => {
+    console.log('set', {value});
+  }}
+  onChange={(editor, metadata, value) => {
+    console.log('change', {value});
+  }}
+/>`.trim();
+
+  }
+
+  tokenize() {
+
+    let code = prism.highlight(this.code, prism.languages.jsx);
+
+    return {
+      __html: code
+    };
+  };
+
+  render() {
+
+    return (
+      <pre className='syntax-block'>
+        <code dangerouslySetInnerHTML={this.tokenize()}/>
+      </pre>
+    )
+  }
+}

docs/src/index.jsx

@@ -5,8 +5,7 @@ import {createStore, combineReducers} from 'redux';
 import reducer from './reducers';
 import Editor from './components/Editor.jsx'
 import Controls from './components/Controls.jsx';
-
-let prism = require('prismjs');
+import Syntax from './components/Syntax.jsx';
 
 require('./index.scss');
 require('codemirror/mode/xml/xml');
@@ -38,35 +37,7 @@ render(
           <Editor/>
         </section>
         <section>
-          <pre>
-            <code className='language-jsx'>
-              {
-                `
-require('codemirror/lib/codemirror.css'); // e.g. webpack css loader
-require('codemirror/theme/material.css');
-require('codemirror/theme/neat.css');
-require('codemirror/mode/xml/xml.js');
-require('codemirror/mode/javascript/javascript.js');
-
-import 'Codemirror' from 'react-codemirror';
-
-<CodeMirror
-  value={this.value}
-  options={{
-    mode: this.mode
-    theme: this.theme,
-    lineNumbers: true
-  }}
-  onSet={(editor, value) => {
-    console.log('set', {value});
-  }}
-  onChange={(editor, metadata, value) => {
-    console.log('change', {value});
-  }}
-/>
-`.trim()}
-            </code>
-          </pre>
+          <Syntax/>
         </section>
       </div>
     </div>

docs/src/index.scss

@@ -128,8 +128,22 @@ html, body, #app {
   }
 }
 
-pre {
+pre.syntax-block {
   height: 100%;
   font-size: 10pt;
-  margin: 0 !important;
+  margin: 0;
+  padding: 1em;
+  overflow: auto;
+  background-color: #f5f2f0;
+  color: black;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  tab-size: 4;
+  hyphens: none;
 }