From caebc6dc2a31acb8fe4b97ba481af64585636e5f Mon Sep 17 00:00:00 2001
From: Arthals <36695271+zhuozhiyongde@users.noreply.github.com>
Date: Mon, 21 Oct 2024 14:58:35 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20style:=20Fix=20latex=20style=20(?=
 =?UTF-8?q?#215)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 💄 style: Fix latex style

* 💄 style: Fix latex style

---------

Co-authored-by: canisminor1990 <i@canisminor.cc>
---
 src/Markdown/demos/data.ts | 28 ++++++++++++++++++++--------
 src/Markdown/index.tsx     |  1 +
 src/Markdown/style.ts      | 21 +++++++++++++++++++++
 3 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/src/Markdown/demos/data.ts b/src/Markdown/demos/data.ts
index 6959761f..3bf636da 100644
--- a/src/Markdown/demos/data.ts
+++ b/src/Markdown/demos/data.ts
@@ -89,24 +89,36 @@ F --> B
 
 我是一个行内公式：$E=mc^2$
 
-我是一个独立公式：
+我是一个独立的傅里叶公式：
 $$
-\\sum_{i=1}^{n} x_i = x_1 + x_2 + \\ldots + x_n
+f(x) = a_0 + \\sum_{n=1}^{\\infty} \\left( a_n \\cos(nx) + b_n \\sin(nx) \\right)
 $$
 
-我是一个带有分式的公式：
+其中，带有积分符号的项：
 $$
-\\frac{{n!}}{{k!(n-k)!}} = \\binom{n}{k}
+a_0 = \\frac{1}{2\\pi} \\int_{-\\pi}^{\\pi} f(x) \\, dx
 $$
 
-我是一个带有上下标的公式：
 $$
-x^{2} + y^{2} = r^{2}
+a_n = \\frac{1}{\\pi} \\int_{-\\pi}^{\\pi} f(x) \\cos(nx) \\, dx \\quad \\text{for} \\quad n \\geq 1
+$$
+
+$$
+b_n = \\frac{1}{\\pi} \\int_{-\\pi}^{\\pi} f(x) \\sin(nx) \\, dx \\quad \\text{for} \\quad n \\geq 1
+$$
+
+我是一个带有分式、测试长度超长的泰勒公式：
+
+$$
+\\begin{equation}
+f(x) = f(a) + f'(a)(x - a) + \\frac{f''(a)}{2!}(x - a)^2 + \\frac{f'''(a)}{3!}(x - a)^3 + \\cdots + \\frac{f^{(n)}(a)}{n!}(x - a)^n + R_n(x)
+\\end{equation}
 $$
 
-我是一个带有积分符号的公式：
+
+我是一个带有上下标的公式：
 $$
-\\int_{a}^{b} f(x) \\, dx
+x^{2} + y^{2} = r^{2}
 $$
 
 ---
diff --git a/src/Markdown/index.tsx b/src/Markdown/index.tsx
index 4bd6810f..d68d228f 100644
--- a/src/Markdown/index.tsx
+++ b/src/Markdown/index.tsx
@@ -176,6 +176,7 @@ const Markdown = memo<MarkdownProps>(
             mdStyles.strong,
             mdStyles.table,
             mdStyles.video,
+            enableLatex && styles.latex,
             isChatMode && styles.chat,
           )}
           components={memoComponents}
diff --git a/src/Markdown/style.ts b/src/Markdown/style.ts
index 7029ed04..7e207543 100644
--- a/src/Markdown/style.ts
+++ b/src/Markdown/style.ts
@@ -52,6 +52,27 @@ export const useStyles = createStyles(
           }
         }
       `,
+      latex: css`
+        .katex-html {
+          overflow: auto hidden;
+          padding: 3px;
+
+          .base {
+            margin-block: 0;
+            margin-inline: auto;
+          }
+        }
+
+        .katex-html:has(span.tag) {
+          display: flex !important;
+        }
+
+        .katex-html > .tag {
+          position: relative !important;
+          float: right;
+          margin-inline-start: 0.25rem;
+        }
+      `,
       root: css`
         position: relative;
         overflow: hidden;