📝 更新Markdown文档，增加MDX用法示例和组件说明

- 在Markdown文档中新增了MDX的用法，允许在Markdown内容中使用JSX高亮文本，并引入第三方组件。
- 优化了Highlight和HoverText组件的样式，调整了文本颜色和添加了动画效果，提升了用户体验。
- 更新了CSS样式，增加了高亮颜色和动画效果，确保整体视觉效果更加美观。

Author: jiangyangcreate

docs/docs/编程外的基础/Markdown.mdx

@@ -4,18 +4,61 @@ title: Markdown
 description: Markdown和MDX的各种用法及示例
 ---
 
-## MDX
+## 拓展
 
-最常见的池化操作为<Highlight color="#25c2a0">最大值池化</Highlight>（Max Pooling）和<Highlight color="#25c2a0">平均值池化</Highlight>（Average Pooling）两种。
+### MDX
 
-:::info
-点击下方划线文字，显示解释
-:::
+MDX 允许在 <Highlight >Markdown</Highlight> 内容中使用 <Highlight >JSX</Highlight> 来高亮文本。也可以导入例如：鼠标悬浮展示这样的<HoverText text="组件" explanation="（如交互式图表或警报），并将其嵌入到内容中。这使得编写包含组件的长篇内容变得非常有趣。"/>。
 
-阿伦特的《人的境况》强调了人类<HoverText text="行动" explanation="在公共领域中通过言行展现自我、与他人互动的活动，体现人的自由与多样性。" />、<HoverText text="劳动" explanation="与生物性生存直接相关的活动，满足人类基本需求（如吃饭、繁衍）。" />和<HoverText text="工作" explanation="创造持久人造物（工具、艺术品、制度）的活动，构建&quot;人造世界&quot;" />的区别。
 
+也可以加载第三方组件
 
-## 拓展
+<MarkmapHooks initialMarkdown={`
+
+# 断舍离
+
+## 到底什么是断舍离
+
+### 不是扔东西
+
+- 扔掉废物只是敲门砖
+
+### 目标
+
+- 获得一种怡然自得生活方式
+
+### 关键
+
+- 改变看待物品的角度
+- 不以物品为中心，以自身为中心
+- 考虑自己到底是否需要
+
+## 为什么断舍离不仅能整理物品，也能整理思考模式和内心?
+
+### 物品
+
+- 信息容器 : 承载实际用途
+
+- 意义容器 : 承载感受，回忆
+
+### 断舍离的过程
+
+- 不仅是扔东西，而是创造空间恢复生活，情感的流动
+
+## 怎样做到断舍离？
+
+### 打扫
+
+- 决定好从哪里开始清理
+- 决定每样东西去留
+
+### 收纳
+
+- 取决于你和家里物品"友好相处"的方法
+- 1 out 1 in法
+- one touch 法
+
+`} />
 
 ### 数学公式
 
@@ -72,56 +115,6 @@ DSL3_2 --> DSL3_2_2(1 out 1 in法)
 DSL3_2 --> DSL3_2_3(one touch 法)
 ```
 
-### 独立思维导图组件
-
-<MarkmapHooks initialMarkdown={`
-
-# 断舍离
-
-## 到底什么是断舍离
-
-### 不是扔东西
-
-- 扔掉废物只是敲门砖
-
-### 目标
-
-- 获得一种怡然自得生活方式
-
-### 关键
-
-- 改变看待物品的角度
-- 不以物品为中心，以自身为中心
-- 考虑自己到底是否需要
-
-## 为什么断舍离不仅能整理物品，也能整理思考模式和内心?
-
-### 物品
-
-- 信息容器 : 承载实际用途
-
-- 意义容器 : 承载感受，回忆
-
-### 断舍离的过程
-
-- 不仅是扔东西，而是创造空间恢复生活，情感的流动
-
-## 怎样做到断舍离？
-
-### 打扫
-
-- 决定好从哪里开始清理
-- 决定每样东西去留
-
-### 收纳
-
-- 取决于你和家里物品"友好相处"的方法
-- 1 out 1 in法
-- one touch 法
-
-`} />
-
-
 ## HTML
 
 ### 语音

src/components/Highlight.js

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

src/components/HoverText.js

@@ -7,14 +7,18 @@ export default function HoverText({ text, explanation }) {
     <span style={{ position: 'relative', display: 'inline-block' }}>
       <span
         style={{ 
-          textDecoration: 'underline', 
-          cursor: 'pointer',
-          color: '#1877F2'
+          background: 'linear-gradient(transparent 70%, #FFFF00 30%)',
         }}
         onMouseEnter={() => setIsHovering(true)}
         onMouseLeave={() => setIsHovering(false)}
       >
         {text}
+        <sup style={{ 
+          color: 'red',
+          fontSize: '0.7em',
+          marginLeft: '2px',
+          fontWeight: 'bold'
+        }}>?</sup>
       </span>
 
       {isHovering && (
@@ -33,11 +37,12 @@ export default function HoverText({ text, explanation }) {
             width: '250px',
             textAlign: 'center',
             fontSize: '0.9rem',
+            animation: 'fadeIn 0.3s ease-in-out',
           }}
         >
           {explanation}
         </div>
       )}
     </span>
   );
-} 
+}

src/theme/custom.css

@@ -8,6 +8,7 @@
   --ifm-color-primary-lightest: #a16800;
   --ifm-color-primary-font: #000000;
   --ifm-code-font-size: 95%;
+  --highlight-color: hsl(50, 100%, 50%);
   --site-announcement-bar-stripe-color1: hsl(167deg 68% 85%);
   --site-announcement-bar-stripe-color2: hsl(167deg 68% 95%);
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
@@ -804,12 +805,6 @@ button,
   --ifm-navbar-height: 4rem;
 }
 :root {
-  --ifm-color-primary-dark: #c32323;
-  --ifm-color-primary-darker: #b82121;
-  --ifm-color-primary-darkest: #981c1c;
-  --ifm-color-primary-light: #dc3e3e;
-  --ifm-color-primary-lighter: #de4949;
-  --ifm-color-primary-lightest: #e46969;
   --ifm-code-font-size: 95%;
   --ifm-code-background: var(--global-colors-sky70);
 }
@@ -1597,3 +1592,14 @@ blockquote {
 input::placeholder {
   color: gray
 }
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(5px) translateX(-50%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) translateX(-50%);
+  }
+}