Inline Code Highlighting

/**
 * Component for highlighting short code snippets within text content
 * @param props - Configuration options for the inline code highlight component
 * @returns Rendered inline code element
 */
function InlineCodeHighlight(props: InlineCodeHighlightProps): JSX.Element;

interface InlineCodeHighlightProps extends 
  BoxProps,
  StylesApiProps<InlineCodeHighlightFactory>,
  ElementProps<'code'> {
  /** Code to highlight */
  code: string;
  /** Language of the code, used to determine syntax highlighting */
  language?: 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 'sm' */
  radius?: MantineRadius;
  /** Adds border to the root element @default false */
  withBorder?: boolean;
}

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

// Basic inline code
function BasicInline() {
  return (
    <p>
      Use the <InlineCodeHighlight code="useState" language="javascript" /> hook 
      to manage state in React components.
    </p>
  );
}

// With custom styling
function StyledInline() {
  return (
    <p>
      The method{" "}
      <InlineCodeHighlight
        code="Array.prototype.map()"
        language="javascript"
        background="blue.0"
        radius="md"
        withBorder
      />{" "}
      transforms array elements.
    </p>
  );
}

// In documentation
function DocumentationExample() {
  return (
    <div>
      <h3>API Reference</h3>
      <p>
        Call <InlineCodeHighlight code="fetchData()" language="typescript" /> to 
        retrieve data from the server. The function returns a{" "}
        <InlineCodeHighlight code="Promise<ApiResponse>" language="typescript" />.
      </p>
    </div>
  );
}

// Different languages
function LanguageExamples() {
  return (
    <ul>
      <li>
        Python: <InlineCodeHighlight code="len(array)" language="python" />
      </li>
      <li>
        JavaScript: <InlineCodeHighlight code="array.length" language="javascript" />
      </li>
      <li>
        CSS: <InlineCodeHighlight code="display: flex" language="css" />
      </li>
    </ul>
  );
}

type InlineCodeHighlightFactory = Factory<{
  props: InlineCodeHighlightProps;
  ref: HTMLElement;
  stylesNames: InlineCodeHighlightStylesNames;
  vars: InlineCodeHighlightCssVariables;
}>;

type InlineCodeHighlightStylesNames = 'inlineCodeHighlight';

type InlineCodeHighlightCssVariables = {
  inlineCodeHighlight: '--ch-background' | '--ch-radius';
};