diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js index 652284e5..b7018d7c 100644 --- a/src/components/CodeEditor/CodeEditor.js +++ b/src/components/CodeEditor/CodeEditor.js @@ -14,14 +14,13 @@ import Remarkable from 'remarkable'; import {LiveEditor, LiveProvider} from '@gaearon/react-live'; import {colors, media} from 'theme'; import MetaTitle from 'templates/components/MetaTitle'; -import {highlight, languages} from 'prismjs/components/prism-core' -import 'prismjs/components/prism-javascript' +import {highlight, languages} from 'prismjs/components/prism-core'; +import 'prismjs/components/prism-javascript'; const compile = code => Babel.transform(code, {presets: ['es2015', 'react']}).code; // eslint-disable-line no-undef -const compileJsxToJS = code => - Babel.transform(code, {presets: ['react']}).code; // eslint-disable-line no-undef +const compileJsxToJS = code => Babel.transform(code, {presets: ['react']}).code; // eslint-disable-line no-undef const prism = code => highlight(code, languages.javascript); @@ -119,13 +118,23 @@ class CodeEditor extends Component { background: colors.darker, color: colors.white, }}> - Live JSX Editor + + Live JSX Editor {!showCompiledJsx && ( - - View Compiled JSX + + View Compiled JSX + )} {showCompiledJsx && ( - + Back to JSX Editor )} @@ -156,12 +165,13 @@ class CodeEditor extends Component { }, }} className="gatsby-highlight"> - {!showCompiledJsx && ( - - )} + {!showCompiledJsx && } {showCompiledJsx && ( -
-                  
+
                 )}