Implement custom syntax-highlighting

src/App.tsx

@@ -6,14 +6,19 @@ import { ErrorMessage } from './components/ErrorMessage';
 import styled from 'styled-components';
 import { CodeEditor } from './components/CodeEditor';
 
-const defaultWorkout = `Name: Hello
+const defaultWorkout = `Name: Sample workout
+Description: Try changing it, and see what happens below.
 
-Warmup: 10:00 30%..60%
-Interval: 20:00 100%
+Warmup: 10:00 30%..75%
+Interval: 15:00 100% 90rpm
+  @ 00:00 Start off easy
+  @ 01:00 Settle into rythm
+  @ 07:30 Half way through
+  @ 14:00 Final minute, stay strong!
 Rest: 10:00 75%
-Interval: 20:00 100%
-FreeRide: 10:00
-Cooldown: 10:00 60%..30%
+FreeRide: 20:00
+  @ 00:10 Just have some fun, riding as you wish
+Cooldown: 10:00 70%..30%
 `;
 
 const AppContainer = styled.div`

src/components/CodeEditor.tsx

@@ -1,11 +1,49 @@
 import Editor from 'react-simple-code-editor';
 import styled from 'styled-components';
 
-export const CodeEditor = styled(Editor).attrs({ padding: 10, highlight: code => code })`
+const highlight = (code: string): string => {
+  return code
+    .replace(/^(Name|Author|Description|Warmup|Rest|Interval|Cooldown|FreeRide):/gm, "<code class='keyword'>$&</code>")
+    .replace(/(\d{1,2}:)?\d{1,2}:\d{1,2}/g, "<code class='duration'>$&</code>")
+    .replace(/\d+%/g, "<code class='intensity'>$&</code>")
+    .replace(/\d+rpm/g, "<code class='cadence'>$&</code>")
+    .replace(/\.\./g, "<code class='range'>$&</code>")
+    .replace(/@(.*?)$/gm, "<code class='comment-start'>@</code><code class='comment'>$1</code>");
+};
+
+export const CodeEditor = styled(Editor).attrs({ padding: 10, highlight })`
   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;
+  
+  code.keyword {
+    font-weight: bold;
+  }
+  code.duration {
+    color: #681caf;
+  }
+  code.intensity {
+    color: #af391c;
+  }
+  code.cadence {
+    color: #86af1c;
+  }
+  code.range {
+    color: #888;
+  }
+  code.comment {
+    font-style: italic;
+    color: #888;
+    .duration {
+      color: #8d67af;
+    }
+  }
+  code.comment-start {
+    font-weight: bold;
+    font-style: italic;
+    color: #888;
+  }
 `;