Formel anzeige mit zwei malpunkten

math-tutor/frontend/src/components/Chat/MessageBubble.tsx

-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import ReactMarkdown, { defaultUrlTransform } from "react-markdown";
 import type { RetrievedDoc } from "../Retrieval/DocPanel";
 import { t } from "../../i18n";
+import { escapeAsterisksInsideMath } from "../../utils/mathMarkdown";
 
 type MessageBubbleProps = {
   role: "user" | "assistant";
@@ -28,6 +29,7 @@ export default function MessageBubble({
 }: MessageBubbleProps) {
   const bubbleRef = useRef<HTMLDivElement | null>(null);
   const [isRawView, setIsRawView] = useState(false);
+  const renderedText = useMemo(() => escapeAsterisksInsideMath(text), [text]);
 
   useEffect(() => {
     if (isRawView) {
@@ -146,7 +148,7 @@ export default function MessageBubble({
               },
             }}
           >
-            {text}
+            {renderedText}
           </ReactMarkdown>
         )}
       </div>

math-tutor/frontend/src/components/Retrieval/DocCard.tsx

-import { useEffect, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import ReactMarkdown from "react-markdown";
 import { t } from "../../i18n";
+import { escapeAsterisksInsideMath } from "../../utils/mathMarkdown";
 
 declare global {
   interface Window {
@@ -30,6 +31,10 @@ export default function DocCard({
   defaultOpen = false,
 }: DocCardProps) {
   const contentRef = useRef<HTMLDivElement | null>(null);
+  const renderedSnippet = useMemo(
+    () => escapeAsterisksInsideMath(snippetMarkdown),
+    [snippetMarkdown]
+  );
 
   useEffect(() => {
     const typeset = () => {
@@ -60,7 +65,7 @@ export default function DocCard({
       </summary>
       {subtitle ? <div className="doc-subtitle">{subtitle}</div> : null}
       <div className="doc-snippet" ref={contentRef}>
-        <ReactMarkdown>{snippetMarkdown}</ReactMarkdown>
+        <ReactMarkdown>{renderedSnippet}</ReactMarkdown>
       </div>
       <div className="doc-actions">
         <button className="btn small" type="button" onClick={onInspect}>

math-tutor/frontend/src/utils/mathMarkdown.ts

+const MATH_SEGMENT_PATTERN =
+  /(\$\$[\s\S]*?\$\$|\\\[[\s\S]*?\\\]|\\\([\s\S]*?\\\)|\$(?:\\.|[^$\\\n])+\$)/g;
+
+const escapeAsterisks = (value: string) => value.replace(/\*/g, "\\*");
+
+export const escapeAsterisksInsideMath = (input: string): string => {
+  return input.replace(MATH_SEGMENT_PATTERN, (segment) => {
+    if (segment.startsWith("$$") && segment.endsWith("$$")) {
+      const inner = segment.slice(2, -2);
+      return `$$${escapeAsterisks(inner)}$$`;
+    }
+    if (segment.startsWith("\\[") && segment.endsWith("\\]")) {
+      const inner = segment.slice(2, -2);
+      return `\\[${escapeAsterisks(inner)}\\]`;
+    }
+    if (segment.startsWith("\\(") && segment.endsWith("\\)")) {
+      const inner = segment.slice(2, -2);
+      return `\\(${escapeAsterisks(inner)}\\)`;
+    }
+    if (segment.startsWith("$") && segment.endsWith("$")) {
+      const inner = segment.slice(1, -1);
+      return `$${escapeAsterisks(inner)}$`;
+    }
+    return segment;
+  });
+};
+