✨ feat: Add new features to Highlighter and CodeBlock components

- Import and use additional components in the Highlighter component
- Add "copyButtonSize" prop to customize the size of the copy button
- Use Tag component instead of div element for displaying the language
- Modify style file for Highlighter component to adjust z-index and color properties
- Add "copyButtonSize" prop to CodeBlock component with specific values

These changes enhance the functionality and appearance of the Highlighter and CodeBlock components.

Author: canisminor1990

src/Highlighter/index.tsx

@@ -1,7 +1,8 @@
 import { memo } from 'react';
 
-import CopyButton from '@/CopyButton';
+import CopyButton, { type CopyButtonProps } from '@/CopyButton';
 import Spotlight from '@/Spotlight';
+import Tag from '@/Tag';
 import { DivProps } from '@/types';
 
 import SyntaxHighlighter from './SyntaxHighlighter';
@@ -12,6 +13,7 @@ export interface HighlighterProps extends DivProps {
    * @description The code content to be highlighted
    */
   children: string;
+  copyButtonSize?: CopyButtonProps['size'];
   /**
    * @description Whether to show the copy button
    * @default true
@@ -40,6 +42,7 @@ export interface HighlighterProps extends DivProps {
 
 export const Highlighter = memo<HighlighterProps>(
   ({
+    copyButtonSize = 'site',
     children,
     language,
     className,
@@ -56,8 +59,15 @@ export const Highlighter = memo<HighlighterProps>(
     return (
       <div className={container} data-code-type="highlighter" style={style} {...props}>
         {spotlight && <Spotlight size={240} />}
-        {copyable && <CopyButton className={styles.button} content={children} placement="left" />}
-        {showLanguage && language && <div className={styles.lang}>{language.toLowerCase()}</div>}
+        {copyable && (
+          <CopyButton
+            className={styles.button}
+            content={children}
+            placement="left"
+            size={copyButtonSize}
+          />
+        )}
+        {showLanguage && language && <Tag className={styles.lang}>{language.toLowerCase()}</Tag>}
         <SyntaxHighlighter language={language?.toLowerCase()}>{children.trim()}</SyntaxHighlighter>
       </div>
     );

src/Highlighter/style.ts

@@ -1,7 +1,7 @@
 import { createStyles } from 'antd-style';
 
 export const useStyles = createStyles(
-  ({ token, css, cx, prefixCls }, type: 'ghost' | 'block' | 'pure') => {
+  ({ token, css, cx, prefixCls, stylish }, type: 'ghost' | 'block' | 'pure') => {
     const prefix = `${prefixCls}-highlighter`;
     const buttonHoverCls = `${prefix}-hover-btn`;
     const langHoverCls = `${prefix}-hover-lang`;
@@ -20,7 +20,7 @@ export const useStyles = createStyles(
         buttonHoverCls,
         css`
           position: absolute;
-          z-index: 51;
+          z-index: 2;
           top: ${type === 'pure' ? 0 : '8px'};
           right: ${type === 'pure' ? 0 : '8px'};
 
@@ -64,13 +64,15 @@ export const useStyles = createStyles(
       ),
       lang: cx(
         langHoverCls,
+        stylish.blur,
         css`
           position: absolute;
-          z-index: 50;
-          right: 8px;
+          z-index: 2;
+          right: 0;
           bottom: 8px;
 
-          color: ${token.colorTextPlaceholder};
+          font-family: ${token.fontFamilyCode};
+          color: ${token.colorTextSecondary};
 
           opacity: 0;
 

src/Markdown/CodeBlock.tsx

@@ -26,6 +26,7 @@ const Code = memo((properties: any) => {
   return (
     <Highlighter
       className={styles}
+      copyButtonSize={{ blockSize: 28, fontSize: 16 }}
       language={className?.replace('language-', '') || 'markdown'}
       type="block"
     >