0
# Code Block Highlighting
1

2
The `CodeHighlight` component provides comprehensive syntax highlighting for code blocks with extensive customization and interactive features.
3

4
## Capabilities
5

6
### CodeHighlight Component
7

8
Main component for displaying syntax-highlighted code blocks.
9

10
```typescript { .api }
11
/**
12
 * Main component for displaying syntax-highlighted code blocks
13
 * @param props - Configuration options for the code highlight component
14
 * @returns Rendered code highlight component
15
 */
16
function CodeHighlight(props: CodeHighlightProps): JSX.Element;
17

18
interface CodeHighlightProps extends 
19
  CodeHighlightSettings,
20
  BoxProps,
21
  StylesApiProps<CodeHighlightFactory>,
22
  ElementProps<'div'> {
23
  /** Code to highlight */
24
  code: string;
25
  /** Language of the code, used for syntax highlighting */
26
  language?: string;
27
}
28

29
interface CodeHighlightSettings {
30
  /** Label for copy button in default state @default 'Copy' */
31
  copyLabel?: string;
32
  /** Label for copy button in copied state @default 'Copied' */
33
  copiedLabel?: string;
34
  /** Uncontrolled expanded default state */
35
  defaultExpanded?: boolean;
36
  /** Controlled expanded state */
37
  expanded?: boolean;
38
  /** Called when expanded state changes */
39
  onExpandedChange?: (expanded: boolean) => void;
40
  /** Max height of collapsed state @default '180px' */
41
  maxCollapsedHeight?: number | string;
42
  /** Determines whether the copy button should be displayed @default true */
43
  withCopyButton?: boolean;
44
  /** Determines whether the expand/collapse button should be displayed @default false */
45
  withExpandButton?: boolean;
46
  /** Label for expand button @default 'Expand code' */
47
  expandCodeLabel?: string;
48
  /** Label for collapse button @default 'Collapse code' */
49
  collapseCodeLabel?: string;
50
  /** Controls background color of the code. By default, the value depends on color scheme. */
51
  background?: MantineColor;
52
  /** Key of theme.radius or any valid CSS value to set border-radius @default 0 */
53
  radius?: MantineRadius;
54
  /** Adds border to the root element @default false */
55
  withBorder?: boolean;
56
  /** Extra controls to display in the controls list */
57
  controls?: React.ReactNode[];
58
  /** 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 */
59
  codeColorScheme?: 'dark' | 'light';
60
}
61
```
62

63
**Usage Examples:**
64

65
```typescript
66
import { CodeHighlight } from "@mantine/code-highlight";
67

68
// Basic usage
69
function BasicExample() {
70
  return (
71
    <CodeHighlight
72
      code={`function greet(name) {
73
  return \`Hello, \${name}!\`;
74
}`}
75
      language="javascript"
76
    />
77
  );
78
}
79

80
// With copy and expand functionality
81
function AdvancedExample() {
82
  return (
83
    <CodeHighlight
84
      code={longCode}
85
      language="typescript"
86
      withCopyButton
87
      withExpandButton
88
      maxCollapsedHeight={200}
89
      copyLabel="Copy to clipboard"
90
      copiedLabel="Copied!"
91
      expandCodeLabel="Show full code"
92
      collapseCodeLabel="Show less"
93
    />
94
  );
95
}
96

97
// With custom styling
98
function StyledExample() {
99
  return (
100
    <CodeHighlight
101
      code="console.log('styled code');"
102
      language="javascript"
103
      background="dark.8"
104
      radius="md"
105
      withBorder
106
      codeColorScheme="dark"
107
    />
108
  );
109
}
110

111
// With controlled expansion
112
function ControlledExample() {
113
  const [expanded, setExpanded] = useState(false);
114
  
115
  return (
116
    <CodeHighlight
117
      code={longCode}
118
      language="python"
119
      expanded={expanded}
120
      onExpandedChange={setExpanded}
121
      withExpandButton
122
    />
123
  );
124
}
125
```
126

127
### Static Components
128

129
#### CodeHighlight.Control
130

131
Custom control component for adding interactive elements to code blocks.
132

133
```typescript { .api }
134
/**
135
 * Custom control component for code highlight controls
136
 * Available as CodeHighlight.Control
137
 */
138
const CodeHighlightControl: React.ComponentType<CodeHighlightControlProps>;
139

140
interface CodeHighlightControlProps extends 
141
  BoxProps, 
142
  StylesApiProps<CodeHighlightControlFactory> {
143
  /** Control icon */
144
  children?: React.ReactNode;
145
  /** Label displayed in the tooltip when the control is hovered */
146
  tooltipLabel?: string;
147
}
148
```
149

150
**Usage Example:**
151

152
```typescript
153
import { CodeHighlight, ActionIcon } from "@mantine/code-highlight";
154
import { IconDownload } from "@tabler/icons-react";
155

156
function WithCustomControls() {
157
  return (
158
    <CodeHighlight
159
      code="const data = { foo: 'bar' };"
160
      language="javascript"
161
      controls={[
162
        <CodeHighlight.Control key="download" tooltipLabel="Download">
163
          <IconDownload size={14} />
164
        </CodeHighlight.Control>
165
      ]}
166
    />
167
  );
168
}
169
```
170

171
## Factory Types
172

173
```typescript { .api }
174
type CodeHighlightFactory = Factory<{
175
  props: CodeHighlightProps;
176
  ref: HTMLDivElement;
177
  stylesNames: CodeHighlightStylesNames;
178
  vars: CodeHighlightCssVariables;
179
  staticComponents: {
180
    Control: typeof CodeHighlightControl;
181
  };
182
}>;
183

184
type CodeHighlightStylesNames =
185
  | 'codeHighlight'
186
  | 'pre'
187
  | 'code'
188
  | 'control'
189
  | 'controlTooltip'
190
  | 'controls'
191
  | 'scrollarea'
192
  | 'showCodeButton';
193

194
type CodeHighlightCssVariables = {
195
  codeHighlight: '--ch-max-height' | '--ch-background' | '--ch-radius';
196
};
197
```