prism-react-editor/dist/code-block/index.d.ts

Lightweight, extensible code editor component for React apps

import { ReactNode } from 'react';
import { TokenStream } from '../prism';
export type CodeBlockProps = {
    /**
     * Language used for syntax highlighting. If the language doesn't have a registered
     * Prism grammar, syntax highlighting will be disabled.
     */
    language: string;
    /** Code in the code block. */
    code: string;
    /** Number of spaces a tab is equal to. @default 2 */
    tabSize?: number;
    /** Whether or not to display line numbers. @default false */
    lineNumbers?: boolean;
    /** Line number of the first line. @default 1 */
    lineNumberStart?: number;
    /** Whether or not lines can wrap. @default false */
    wordWrap?: boolean;
    /**
     * Whether or not indentation is preserved on wrapped lines. When `true`, tabs are
     * replaced with spaces since Chrome doesn't render tabs properly with this enabled.
     * Defaults to `true` when `wordWrap` is enabled.
     */
    preserveIndent?: boolean;
    /**
     * Whether or not to display indentation guides. Does support `wordWrap` unlike the
     * `IndentGuides` editor extension. Does not work with `rtl`. @default false
     */
    guideIndents?: boolean;
    /**
     * Whether the code block uses right to left directionality. Requires styles from
     * `prism-react-editor/rtl-layout.css` to work. @default false
     */
    rtl?: boolean;
    /** Inline styles for the container element. */
    style?: Omit<React.CSSProperties, "tabSize" | "counterReset">;
    /** Additional classes for the container element. */
    className?: string;
    /**
     * Callback that can be used to modify the tokens before they're stringified to HTML.
     * Can be used to add rainbow brackets for example.
     */
    onTokenize?(tokens: TokenStream): void;
    /**
     * Function used to call components that modify the code block. Examples include adding
     * a copy button, hover descriptions, and bracket pair highlighting on hover.
     */
    children?(codeBlock: PrismCodeBlock, props: CodeBlockProps): ReactNode;
};
export type PrismCodeBlock = {
    /** Outermost element of the code block. */
    container?: HTMLPreElement;
    /** `<code>` element wrapping the lines and overlays. */
    wrapper?: HTMLElement;
    /**
     * Collection containing the overlays as the first element. The rest of the elements
     * are the code lines. This means the first line starts at index 1.
     */
    lines?: HTMLCollectionOf<HTMLDivElement>;
};
/**
 * Component that creates a code block with syntax highlighting. Requires styles from
 * `prism-react-editor/code-block.css` in addition to the normal layout.
 */
declare const CodeBlock: (props: CodeBlockProps) => import("react/jsx-runtime").JSX.Element;
export * from './brackets';
export * from './copy';
export * from './hover';
export { CodeBlock };