add syntax highlighting

package.json

@@ -63,7 +63,8 @@
     "build": "cross-env NODE_ENV=production webpack --config webpack.config.production.js",
     "build-bin": "electron-builder -mwl",
     "test": "cross-env NODE_ENV=test jest",
-    "linter": "eslint src"
+    "linter": "eslint src",
+    "develop": "concurrently \"yarn run dev\" \"yarn run electron\""
   },
   "bin": {
     "reactype": "./index.js"
@@ -91,8 +92,8 @@
     "cli-spinner": "^0.2.8",
     "commander": "^2.17.1",
     "d3": "^5.9.2",
-    "enzyme": "^3.4.1",
     "electron-reload": "^1.4.0",
+    "enzyme": "^3.4.1",
     "konva": "^2.1.7",
     "localforage": "^1.7.2",
     "lodash.throttle": "^4.1.1",
@@ -105,6 +106,7 @@
     "react-konva": "^1.7.12",
     "react-redux": "^5.0.7",
     "react-sortable-tree": "^2.2.0",
+    "react-syntax-highlighter": "^10.2.1",
     "redux": "^4.0.0",
     "redux-devtools-extension": "^2.13.5",
     "redux-logger": "^3.0.6",

src/actionTypes/index.js

@@ -26,4 +26,4 @@ export const ADD_PROP = 'ADD_PROP';
 export const DELETE_ALL_DATA = 'DELETE_ALL_DATA';
 export const CHANGE_IMAGE_PATH = 'CHANGE_IMAGE_PATH';
 export const UPDATE_HTML_ATTR = 'UPDATE_HTML_ATTR';
-export const UPDATE_CHILDREN_SORT = 'UPDATE_CHILDREN_SORT';
+export const UPDATE_CHILDREN_SORT = 'UPDATE_CHILDREN_SORT'

src/components/CodePreview.tsx

@@ -1,9 +1,11 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import { format } from 'prettier';
 import componentRender from '../utils/componentRender.util.ts';
 import { ComponentInt, ComponentsInt } from '../utils/Interfaces.ts';
 /** **   SortCHildren will be fixed , dont XXX the file  *** */
 // import SortChildren from './SortChildren.jsx';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { hybrid } from 'react-syntax-highlighter/dist/styles/hljs/';
 
 type Props = {
   focusComponent: ComponentInt;
@@ -16,30 +18,17 @@ class CodePreview extends Component<Props> {
     const components: ComponentsInt = this.props.components;
 
     return (
-      <Fragment>
-        {/* <SortChildren /> */}
-        <div
-          style={{
-            width: '800px',
-            height: '290px',
-            direction: 'rtl',
-            paddingLeft: '20px',
-            color: '#D3D3D3',
-            fontSize: 16,
-            overflow: 'auto',
-          }}
-        >
-          <pre style={{ direction: 'ltr' }}>
-            {format(componentRender(focusComponent, components), {
-              singleQuote: true,
-              trailingComma: 'es5',
-              bracketSpacing: true,
-              jsxBracketSameLine: true,
-              parser: 'typescript',
-            })}
-          </pre>
-        </div>
-      </Fragment>
+      <div
+        style={{
+          height: '290px',
+          paddingLeft: '30px',
+          overflow: 'auto'
+        }}
+      >
+        <SyntaxHighlighter style={hybrid}>
+          {format(componentRender(focusComponent, components))}
+        </SyntaxHighlighter>
+      </div>
     );
   }
 }