@ant-design/x-markdown/plugins/HighlightCode/style/index.js

placeholder for @ant-design/x-markdown

import { mergeToken } from '@ant-design/cssinjs-utils';
import { genStyleHooks } from "../../theme/genStyleUtils";
const genHighlightCodeStyle = token => {
  const {
    componentCls
  } = token;
  return {
    [componentCls]: {
      '&-header': {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        color: token.colorTextTitle,
        background: token.colorBgTitle,
        padding: token.paddingSM,
        borderTopLeftRadius: token.borderRadius,
        borderTopRightRadius: token.borderRadius
      },
      '&-code': {
        borderBottomRightRadius: token.borderRadius,
        borderBottomLeftRadius: token.borderRadius,
        borderTopLeftRadius: 0,
        borderTopRightRadius: 0,
        background: token.colorBgContainer,
        border: `1px solid ${token.colorBgTitle}`,
        borderTop: 'none',
        overflow: 'hidden',
        'pre,code': {
          whiteSpace: 'pre',
          fontSize: token.fontSize,
          fontFamily: token.fontFamilyCode,
          lineHeight: 2,
          borderRadius: 0,
          border: 'none'
        },
        "code[class*='language-'],pre[class*='language-']": {
          background: 'none'
        }
      },
      [`&${componentCls}-rtl`]: {
        direction: 'rtl'
      }
    }
  };
};
export const prepareComponentToken = token => {
  return {
    colorBgTitle: token.colorFillContent,
    colorBorderCode: token.colorBorderSecondary,
    colorTextTitle: token.colorText
  };
};
export default genStyleHooks('HighlightCode', token => {
  const highlightCodeToken = mergeToken(token, {});
  return [genHighlightCodeStyle(highlightCodeToken)];
}, prepareComponentToken);