style: apply gruvbox colors to katex

mdsvex.config.js

@@ -3,6 +3,46 @@ import rehype_katex from 'rehype-katex';
 import katex from 'katex';
 import visit from 'unist-util-visit';
 
+const gruvboxColorMap = {
+	red: '#fb4934',
+	green: '#98971a',
+	yellow: '#fabd2f',
+	blue: '#458588',
+	purple: '#d3869b',
+	cyan: '#8ec07c',
+	orange: '#fe8019',
+	black: '#282828',
+	white: '#ebdbb2',
+	gray: '#a89984'
+};
+
+const override_katex_colors = () => (tree) => {
+	visit(tree, 'element', (node) => {
+		if (node.tagName === 'span' && node.properties?.className?.includes('katex')) {
+			removeInlineColors(node);
+		}
+	});
+};
+
+function removeInlineColors(node) {
+	if (node.properties?.style && typeof node.properties.style === 'string') {
+		// Split style string into individual declarations
+		const styles = node.properties.style.split(';').map(s => s.trim()).filter(Boolean);
+		const newStyles = styles.map(style => {
+			const [key, value] = style.split(':').map(s => s.trim());
+			if (key === 'color' && gruvboxColorMap[value]) {
+				return `color: ${gruvboxColorMap[value]}`;
+			}
+			return `${key}: ${value}`;
+		});
+		node.properties.style = newStyles.join('; ');
+	}
+
+	if (node.children) {
+		node.children.forEach(removeInlineColors);
+	}
+}
+
 const correct_hast_tree = () => (tree) => {
 	visit(tree, 'text', (node) => {
 		if (node.value.trim().startsWith('<')) {
@@ -14,7 +54,7 @@ const correct_hast_tree = () => (tree) => {
 const katex_blocks = () => (tree) => {
 	visit(tree, 'code', (node) => {
 		if (node.lang === 'math') {
-			const str = katex.renderToString(node.value, {
+			let str = katex.renderToString(node.value, {
 				displayMode: true,
 				leqno: false,
 				fleqn: false,
@@ -23,9 +63,16 @@ const katex_blocks = () => (tree) => {
 				strict: 'warn',
 				output: 'htmlAndMathml',
 				trust: false,
-				macros: { '\\f': '#1f(#2)' }
+				macros: {
+					'\\f': '#1f(#2)'
+				}
 			});
 
+			for (const [name, gruvColor] of Object.entries(gruvboxColorMap)) {
+				const regex = new RegExp(`(style="[^"]*)color:\\s*${name}\\b`, 'g');
+				str = str.replace(regex, `$1color: ${gruvColor}`);
+			}
+
 			node.type = 'raw';
 			node.value = '{@html `' + str + '`}';
 		}
@@ -34,12 +81,12 @@ const katex_blocks = () => (tree) => {
 
 export const mdsvex_config = {
 	extensions: ['.md', '.svx'],
-    layout: "./src/routes/articles/Layout.svelte",
+	layout: './src/routes/articles/Layout.svelte',
 
 	smartypants: {
 		dashes: 'oldschool'
 	},
 
 	remarkPlugins: [math, katex_blocks],
-	rehypePlugins: [correct_hast_tree, rehype_katex]
+	rehypePlugins: [correct_hast_tree, rehype_katex, override_katex_colors]
 };