Improved syntax highlighting

codetab.ts

@@ -5,6 +5,7 @@ import { COLOR } from "./colors.ts";
 import {getCodeSheet, setSheet} from "./sheet.ts";
 import { K, ctrlKeyDown, getKeyboardString, keyPressed, shiftKeyDown } from "./keyboard.ts";
 import { clipboard, tokenize } from "./deps.ts";
+import { getContext } from "./runcode.ts";
 
 const historyDebounceFrames = 20;
 
@@ -313,14 +314,15 @@ const punctuation = [
 	",",
 ];
 
+const builtinColor = COLOR.BLUE;
 const keywordColor = COLOR.PURPLE;
 const operatorColor = COLOR.CYAN;
 const valueColor = COLOR.ORANGE;
 const stringColor = COLOR.GREEN;
 const regexColor = stringColor;
-const punctuationColor = COLOR.WHITE;
+const punctuationColor = COLOR.LIGHTGRAY;
 const commentColor = COLOR.GRAY;
-const identifierColor = COLOR.LIGHTGRAY;
+const identifierColor = COLOR.REDDISH;
 const invalidColor = COLOR.RED;
 
 const tokenColors = {
@@ -358,13 +360,13 @@ const drawCodeField = (code: string, x: number, y: number, w: number, h: number)
 	} = indexToGrid(code, anchor);
 	fillRect(x, y, w, h, COLOR.DARKBLUE);
 	if (anchor === focus) {
-		fillRect(x+focusX*fontWidth-scrollX, y+focusY*(fontHeight+1)-scrollY, fontWidth+1, fontHeight+1, COLOR.RED);
+		fillRect(x+focusX*fontWidth-scrollX, y+focusY*(fontHeight+1)-scrollY, fontWidth+1, fontHeight+1, COLOR.YELLOW);
 	} else {
 		// TODO: Draw this selection better
-		fillRect(x+anchorX*fontWidth-scrollX, y+anchorY*(fontHeight+1)-scrollY, fontWidth+1, fontHeight+1, COLOR.GREEN);
+		fillRect(x+anchorX*fontWidth-scrollX, y+anchorY*(fontHeight+1)-scrollY, fontWidth+1, fontHeight+1, COLOR.WHITE);
 		fillRect(x+focusX*fontWidth-scrollX, y+focusY*(fontHeight+1)-scrollY, fontWidth+1, fontHeight+1, COLOR.YELLOW);
 	}
-	// TODO: syntax highlight built-in functions
+	const builtins = Object.keys(getContext());
 	const tokens = [...tokenize(code)];
 	let cx = 0;
 	let cy = 0;
@@ -384,6 +386,9 @@ const drawCodeField = (code: string, x: number, y: number, w: number, h: number)
 			if (punctuation.includes(token.value)) {
 				color = punctuationColor;
 			}
+			if (builtins.includes(token.value)) {
+				color = builtinColor;
+			}
 			drawText(x+cx-scrollX, 1+y+cy-scrollY, line, color);
 			if (i === lines.length-1) {
 				cx += fontWidth*line.length;