@mantine/code-highlight/lib/CodeHighlight/CodeHighlight.d.ts

Code highlight with Mantine theme

import { BoxProps, ElementProps, Factory, MantineColor, MantineRadius, StylesApiProps } from '@mantine/core';
import { CodeHighlightControl } from './CodeHighlightControl/CodeHighlightControl';
export type CodeHighlightStylesNames = 'codeHighlight' | 'pre' | 'code' | 'control' | 'controlTooltip' | 'controls' | 'scrollarea' | 'showCodeButton';
export type CodeHighlightCssVariables = {
    codeHighlight: '--ch-max-height' | '--ch-background' | '--ch-radius';
};
export 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 use dark or light color scheme. When using shiki adapter, you can use loaded themes here */
    codeColorScheme?: 'dark' | 'light' | (string & {});
}
export interface CodeHighlightProps extends CodeHighlightSettings, BoxProps, StylesApiProps<CodeHighlightFactory>, ElementProps<'div'> {
    __withOffset?: boolean;
    __staticSelector?: string;
    /** If set, the code will be rendered as inline element without `<pre>` @default `false` */
    __inline?: boolean;
    /** Code to highlight */
    code: string;
    /** Language of the code, used for syntax highlighting */
    language?: string;
}
export type CodeHighlightFactory = Factory<{
    props: CodeHighlightProps;
    ref: HTMLDivElement;
    stylesNames: CodeHighlightStylesNames;
    vars: CodeHighlightCssVariables;
    staticComponents: {
        Control: typeof CodeHighlightControl;
    };
}>;
export declare const CodeHighlight: import("@mantine/core").MantineComponent<{
    props: CodeHighlightProps;
    ref: HTMLDivElement;
    stylesNames: CodeHighlightStylesNames;
    vars: CodeHighlightCssVariables;
    staticComponents: {
        Control: typeof CodeHighlightControl;
    };
}>;