✨ feat: add more doc & change as a theme token

Author: ONLY-yours

src/Highlight/index.tsx

@@ -1,11 +1,33 @@
+import { ConfigProvider } from '../ConfigProvider';
 import { HighlightBase, HighlightProps } from './defalut';
+import { useStyles } from './style';
 import FullFeatureWrapper from './wrapper';
 
 const Highlight = (props: HighlightProps) => {
-  if (props?.containerWrapper) {
-    return <FullFeatureWrapper {...props} />;
-  }
-  return <HighlightBase {...props} />;
+  const { prefixCls, type, theme, containerWrapper } = props;
+  const { theme: token } = useStyles({
+    prefixCls,
+    type,
+    theme,
+  });
+
+  return (
+    <ConfigProvider
+      componentToken={{
+        Select: {
+          colorBgTextHover: token.colorFillSecondary,
+          colorBgTextActive: token.colorFill,
+        },
+        Button: {
+          colorText: token.colorTextTertiary,
+          colorBgTextHover: token.colorFillSecondary,
+          colorBgTextActive: token.colorFill,
+        },
+      }}
+    >
+      {containerWrapper ? <FullFeatureWrapper {...props} /> : <HighlightBase {...props} />}
+    </ConfigProvider>
+  );
 };
 
 export * from './defalut';

src/Highlight/style.ts

@@ -102,14 +102,6 @@ export const useStyles = createStyles(
           transition: opacity 0.1s;
         `,
       ),
-      expandIcon: css`
-        color: ${colorText};
-        &:hover {
-          .${STUDIO_UI_PREFIX}-btn-icon {
-            color: ${colorText} !important;
-          }
-        }
-      `,
       select: css`
         min-width: 100px;
         .${STUDIO_UI_PREFIX}-btn {

src/Highlight/wrapper.tsx

@@ -1,10 +1,10 @@
+import CopyButton from '@/components/CopyButton';
 import { DownOutlined, RightOutlined } from '@ant-design/icons';
 import { ActionIcon, Button, Select, type SelectProps } from '@ant-design/pro-editor';
 import classNames from 'classnames';
 import { memo, useState } from 'react';
 import { DivProps, Flexbox } from 'react-layout-kit';
 import { getPrefixCls } from '..';
-import CopyButton from './components/CopyButton';
 import { HighlightBase, HighlightProps } from './defalut';
 import { languageMap } from './hooks/useHighlight';
 import { useStyles } from './style';
@@ -46,10 +46,9 @@ export const FullFeatureWrapper = memo<HighlighterWrapperProps & HighlightProps>
   });
 
   return (
-    <div className={classNames(styles.wrapper, className)} style={style} {...props}>
+    <div className={classNames(styles.wrapper, className)} style={style}>
       <Flexbox align={'center'} className={styles.header} horizontal justify={'space-between'}>
         <ActionIcon
-          className={styles.expandIcon}
           icon={expand ? <DownOutlined size={14} /> : <RightOutlined size={14} />}
           onClick={() => setExpand(!expand)}
           size={24}
@@ -74,12 +73,12 @@ export const FullFeatureWrapper = memo<HighlighterWrapperProps & HighlightProps>
           suffixIcon={false}
           value={lang.toLowerCase()}
         />
-        {copyable && <CopyButton content={children} prefixCls={prefixCls} theme={theme} />}
+        {copyable && <CopyButton content={children} />}
       </Flexbox>
       <HighlightBase
         {...props}
         language={lang?.toLowerCase()}
-        style={expand ? {} : { height: 0, overflow: 'hidden' }}
+        style={expand ? {} : { height: 0, overflow: 'hidden', border: 'none' }}
         copyable={false}
         showLanguage={false}
       />

src/Markdown/index.md

@@ -2,7 +2,7 @@
 nav: 组件
 group: Content
 title: Markdown
-description: Markdown is a React component used to render markdown text. It supports various markdown syntax such as headings, lists, links, images, code blocks and more. It is commonly used in documentation, blogs, and other text-heavy applications.
+description: Markdown是一个用于渲染Markdown文本的React组件。它支持各种Markdown语法，如标题、列表、链接、图片、代码块等。它通常用于文档、博客和其他文本密集型应用中。
 ---
 
 ## Default
@@ -11,4 +11,10 @@ description: Markdown is a React component used to render markdown text. It supp
 
 ## APIs
 
-<API></API>
+| 属性名                | 类型          | 描述                       |
+| --------------------- | ------------- | -------------------------- |
+| children              | string        | 要渲染的 Markdown 内容。   |
+| className             | string        | Markdown 组件的类名。      |
+| fullFeaturedCodeBlock | boolean       | 是否启用完整功能的代码块。 |
+| onDoubleClick         | () => void    | 双击事件处理函数。         |
+| style                 | CSSProperties | Markdown 组件的样式。      |

src/Markdown/index.tsx

@@ -24,7 +24,7 @@ export interface MarkdownProps {
 }
 
 const Markdown = memo<MarkdownProps>(
-  ({ children, className, style, fullFeaturedCodeBlock, onDoubleClick, ...props }) => {
+  ({ children, className, style, fullFeaturedCodeBlock = true, onDoubleClick, ...props }) => {
     const { styles } = useStyles();
     const components: any = {
       a: Typography.Link,