fix: fix katex rendering

src/lib/utils/marked/katex-extension.ts

@@ -1,8 +1,8 @@
 import katex from 'katex';
 
 const DELIMITER_LIST = [
-	{ left: '$$', right: '$$', display: false },
 	{ left: '$', right: '$', display: false },
+	{ left: '$$', right: '$$', display: true },
 	{ left: '\\pu{', right: '}', display: false },
 	{ left: '\\ce{', right: '}', display: false },
 	{ left: '\\(', right: '\\)', display: false },
@@ -28,24 +28,24 @@ function escapeRegex(string) {
 
 function generateRegexRules(delimiters) {
 	delimiters.forEach((delimiter) => {
-		const { left, right } = delimiter;
+		const { left, right, display } = delimiter;
 		// Ensure regex-safe delimiters
 		const escapedLeft = escapeRegex(left);
 		const escapedRight = escapeRegex(right);
 
-		// Inline pattern - Capture group $1, token content, followed by end delimiter and normal punctuation marks.
+		if (!display) {
-		// Example: $text$
 			inlinePatterns.push(
 				`${escapedLeft}((?:\\\\.|[^\\\\\\n])*?(?:\\\\.|[^\\\\\\n${escapedRight}]))${escapedRight}`
 			);
-
+		} else {
-		// Block pattern - Starts and ends with the delimiter on new lines. Example:
+			blockPatterns.push(
-		// $$\ncontent here\n$$
+				`${escapedLeft}((?:\\\\.|[^\\\\\\n])*?(?:\\\\.|[^\\\\\\n${escapedRight}]))${escapedRight}`
-		blockPatterns.push(`${escapedLeft}\n((?:\\\\[^]|[^\\\\])+?)\n${escapedRight}`);
+			);
+		}
 	});
 
 	const inlineRule = new RegExp(`^(${inlinePatterns.join('|')})(?=[\\s?!.,:？！。，：]|$)`, 'u');
-	const blockRule = new RegExp(`^(${blockPatterns.join('|')})(?:\n|$)`, 'u');
+	const blockRule = new RegExp(`^(${blockPatterns.join('|')})(?=[\\s?!.,:？！。，：]|$)`, 'u');
 
 	return { inlineRule, blockRule };
 }
@@ -55,32 +55,41 @@ const { inlineRule, blockRule } = generateRegexRules(DELIMITER_LIST);
 export default function (options = {}) {
 	return {
 		extensions: [
-			inlineKatex(options, createRenderer(options, false)),
+			inlineKatex(options),
-			blockKatex(options, createRenderer(options, true))
+			blockKatex(options),
 		]
 	};
 }
 
-function createRenderer(options, newlineAfter) {
+function katexStart(src, displayMode: boolean) {
-	return (token) =>
+	let ruleReg = displayMode ? blockRule : inlineRule;
-		katex.renderToString(token.text, { ...options, displayMode: token.displayMode }) +
-		(newlineAfter ? '\n' : '');
-}
 
-function inlineKatex(options, renderer) {
-	const ruleReg = inlineRule;
-	return {
-		name: 'inlineKatex',
-		level: 'inline',
-		start(src) {
-			let index;
 	let indexSrc = src;
 
 	while (indexSrc) {
-				index = indexSrc.indexOf('$');
+		let index = -1;
+		let startIndex = -1;
+		let startDelimiter = '';
+		let endDelimiter = '';
+		for (let delimiter of DELIMITER_LIST) {
+			if (delimiter.display !== displayMode) {
+				continue;
+			}
+
+			startIndex = indexSrc.indexOf(delimiter.left);
+			if (startIndex === -1) {
+				continue;
+			}
+
+			index = startIndex;
+			startDelimiter = delimiter.left;
+			endDelimiter = delimiter.right;
+		}
+
 		if (index === -1) {
 			return;
 		}
+
 		const f = index === 0 || indexSrc.charAt(index - 1) === ' ';
 		if (f) {
 			const possibleKatex = indexSrc.substring(index);
@@ -90,10 +99,14 @@ function inlineKatex(options, renderer) {
 			}
 		}
 
-				indexSrc = indexSrc.substring(index + 1).replace(/^\$+/, '');
+		indexSrc = indexSrc.substring(index + startDelimiter.length).replace(endDelimiter, '');
 	}
-		},
+}
-		tokenizer(src, tokens) {
+
+function katexTokenizer(src, tokens, displayMode: boolean) {
+	let ruleReg = displayMode ? blockRule : inlineRule;
+	let type = displayMode ? 'blockKatex' : 'inlineKatex';
+
 	const match = src.match(ruleReg);
 
 	if (match) {
@@ -102,37 +115,45 @@ function inlineKatex(options, renderer) {
 			.filter((item) => item)
 			.find((item) => item.trim());
 
+		if (displayMode) {
+			console.log("block matched", match[0]);
+		} else {
+			console.log("inline matched", match[0]);
+		}
+
 		return {
-					type: 'inlineKatex',
+			type,
 			raw: match[0],
-					text: text
+			text: text,
+			displayMode,
 		};
 	}
+}
+
+
+
+function inlineKatex(options) {
+	return {
+		name: 'inlineKatex',
+		level: 'inline',
+		start(src) {
+			return katexStart(src, false);
+		},
+		tokenizer(src, tokens) {
+			return katexTokenizer(src, tokens, false);
 		},
-		renderer
 	};
 }
 
-function blockKatex(options, renderer) {
+function blockKatex(options) {
 	return {
 		name: 'blockKatex',
 		level: 'block',
-		tokenizer(src, tokens) {
+		start(src) {
-			const match = src.match(blockRule);
+			return katexStart(src, true);
-
+		},
-			if (match) {
+		tokenizer(src, tokens) {
-				const text = match
+			return katexTokenizer(src, tokens, true);
-					.slice(2)
-					.filter((item) => item)
-					.find((item) => item.trim());
-
-				return {
-					type: 'blockKatex',
-					raw: match[0],
-					text: text
-				};
-			}
 		},
-		renderer
 	};
 }