diff --git a/.gitignore b/.gitignore
index aaebb858..07e63ea5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -39,4 +39,7 @@ server/samples/old
 repl/stats.html
 coverage
 public/icons/apple-splash-*
-dev-dist
\ No newline at end of file
+dev-dist
+Dirt-Samples
+tidal-drum-machines
+webaudiofontdata
diff --git a/packages/react/src/components/CodeMirror6.jsx b/packages/react/src/components/CodeMirror6.jsx
index f33436c6..aa90eb30 100644
--- a/packages/react/src/components/CodeMirror6.jsx
+++ b/packages/react/src/components/CodeMirror6.jsx
@@ -58,15 +58,19 @@ const highlightField = StateField.define({
             haps
               .map((hap) =>
                 (hap.context.locations || []).map(({ start, end }) => {
-                  // const color = hap.context.color || e.value.color || '#FFCA28';
+                  const color = hap.context.color || e.value.color;
                   let from = tr.newDoc.line(start.line).from + start.column;
                   let to = tr.newDoc.line(end.line).from + end.column;
                   const l = tr.newDoc.length;
                   if (from > l || to > l) {
                     return; // dont mark outside of range, as it will throw an error
                   }
-                  //const mark = Decoration.mark({ attributes: { style: `outline: 2px solid ${color};` } });
-                  const mark = Decoration.mark({ attributes: { class: `outline outline-2 outline-foreground` } });
+                  let mark;
+                  if (color) {
+                    mark = Decoration.mark({ attributes: { style: `outline: 4px solid ${color};` } });
+                  } else {
+                    mark = Decoration.mark({ attributes: { class: `outline outline-2 outline-foreground` } });
+                  }
                   return mark.range(from, to);
                 }),
               )