diff --git a/src/App.tsx b/src/App.tsx
index 4d7faec..c9699ac 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,10 +1,10 @@
 import React, { useState, useCallback } from 'react';
-import Editor from 'react-simple-code-editor';
 import { WorkoutPlot } from './components/WorkoutPlot';
 import { WorkoutStats } from './components/WorkoutStats';
 import { parse, chunkRangeIntervals, Duration } from 'make-workout';
 import { ErrorMessage } from './components/ErrorMessage';
 import styled from 'styled-components';
+import { CodeEditor } from './components/CodeEditor';
 
 const defaultWorkout = `Name: Hello
 
@@ -25,15 +25,6 @@ const AppTitle = styled.h1`
   font-weight: normal;
 `;
 
-const CodeEditor = styled(Editor).attrs({ padding: 10 })`
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
-  font-size: 14px;
-  line-height: 1.3;
-  border: 1px inset #bbb;
-  border-radius: 3px;
-  background: #fff;
-`;
-
 // Split range-intervals into 1 minute chunks
 const chunkSize = new Duration(60);
 
@@ -55,7 +46,7 @@ export function App() {
   return (
     <AppContainer>
       <AppTitle>Workout editor</AppTitle>
-      <CodeEditor onValueChange={onChange} value={text} highlight={code => code} />
+      <CodeEditor onValueChange={onChange} value={text} />
       <WorkoutPlot intervals={chunkRangeIntervals(workout.intervals, chunkSize)} />
       {error && <ErrorMessage>{error}</ErrorMessage>}
       <WorkoutStats workout={workout} />
diff --git a/src/components/CodeEditor.tsx b/src/components/CodeEditor.tsx
new file mode 100644
index 0000000..544d246
--- /dev/null
+++ b/src/components/CodeEditor.tsx
@@ -0,0 +1,11 @@
+import Editor from 'react-simple-code-editor';
+import styled from 'styled-components';
+
+export const CodeEditor = styled(Editor).attrs({ padding: 10, highlight: code => code })`
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-size: 14px;
+  line-height: 1.3;
+  border: 1px inset #bbb;
+  border-radius: 3px;
+  background: #fff;
+`;