diff --git a/docs/01-llm-intro/05-training/01-dataset.mdx b/docs/01-llm-intro/05-training/01-dataset.mdx
index 343c982..efbed55 100644
--- a/docs/01-llm-intro/05-training/01-dataset.mdx
+++ b/docs/01-llm-intro/05-training/01-dataset.mdx
@@ -2,13 +2,10 @@
 title: "数据准备"
 ---
 
-import Highlight from '@site/src/components/Highlight';
-
+import Hl from '@site/src/components/Highlight';
 
 ## 介绍
 
-<Highlight color="red" children="sdsdf" />
-
 在大模型预训练阶段，数据准备是一个至关重要的环节，它涵盖了多个方面的内容，以确保模型能够学习到高质量、多样化的数据特征。具体来说，数据准备包含以下几个关键步骤和内容：
 
 * 数据收集
diff --git a/src/components/Highlight.tsx b/src/components/Highlight.tsx
index d2ba414..da8941a 100644
--- a/src/components/Highlight.tsx
+++ b/src/components/Highlight.tsx
@@ -1,4 +1,7 @@
-export const Highlight = ({children, color}) => (
+import React from 'react';
+
+export default function Hl({children, color}) {
+  return (
     <span
       style={{
         backgroundColor: color,
@@ -8,4 +11,5 @@ export const Highlight = ({children, color}) => (
       }}>
       {children}
     </span>
-  );
\ No newline at end of file
+  );
+}
\ No newline at end of file