优化样式

Author: jiangyangcreate

docs/docs/机器学习/传统算法/K均值算法.md

@@ -29,19 +29,19 @@ K 均值算法如何划分集群：
 一维坐标系中,设 A(x1),B(x2),则 A,B 之间的距离为
 
 $
-|AB|=√[(x1−x2)2]
+|AB|=\sqrt{(x1-x2)^2}
 $
 
 二维坐标系中,设 A(x1,y1),B(x2,y2),则 A,B 之间的距离为
 
 $
-|AB|=√[(x1−x2)2+(y1−y2)2]
+|AB|=\sqrt{(x1-x2)^2+(y1-y2)^2}
 $
 
 三维坐标系中,设 A(x1,y1,z1),B(x2,y2,z2),则 A,B 之间的距离为
 
 $
-|AB|=√[(x1−x2)2+(y1−y2)2+(z1−z2)2]
+|AB|=\sqrt{(x1-x2)^2+(y1-y2)^2+(z1-z2)^2}
 $
 
 以此类推

docs/docs/编程外的基础/Markdown.md docs/docs/编程外的基础/Markdown.mdxdocs/docs/编程外的基础/Markdown.md renamed to docs/docs/编程外的基础/Markdown.mdx

@@ -1,8 +1,20 @@
 ---
 sidebar_position: 2
 title: Markdown
+description: Markdown和MDX的各种用法及示例
 ---
 
+## MDX
+
+最常见的池化操作为<Highlight color="#25c2a0">最大值池化</Highlight>（Max Pooling）和<Highlight color="#25c2a0">平均值池化</Highlight>（Average Pooling）两种。
+
+:::info
+点击下方划线文字，显示解释
+:::
+
+阿伦特的《人的境况》强调了人类<HoverText text="行动" explanation="在公共领域中通过言行展现自我、与他人互动的活动，体现人的自由与多样性。" />、<HoverText text="劳动" explanation="与生物性生存直接相关的活动，满足人类基本需求（如吃饭、繁衍）。" />和<HoverText text="工作" explanation="创造持久人造物（工具、艺术品、制度）的活动，构建&quot;人造世界&quot;" />的区别。
+
+
 ## 拓展
 
 ### 数学公式
@@ -55,12 +67,12 @@ DSL3 --> DSL3_1(打扫)
 DSL3_1 --> DSL3_1_1(决定好从哪里开始清理)
 DSL3_1 --> DSL3_1_2(决定每样东西去留)
 DSL3 --> DSL3_2(收纳)
-DSL3_2 --> DSL3_2_1(取决于你和家里物品“友好相处”的方法)
+DSL3_2 --> DSL3_2_1(取决于你和家里物品友好相处的方法)
 DSL3_2 --> DSL3_2_2(1 out 1 in法)
 DSL3_2 --> DSL3_2_3(one touch 法)
 ```
 
-### 思维导图组件
+### 独立思维导图组件
 
 <MarkmapHooks initialMarkdown={`
 
@@ -103,7 +115,7 @@ DSL3_2 --> DSL3_2_3(one touch 法)
 
 ### 收纳
 
-- 取决于你和家里物品“友好相处”的方法
+- 取决于你和家里物品"友好相处"的方法
 - 1 out 1 in法
 - one touch 法
 

src/components/Highlight.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export default function Highlight({children, color}) {
+  return (
+    <span
+      style={{
+        backgroundColor: color,
+        borderRadius: '2px',
+        color: '#fff',
+        padding: '0.2rem',
+      }}>
+      {children}
+    </span>
+  );
+} 

src/components/HoverText.js

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+
+export default function HoverText({ text, explanation }) {
+  const [isHovering, setIsHovering] = useState(false);
+
+  return (
+    <span style={{ position: 'relative', display: 'inline-block' }}>
+      <span
+        style={{ 
+          textDecoration: 'underline', 
+          cursor: 'pointer',
+          color: '#1877F2'
+        }}
+        onMouseEnter={() => setIsHovering(true)}
+        onMouseLeave={() => setIsHovering(false)}
+      >
+        {text}
+      </span>
+      
+      {isHovering && (
+        <div
+          style={{
+            position: 'absolute',
+            bottom: '100%',
+            left: '50%',
+            transform: 'translateX(-50%)',
+            backgroundColor: 'rgba(0, 0, 0, 0.8)',
+            color: 'white',
+            padding: '0.5rem',
+            borderRadius: '4px',
+            boxShadow: '0 2px 10px rgba(0, 0, 0, 0.2)',
+            zIndex: 1000,
+            width: '250px',
+            textAlign: 'center',
+            fontSize: '0.9rem',
+          }}
+        >
+          {explanation}
+        </div>
+      )}
+    </span>
+  );
+} 

src/theme/MDXComponents/index.js

@@ -2,11 +2,15 @@ import MDXComponents from '@theme-original/MDXComponents';
 import MarkmapHooks from '@site/src/components/MarkmapHooks';
 import { PhotoAlbums } from '@site/src/components/PhotoAlbums';
 import DocCardList from '@theme/DocCardList';
+import Highlight from '@site/src/components/Highlight';
+import HoverText from '@site/src/components/HoverText';
 
 export default {
   // 复用默认的映射
   ...MDXComponents,
   PhotoAlbums,
   MarkmapHooks,
-  DocCardList
+  DocCardList,
+  Highlight,
+  HoverText
 };