0
# Inline Code Highlighting
1

2
The `InlineCodeHighlight` component provides syntax highlighting for short code snippets within text content, designed to integrate seamlessly with surrounding text.
3

4
## Capabilities
5

6
### InlineCodeHighlight Component
7

8
Component for highlighting short code snippets within text content.
9

10
```typescript { .api }
11
/**
12
 * Component for highlighting short code snippets within text content
13
 * @param props - Configuration options for the inline code highlight component
14
 * @returns Rendered inline code element
15
 */
16
function InlineCodeHighlight(props: InlineCodeHighlightProps): JSX.Element;
17

18
interface InlineCodeHighlightProps extends 
19
  BoxProps,
20
  StylesApiProps<InlineCodeHighlightFactory>,
21
  ElementProps<'code'> {
22
  /** Code to highlight */
23
  code: string;
24
  /** Language of the code, used to determine syntax highlighting */
25
  language?: string;
26
  /** Controls background color of the code. By default, the value depends on color scheme. */
27
  background?: MantineColor;
28
  /** Key of theme.radius or any valid CSS value to set border-radius @default 'sm' */
29
  radius?: MantineRadius;
30
  /** Adds border to the root element @default false */
31
  withBorder?: boolean;
32
}
33
```
34

35
**Usage Examples:**
36

37
```typescript
38
import { InlineCodeHighlight } from "@mantine/code-highlight";
39

40
// Basic inline code
41
function BasicInline() {
42
  return (
43
    <p>
44
      Use the <InlineCodeHighlight code="useState" language="javascript" /> hook 
45
      to manage state in React components.
46
    </p>
47
  );
48
}
49

50
// With custom styling
51
function StyledInline() {
52
  return (
53
    <p>
54
      The method{" "}
55
      <InlineCodeHighlight
56
        code="Array.prototype.map()"
57
        language="javascript"
58
        background="blue.0"
59
        radius="md"
60
        withBorder
61
      />{" "}
62
      transforms array elements.
63
    </p>
64
  );
65
}
66

67
// In documentation
68
function DocumentationExample() {
69
  return (
70
    <div>
71
      <h3>API Reference</h3>
72
      <p>
73
        Call <InlineCodeHighlight code="fetchData()" language="typescript" /> to 
74
        retrieve data from the server. The function returns a{" "}
75
        <InlineCodeHighlight code="Promise<ApiResponse>" language="typescript" />.
76
      </p>
77
    </div>
78
  );
79
}
80

81
// Different languages
82
function LanguageExamples() {
83
  return (
84
    <ul>
85
      <li>
86
        Python: <InlineCodeHighlight code="len(array)" language="python" />
87
      </li>
88
      <li>
89
        JavaScript: <InlineCodeHighlight code="array.length" language="javascript" />
90
      </li>
91
      <li>
92
        CSS: <InlineCodeHighlight code="display: flex" language="css" />
93
      </li>
94
    </ul>
95
  );
96
}
97
```
98

99
## Factory Types
100

101
```typescript { .api }
102
type InlineCodeHighlightFactory = Factory<{
103
  props: InlineCodeHighlightProps;
104
  ref: HTMLElement;
105
  stylesNames: InlineCodeHighlightStylesNames;
106
  vars: InlineCodeHighlightCssVariables;
107
}>;
108

109
type InlineCodeHighlightStylesNames = 'inlineCodeHighlight';
110

111
type InlineCodeHighlightCssVariables = {
112
  inlineCodeHighlight: '--ch-background' | '--ch-radius';
113
};
114
```
115

116
## Integration Notes
117

118
- The `InlineCodeHighlight` component renders as a `<code>` element by default
119
- It inherits text properties from surrounding content (font-size, line-height, etc.)
120
- Styling integrates with Mantine's theme system for consistent appearance
121
- Supports all standard Mantine styling patterns (classNames, styles, etc.)
122
- Uses the same highlighting system as `CodeHighlight` but optimized for inline display