✨ feat: add highlight hover emotion & language tag show

src/Highlight/components/LanguageTag/index.tsx

@@ -0,0 +1,80 @@
+import { ThemeType } from '@/Highlight/theme/type';
+import { Tag, type TagProps as AntTagProps } from 'antd';
+import Color from 'color';
+import { ReactNode } from 'react';
+import { createStyles } from '../../../theme';
+import { getThemeColor } from '../../theme/colors';
+
+const useStyles = createStyles(({ cx, css, token }, { prefixCls, theme }) => {
+  const prefix = `${prefixCls}`;
+
+  const { colorFillTertiary, colorText, colorTextSecondary } = getThemeColor(theme === 'dark');
+
+  const background = Color(colorFillTertiary)
+    .mix(Color(theme === 'dark' ? 'white' : 'black'), 0.03)
+    .alpha(0.9)
+    .hsl()
+    .string();
+
+  console.log('background', background);
+
+  return {
+    small: cx(
+      `${prefix}-tag-small`,
+      css`
+        padding: 2px 6px;
+        line-height: 1;
+      `,
+    ),
+    lang: cx(
+      css`
+        position: absolute;
+        z-index: 2;
+        right: 0;
+        bottom: 8px;
+        background-color: ${background};
+        font-family: ${token.fontFamilyCode};
+        color: ${colorTextSecondary};
+        transition: opacity 0.1s;
+      `,
+    ),
+    tag: cx(
+      `${prefix}-tag`,
+      css`
+        color: ${colorText} !important;
+        border-radius: ${token.borderRadius}px;
+        P &:hover {
+          color: ${colorText};
+          background: ${token.colorFill};
+        }
+      `,
+    ),
+  };
+});
+
+export interface TagProps extends AntTagProps {
+  icon?: ReactNode;
+  size?: 'default' | 'small';
+  theme?: ThemeType;
+  prefixCls?: string;
+}
+
+const LanguageTag: React.FC<TagProps> = (props) => {
+  const { icon, children, size = 'default', theme = 'light', prefixCls, ...rest } = props || {};
+  const { styles, cx } = useStyles({ theme, prefixCls });
+
+  console.log('rest', rest);
+
+  return (
+    <>
+      <Tag
+        bordered={false}
+        className={cx(styles.tag, styles.lang, size === 'small' && styles.small)}
+      >
+        {children}
+      </Tag>
+    </>
+  );
+};
+
+export default LanguageTag;

src/Highlight/defalut.tsx

@@ -3,6 +3,7 @@ import { createRef } from 'react';
 import { getPrefixCls } from '../theme';
 import CopyButton from './components/CopyButton';
 import HighLighter from './components/HighLighter';
+import LanguageTag from './components/LanguageTag';
 import { useKeyDownCopyEvent } from './hooks/useKeyDownCopyEvent';
 import { useStyles } from './style';
 import { THEME_LIGHT, ThemeType } from './theme';
