💄 style: Fix latex style (lobehub#215)

* 💄 style: Fix latex style * 💄 style: Fix latex style --------- Co-authored-by: canisminor1990 <[email protected]>
bentwnghk · Oct 21, 2024 · caebc6d · caebc6d
1 parent 0d89dc0
commit caebc6d
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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;