From c45cc4e7721d985736d7478d5aca04b7f8d2654e Mon Sep 17 00:00:00 2001
From: MathMan05 <mathium@fermi.chat>
Date: Mon, 20 Jul 2026 11:55:55 -0500
Subject: [PATCH] better highlighting

---
 src/webpage/highlighter/clike/lex.ts | 57 +++++++++++++++++++++++++++-
 src/webpage/highlighter/colors.ts    |  3 ++
 src/webpage/highlighter/highlight.ts | 23 +++++++++++
 src/webpage/style.css                |  9 +++++
 4 files changed, 90 insertions(+), 2 deletions(-)

diff --git a/src/webpage/highlighter/clike/lex.ts b/src/webpage/highlighter/clike/lex.ts
index 7b4a9db..fc52e36 100644
--- a/src/webpage/highlighter/clike/lex.ts
+++ b/src/webpage/highlighter/clike/lex.ts
@@ -59,7 +59,60 @@ function* lex(code: string, config: clikeConf) {
 			};
 		}
 	}
-	for (const [lex] of code.matchAll(r)) {
+	const matches = Array.from(code.matchAll(r));
+	let i = -1;
+	function identifyTypeOfWord(word: string) {
+		if (keywords.has(word)) {
+			return hcolors.keyword;
+		} else {
+			const next = nextNonBlank();
+			if (next) {
+				if (next.startsWith("(")) {
+					return hcolors.function;
+				}
+			}
+
+			const prev = prevNonBlank();
+			if (prev) {
+				console.log(prev);
+				if (prev.endsWith(".")) {
+					return hcolors.property;
+				}
+			}
+			if (word.match(/^[A-Z]/)) return hcolors.class;
+			return hcolors.identifier;
+		}
+	}
+	function isBlank(lex: string) {
+		if (lex.match(/^\s*$/)) {
+			return true;
+		} else if (lex.startsWith("//") && config.doubleSlashComments) {
+			return true;
+		} else if (lex.startsWith("/*") && config.multilineSlashComments) {
+			return true;
+		} else if (lex.startsWith("#") && config.hashComments) {
+			return true;
+		}
+		return false;
+	}
+	function prevNonBlank() {
+		for (let j = i - 1; j >= 0; j--) {
+			const lex = matches[j][0];
+			if (isBlank(lex)) continue;
+			return lex;
+		}
+		return null;
+	}
+	function nextNonBlank() {
+		for (let j = i + 1; j < matches.length; j++) {
+			const lex = matches[j][0];
+			if (isBlank(lex)) continue;
+			return lex;
+		}
+		return null;
+	}
+	for (const [lex] of matches) {
+		i++;
 		if (lex.startsWith("//") && config.doubleSlashComments) {
 			yield {
 				type: hcolors.comment,
@@ -92,7 +145,7 @@ function* lex(code: string, config: clikeConf) {
 			};
 		} else if (lex.match(/^[a-zA-Z]/)) {
 			yield {
-				type: keywords.has(lex) ? hcolors.keyword : hcolors.identifier,
+				type: identifyTypeOfWord(lex),
 				content: lex,
 			};
 		} else {
diff --git a/src/webpage/highlighter/colors.ts b/src/webpage/highlighter/colors.ts
index 3c2a5a1..d9c2514 100644
--- a/src/webpage/highlighter/colors.ts
+++ b/src/webpage/highlighter/colors.ts
@@ -5,4 +5,7 @@ export const enum hcolors {
 	symbol,
 	comment,
 	identifier,
+	function,
+	class,
+	property,
 }
diff --git a/src/webpage/highlighter/highlight.ts b/src/webpage/highlighter/highlight.ts
index 4e5e436..fbde8dd 100644
--- a/src/webpage/highlighter/highlight.ts
+++ b/src/webpage/highlighter/highlight.ts
@@ -20,6 +20,15 @@ function ifCSSAllows() {
 
 	const highidentifier = new Highlight();
 	CSS.highlights.set("highidentifier", highidentifier);
+
+	const highFunc = new Highlight();
+	CSS.highlights.set("highFunc", highFunc);
+
+	const highClass = new Highlight();
+	CSS.highlights.set("highClass", highClass);
+
+	const highProp = new Highlight();
+	CSS.highlights.set("highProp", highProp);
 	const f = new FinalizationRegistry<string>((id) => {
 		eliMap.delete(id);
 	});
@@ -75,6 +84,20 @@ function ifCSSAllows() {
 				highsymbol.add(r);
 				addToRangeMap(r, elm, highsymbol);
 				break;
+			case hcolors.function:
+				highFunc.add(r);
+				addToRangeMap(r, elm, highFunc);
+				break;
+			case hcolors.class:
+				highClass.add(r);
+				addToRangeMap(r, elm, highClass);
+				break;
+			case hcolors.property:
+				highProp.add(r);
+				addToRangeMap(r, elm, highProp);
+				break;
+			default:
+				color satisfies never;
 		}
 	}
 	return function highlightFromLex(
diff --git a/src/webpage/style.css b/src/webpage/style.css
index f5f3a07..ba19884 100644
--- a/src/webpage/style.css
+++ b/src/webpage/style.css
@@ -3385,6 +3385,15 @@ img.bigembedimg {
 ::highlight(highidentifier) {
 	color: white;
 }
+::highlight(highClass) {
+	color: #6741ff;
+}
+::highlight(highProp) {
+	color: #33dcff;
+}
+::highlight(highFunc) {
+	color: #d564ff;
+}
 #memberlisttoggle.svgicon {
 	-moz-appearance: initial;
 	&::before {