expressive-code-twoslash/dist/index.d.ts

Add Twoslash support to your Expressive Code TypeScript code blocks.

import { ExpressiveCodePlugin } from '@expressive-code/core';
import { TwoslashOptions } from 'twoslash';

/**
 * Interface representing the options for the PluginTwoslash.
 */
interface PluginTwoslashOptions {
    /**
     * If `true`, requires `twoslash` to be present in the code block meta for
     * this transformer to be applied.
     *
     * If a `RegExp`, requires the `RegExp` to match a directive in the code
     * block meta for this transformer to be applied.
     *
     * If `false`, this transformer will be applied to all code blocks that match
     * the specified languages.
     *
     * It is recommended to keep this as `true` to avoid unnecessary processing.
     *
     * @default true
     */
    readonly explicitTrigger?: boolean | RegExp;
    /**
     * If `true`, includes JSDoc comments in the hover popup.
     *
     * @default true
     */
    readonly includeJsDoc?: boolean;
    /**
     * Allows non-standard JSDoc tags to be included in the hover popup.
     *
     * Non-standard tags are tags that are not included in the default JSDoc tag list.
     *
     * @example `@customTag, @docs, @omglookatthis`
     * @default false
     */
    readonly allowNonStandardJsDocTags?: boolean;
    /**
     * The languages to apply this transformer to.
     *
     * @default ["ts", "tsx"]
     */
    readonly languages?: ReadonlyArray<string>;
    /**
     * Options to forward to `twoslash`.
     *
     * @default {}
     */
    readonly twoslashOptions?: TwoslashOptions;
}
/**
 * Twoslash Main Styles
 */
interface TwoSlashMainStyles {
    /**
     * Style (Border Color) for the Twoslash Popups
     */
    borderColor: string;
    /**
     * Style (Background) for the Twoslash Popups
     */
    background: string;
    /**
     * Style (Hover Underline color) for the Twoslash Popups
     */
    hoverUnderlineColor: string;
    /**
     * Style (Text Color) for the Twoslash Popups
     */
    textColor: string;
    /**
     * Style (Docs Max Element Height) for the Twoslash Popups
     */
    popupDocsMaxHeight: string;
    /**
     * Style (Tag Color) for the Twoslash JSDoc Tags
     */
    tagColor: string;
}
/**
 * Twoslash Link Styles
 */
interface TwoSlashLinkStyles {
    /**
     * Style (Link Color) for the Twoslash Popups
     */
    linkColor: string;
    /**
     * Style (Link Hover Color) for the Twoslash Popups
     */
    linkColorHover: string;
    /**
     * Style (Link Visited Color) for the Twoslash Popups
     */
    linkColorVisited: string;
    /**
     * Style (Link Active Color) for the Twoslash Popups
     */
    linkColorActive: string;
}
/**
 * Twoslash Highlight Styles
 */
interface TwoSlashHighlightStyles {
    /**
     * Style (Hue) for the Twoslash Highlights
     *
     * Used to calculate the `highlightBackground` and `highlightBorderColor` styles.
     */
    highlightHue: string;
    /**
     * Style (Luminance) for the Twoslash Highlights
     *
     * Used to calculate the `highlightBackground` and `highlightBorderColor` styles.
     */
    highlightDefaultLuminance: string;
    /**
     * Style (Chroma) for the Twoslash Highlights
     *
     * Used to calculate the `highlightBackground` and `highlightBorderColor` styles.
     */
    highlightDefaultChroma: string;
    /**
     * Style (Background Opacity) for the Twoslash Highlights
     *
     * Used to calculate the `highlightBackground` and `highlightBorderColor` styles.
     */
    highlightBackgroundOpacity: string;
    /**
     * Style (Border Luminance) for the Twoslash Highlights
     *
     * Used to calculate the `highlightBackground` and `highlightBorderColor` styles.
     */
    highlightBorderLuminance: string;
    /**
     * Style (Border Opacity) for the Twoslash Highlights
     *
     * Used to calculate the `highlightBackground` and `highlightBorderColor` styles.
     */
    highlightBorderOpacity: string;
    /**
     * Style (Background) for the Twoslash Highlights
     */
    highlightBackground: string;
    /**
     * Style (Border) for the Twoslash Highlights
     */
    highlightBorderColor: string;
}
/**
 * Twoslash Error and Custom Tags Styles
 */
