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;

colors.ts

@@ -5,15 +5,15 @@ const colors = {
 	RED: [1, 0, 0],
 	YELLOW: [1, 1, 0],
 	GREEN: [0, 1, 0],
-	BLUE: [0, 0, 1],
-	DARKBLUE: [0.1, 0.05, 0.4],
+	BLUE: [0.1, 0.5, 1],
+	DARKBLUE: [0.05, 0.1, 0.3],
 	BROWN: [0.6, 0.5, 0.4],
 	GRAY: [0.5, 0.5, 0.5],
 	PURPLE: [0.7, 0.1, 0.85],
 	ORANGE: [0.95, 0.75, 0.25],
 	CYAN: [0, 0.9, 0.9],
 	LIGHTGRAY: [0.75, 0.75, 0.75],
-	REDDISH: [0.7, 1, 0.5],
+	REDDISH: [216/255, 59/255, 113/255],
 	DARKGREEN: [0, 0.6, 0.2],
 } as const;
 

runcode.ts

@@ -45,3 +45,7 @@ export const evalCode = (code: string) => {
 export const addToContext = (name: string, value: any) => {
 	G[name] = value;
 }
+
+export const getContext = () => {
+	return G;
+}