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

Code highlight with Mantine theme

import { BoxProps, ElementProps, Factory, MantineColor, MantineRadius, StylesApiProps } from '@mantine/core';
import { type CodeHighlightAdapter } from '../CodeHighlightProvider/CodeHighlightProvider';
import type { CodeHighlightDefaultLanguage, CodeHighlightTabsCode, CodeHighlightTabsFactory, CodeHighlightTabsProps, CodeHighlightTabsStylesNames } from '../CodeHighlightTabs/CodeHighlightTabs';
import type { InlineCodeHighlightCssVariables, InlineCodeHighlightFactory, InlineCodeHighlightProps, InlineCodeHighlightStylesNames } from './InlineCodeHighlight';
import { type CodeHighlightContextValue } from './CodeHighlight.context';
import { CodeHighlightControl, type CodeHighlightControlProps } from './CodeHighlightControl/CodeHighlightControl';
export type CodeHighlightStylesNames = 'codeHighlight' | 'pre' | 'code' | 'control' | 'controlTooltip' | 'controls' | 'scrollarea' | 'showCodeButton' | 'lineNumbers' | 'codeWrapper';
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;
    /** Determines whether line numbers should be displayed @default false */
    withLineNumbers?: 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;
    };
}>;
export declare namespace CodeHighlight {
    type Props = CodeHighlightProps;
    type StylesNames = CodeHighlightStylesNames;
    type CssVariables = CodeHighlightCssVariables;
    type Factory = CodeHighlightFactory;
    type ContextValue = CodeHighlightContextValue;
    type Adapter = CodeHighlightAdapter;
    namespace Tabs {
        type Props = CodeHighlightTabsProps;
        type StylesNames = CodeHighlightTabsStylesNames;
        type Code = CodeHighlightTabsCode;
        type Factory = CodeHighlightTabsFactory;
        type DefaultLanguage = CodeHighlightDefaultLanguage;
    }
    namespace Inline {
        type Props = InlineCodeHighlightProps;
        type StylesNames = InlineCodeHighlightStylesNames;
        type CssVariables = InlineCodeHighlightCssVariables;
        type Factory = InlineCodeHighlightFactory;
    }
    namespace Control {
        type Props = CodeHighlightControlProps;
    }
}