@@ -65,6 +66,10 @@ export interface HighlightProps {
    * 是否需要默认外层 wrapper
    */
   containerWrapper?: boolean;
+  /**
+   * 是否需默认展示语言种类
+   */
+  showLanguage?: boolean;
 }
 
 const HighlightBase: React.FC<HighlightProps> = (props) => {
@@ -75,8 +80,9 @@ const HighlightBase: React.FC<HighlightProps> = (props) => {
     lineNumber = false,
     copyable = true,
     theme = THEME_LIGHT,
-    language,
+    language = 'tsx',
     prefixCls: customPrefixCls,
+    showLanguage = true,
     type = 'block',
     onCopy,
   } = props;
@@ -96,6 +102,11 @@ const HighlightBase: React.FC<HighlightProps> = (props) => {
         {copyable && (
           <CopyButton prefixCls={prefixCls} onCopy={onCopy} theme={theme} content={children} />
         )}
+        {showLanguage && language && (
+          <LanguageTag prefixCls={prefixCls} theme={theme}>
+            {language.toLowerCase()}
+          </LanguageTag>
+        )}
         <HighLighter
           lineNumber={lineNumber}
           language={language}

src/Highlight/index.md

@@ -40,14 +40,15 @@ group: 基础组件
 
 ### Highlight
 
-| 参数       | 说明                                                      | 类型    | 默认值  |
-| :--------- | :-------------------------------------------------------- | :------ | :------ |
-| language   | 指定语言类型，详见下表                                    | string  | -       |
-| theme      | 指定主题，可选 `dark`, `light`                            | string  | `light` |
-| lineNumber | 指定代码块行号是否开启，可选 `true`, `false`              | boolean | false   |
-| copyable   | 指定代码块是否展示复制按钮，可选 `true`, `false`          | boolean | true    |
-| height     | 指定代码块高度，用于需要控制代码块高度固定的场景          | number  | -       |
-| type       | 指定渲染类型，可选 `block`, `pure`, pure 模式去掉容器样式 | `block` | -       |
+| 参数         | 说明                                                      | 类型    | 默认值  |
+| :----------- | :-------------------------------------------------------- | :------ | :------ |
+| language     | 指定语言类型，详见下表                                    | string  | -       |
+| showLanguage | 是否展示语言的 Tag                                        | boolean | true    |
+| theme        | 指定主题，可选 `dark`, `light`                            | string  | `light` |
+| lineNumber   | 指定代码块行号是否开启，可选 `true`, `false`              | boolean | false   |
+| copyable     | 指定代码块是否展示复制按钮，可选 `true`, `false`          | boolean | true    |
+| height       | 指定代码块高度，用于需要控制代码块高度固定的场景          | number  | -       |
+| type         | 指定渲染类型，可选 `block`, `pure`, pure 模式去掉容器样式 | `block` | -       |
 
 ### 目前支持的语言列表
 

src/Highlight/index.tsx

@@ -8,4 +8,6 @@ const Highlight = (props: HighlightProps) => {
   return <HighlightBase {...props} />;
 };
 
+export * from './defalut';
+export * from './wrapper';
 export { Highlight };

src/Highlight/style.ts

@@ -56,6 +56,18 @@ export const useStyles = createStyles(
           border-radius: ${token.borderRadius}px;
           transition: background-color 100ms ${token.motionEaseOut};
 
+          :not(:hover) {
+            .${prefix}-copy {
+              visibility: hidden;
+              opacity: 0;
+            }
+
+            .${prefix}-tag {
+              visibility: hidden;
+              opacity: 0;
+            }
+          }
+
           pre {
             margin: 0 !important;
             padding: ${type === 'pure' ? 0 : `16px 24px`} !important;
@@ -71,7 +83,25 @@ export const useStyles = createStyles(
         min-width: 100px;
         display: flex;
         justify-content: center;
+        span {
+          font-family: ${token.fontFamilyCode} !important;
+        }
       `,
+      lang: cx(
+        css`
+          position: absolute;
+          z-index: 2;
+          right: 0;
+          bottom: 8px;
+
+          font-family: ${token.fontFamilyCode};
+          color: ${token.colorTextSecondary};
+
+          // opacity: 0;
+
+          transition: opacity 0.1s;
+        `,
+      ),
       expandIcon: css`
         color: ${colorText};
         &:hover {

src/Highlight/wrapper.tsx

@@ -33,6 +33,7 @@ export const FullFeatureWrapper = memo<HighlighterWrapperProps & HighlightProps>
     style,
     prefixCls: customPrefixCls,
     theme = THEME_LIGHT,
+    copyable = true,
     type = 'block',
   } = props || {};
   const prefixCls = getPrefixCls('highlight', customPrefixCls);
@@ -73,13 +74,14 @@ export const FullFeatureWrapper = memo<HighlighterWrapperProps & HighlightProps>
           suffixIcon={false}
           value={lang.toLowerCase()}
         />
-        <CopyButton content={children} prefixCls={prefixCls} theme={theme} />
+        {copyable && <CopyButton content={children} prefixCls={prefixCls} theme={theme} />}
       </Flexbox>
       <HighlightBase
         {...props}
         language={lang?.toLowerCase()}
         style={expand ? {} : { height: 0, overflow: 'hidden' }}
         copyable={false}
+        showLanguage={false}
       />
     </div>
   );