react-syntax-highlighter.d.ts

import {
  ReactNode,
  HTMLAttributes,
  CSSProperties,
  HTMLProps,
  MutableRefObject,
  FunctionComponent,
} from 'react';

declare module 'react-syntax-highlighter' {
  export interface SyntaxHighlighterReactNode {
    properties: HTMLAttributes<HTMLElement>;
    type?: 'text';
    tagName?: keyof HTMLElementTagNameMap;
  }

  export interface LightHighlighter extends FunctionComponent<SyntaxHighlighterProps> {
    registerLanguage: (languageName: string, definition: object) => void;
  }

  export interface SyntaxHighlighterCodeRenderer {
    (options: {
      rows: SyntaxHighlighterReactNode[];
      stylesheet: CSSProperties;
      useInlineStyles: boolean;
    }): ReactNode;
  }

  export interface SyntaxHighlighterProps {
    renderer?: SyntaxHighlighterCodeRenderer;
    // @ts-ignore
    codeTagProps?: HTMLProps<HTMLElement> & { ref: MutableRefObject<HTMLElement> };
  }

  export function createElement(options: {
    node: SyntaxHighlighterReactNode;
    stylesheet: CSSProperties;
    style?: Record<string, CSSProperties>;
    useInlineStyles: boolean;
    key: string;
  }): ReactNode;
}