interface TwoSlashErrorAndCustomTagsStyles {
    /**
     * Style (Error Color) for the Twoslash Error/Custom Annotations
     */
    errorColor: string;
    /**
     * Style (Warning Color) for the Twoslash Custom Annotations
     */
    warnColor: string;
    /**
     * Style (Suggestion Color) for the Twoslash Custom Annotations
     */
    suggestionColor: string;
    /**
     * Style (Message Color) for the Twoslash Custom Annotations
     */
    messageColor: string;
}
interface TwoSlashCompletionStyles {
    /**
     * Style (Cursor Color) for the Twoslash Completion Box
     */
    cursorColor: string;
    /**
     * Style (Background) for the Twoslash Completion Box
     */
    completionBoxBackground: string;
    /**
     * Style (Border) for the Twoslash Completion Box
     */
    completionBoxBorder: string;
    /**
     * Style (Color) for the Twoslash Completion Box
     */
    completionBoxColor: string;
    /**
     * Style (Matched Color) for the Twoslash Completion Box
     */
    completionBoxMatchedColor: string;
    /**
     * Style (Hover Background) for the Twoslash Completion Box
     */
    completionBoxHoverBackground: string;
    /**
     * Style (String Icon) for the Twoslash Completion Icons
     */
    completionIconString: string;
    /**
     * Style (Function Icon) for the Twoslash Completion Icons
     */
    completionIconFunction: string;
    /**
     * Style (Class Icon) for the Twoslash Completion Icons
     */
    completionIconClass: string;
    /**
     * Style (Property Icon) for the Twoslash Completion Icons
     */
    completionIconProperty: string;
    /**
     * Style (Module Icon) for the Twoslash Completion Icons
     */
    completionIconModule: string;
    /**
     * Style (Method Icon) for the Twoslash Completion Icons
     */
    completionIconMethod: string;
    /**
     * Style (Constructor Icon) for the Twoslash Completion Icons
     */
    completionIconConstructor: string;
    /**
     * Style (Interface Icon) for the Twoslash Completion Icons
     */
    completionIconInterface: string;
}
/**
 * Interface representing the style settings for TwoSlash.
 */
interface TwoSlashStyleSettings extends TwoSlashMainStyles, TwoSlashLinkStyles, TwoSlashHighlightStyles, TwoSlashErrorAndCustomTagsStyles, TwoSlashCompletionStyles {
}

declare module "@expressive-code/core" {
    interface StyleSettings {
        twoSlash: TwoSlashStyleSettings;
    }
}
/**
 * Add Twoslash support to your Expressive Code TypeScript code blocks.
 *
 * @param {PluginTwoslashOptions} options - Configuration options for the plugin.
 * @param {Boolean | RegExp} options.explicitTrigger - Settings for the explicit trigger.
 * @param {String[]} options.languages - The languages to apply this transformer to.
 * @param {Boolean} options.includeJsDoc - If `true`, includes JSDoc comments in the hover popup.
 * @param {PluginTwoslashOptions['twoslashOptions']} options.twoslashOptions - Options to forward to `twoslash`.
 * @see https://twoslash.matthiesen.dev for the full documentation.
 * @returns A plugin object with the specified configuration.
 */
declare function ecTwoSlash(options?: PluginTwoslashOptions): ExpressiveCodePlugin;

export { type PluginTwoslashOptions, type TwoSlashStyleSettings, ecTwoSlash as default };