Code Block Highlighting

/**
 * Main component for displaying syntax-highlighted code blocks
 * @param props - Configuration options for the code highlight component
 * @returns Rendered code highlight component
 */
function CodeHighlight(props: CodeHighlightProps): JSX.Element;

interface CodeHighlightProps extends 
  CodeHighlightSettings,
  BoxProps,
  StylesApiProps<CodeHighlightFactory>,
  ElementProps<'div'> {
  /** Code to highlight */
  code: string;
  /** Language of the code, used for syntax highlighting */
  language?: string;
}

interface CodeHighlightSettings {
  /** Label for copy button in default state @default 'Copy' */
  copyLabel?: string;
  /** Label for copy button in copied state @default 'Copied' */
  copiedLabel?: string;
  /** Uncontrolled expanded default state */
  defaultExpanded?: boolean;
  /** Controlled expanded state */
  expanded?: boolean;
  /** Called when expanded state changes */
  onExpandedChange?: (expanded: boolean) => void;
  /** Max height of collapsed state @default '180px' */
  maxCollapsedHeight?: number | string;
  /** Determines whether the copy button should be displayed @default true */
  withCopyButton?: boolean;
  /** Determines whether the expand/collapse button should be displayed @default false */
  withExpandButton?: boolean;
  /** Label for expand button @default 'Expand code' */
  expandCodeLabel?: string;
  /** Label for collapse button @default 'Collapse code' */
  collapseCodeLabel?: string;
  /** Controls background color of the code. By default, the value depends on color scheme. */
  background?: MantineColor;
  /** Key of theme.radius or any valid CSS value to set border-radius @default 0 */
  radius?: MantineRadius;
  /** Adds border to the root element @default false */
  withBorder?: boolean;
  /** Extra controls to display in the controls list */
  controls?: React.ReactNode[];
  /** Set to change contrast of controls and other elements if you prefer to use dark code color scheme in light mode or light code color scheme in dark mode */
  codeColorScheme?: 'dark' | 'light';
}

import { CodeHighlight } from "@mantine/code-highlight";

// Basic usage
function BasicExample() {
  return (
    <CodeHighlight
      code={`function greet(name) {
  return \`Hello, \${name}!\`;
}`}
      language="javascript"
    />
  );
}

// With copy and expand functionality
function AdvancedExample() {
  return (
    <CodeHighlight
      code={longCode}
      language="typescript"
      withCopyButton
      withExpandButton
      maxCollapsedHeight={200}
      copyLabel="Copy to clipboard"
      copiedLabel="Copied!"
      expandCodeLabel="Show full code"
      collapseCodeLabel="Show less"
    />
  );
}

// With custom styling
function StyledExample() {
  return (
    <CodeHighlight
      code="console.log('styled code');"
      language="javascript"
      background="dark.8"
      radius="md"
      withBorder
      codeColorScheme="dark"
    />
  );
}

// With controlled expansion
function ControlledExample() {
  const [expanded, setExpanded] = useState(false);
  
  return (
    <CodeHighlight
      code={longCode}
      language="python"
      expanded={expanded}
      onExpandedChange={setExpanded}
      withExpandButton
    />
  );
}

/**
 * Custom control component for code highlight controls
 * Available as CodeHighlight.Control
 */
const CodeHighlightControl: React.ComponentType<CodeHighlightControlProps>;

interface CodeHighlightControlProps extends 
  BoxProps, 
  StylesApiProps<CodeHighlightControlFactory> {
  /** Control icon */
  children?: React.ReactNode;
  /** Label displayed in the tooltip when the control is hovered */
  tooltipLabel?: string;
}

import { CodeHighlight, ActionIcon } from "@mantine/code-highlight";
import { IconDownload } from "@tabler/icons-react";

function WithCustomControls() {
  return (
    <CodeHighlight
      code="const data = { foo: 'bar' };"
      language="javascript"
      controls={[
        <CodeHighlight.Control key="download" tooltipLabel="Download">
          <IconDownload size={14} />
        </CodeHighlight.Control>
      ]}
    />
  );
}

type CodeHighlightFactory = Factory<{
  props: CodeHighlightProps;
  ref: HTMLDivElement;
  stylesNames: CodeHighlightStylesNames;
  vars: CodeHighlightCssVariables;
  staticComponents: {
    Control: typeof CodeHighlightControl;
  };
}>;

type CodeHighlightStylesNames =
  | 'codeHighlight'
  | 'pre'
  | 'code'
  | 'control'
  | 'controlTooltip'
  | 'controls'
  | 'scrollarea'
  | 'showCodeButton';

type CodeHighlightCssVariables = {
  codeHighlight: '--ch-max-height' | '--ch-background' | '--ch-radius';
};