@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, `'Copy'` by default */
    copyLabel?: string;
    /** Label for copy button in copied state, `'Copied'` by default */
    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, `180px` by default */
    maxCollapsedHeight?: number | string;
    /** Determines whether the copy button should be displayed, `true` by default  */
    withCopyButton?: boolean;
    /** Determines whether the expand/collapse button should be displayed, `false` by default */
    withExpandButton?: boolean;
    /** Label for expand button, `'Expand code'` by default */
    expandCodeLabel?: string;
    /** Label for collapse button, `'Collapse code'` by default */
    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, `0` by default */
    radius?: MantineRadius;
    /** Determines whether the code block should have a border, `false` by default */
    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';
}
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>`, `false` by default */
    __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;
    };
}>;