/** * An expression language of ScopePathStr with a binary comma (to indicate alternatives) operator. * Examples: `foo.bar boo.baz,quick quack` */ type ScopePattern = string; /** * A TextMate theme. */ interface IRawTheme { readonly name?: string; readonly settings: IRawThemeSetting[]; } /** * A single theme setting. */ interface IRawThemeSetting { readonly name?: string; readonly scope?: ScopePattern | ScopePattern[]; readonly settings: { readonly fontStyle?: string; readonly foreground?: string; readonly background?: string; }; } declare const enum FontStyle { NotSet = -1, None = 0, Italic = 1, Bold = 2, Underline = 4, Strikethrough = 8 } /** * **IMPORTANT** - Immutable! */ interface StateStack { _stackElementBrand: void; readonly depth: number; clone(): StateStack; equals(other: StateStack): boolean; } interface Nothing { } /** * type StringLiteralUnion<'foo'> = 'foo' | string * This has auto completion whereas `'foo' | string` doesn't * Adapted from https://github.com/microsoft/TypeScript/issues/29729 */ type StringLiteralUnion = T | (U & Nothing); type PlainTextLanguage = 'text' | 'plaintext' | 'txt'; type AnsiLanguage = 'ansi'; type SpecialLanguage = PlainTextLanguage | AnsiLanguage; type SpecialTheme = 'none'; interface ThemeRegistrationRaw extends IRawTheme, Partial> { } interface ThemeRegistration extends Partial { } interface ThemeRegistrationResolved extends IRawTheme { /** * Theme name */ name: string; /** * Display name * * @field shiki custom property */ displayName?: string; /** * Light/dark theme * * @field shiki custom property */ type: 'light' | 'dark'; /** * Token rules */ settings: IRawThemeSetting[]; /** * Same as `settings`, will use as fallback if `settings` is not present. */ tokenColors?: IRawThemeSetting[]; /** * Default foreground color * * @field shiki custom property */ fg: string; /** * Background color * * @field shiki custom property */ bg: string; /** * A map of color names to new color values. * * The color key starts with '#' and should be lowercased. * * @field shiki custom property */ colorReplacements?: Record; /** * Color map of VS Code options * * Will be used by shiki on `lang: 'ansi'` to find ANSI colors, and to find the default foreground/background colors. */ colors?: Record; /** * JSON schema path * * @field not used by shiki */ $schema?: string; /** * Enable semantic highlighting * * @field not used by shiki */ semanticHighlighting?: boolean; /** * Tokens for semantic highlighting * * @field not used by shiki */ semanticTokenColors?: Record; } type ThemeRegistrationAny = ThemeRegistrationRaw | ThemeRegistration | ThemeRegistrationResolved; /** * GrammarState is a special reference object that holds the state of a grammar. * * It's used to highlight code snippets that are part of the target language. */ interface GrammarState { readonly lang: string; readonly theme: string; readonly themes: string[]; /** * @internal */ getInternalStack: (theme?: string) => StateStack | undefined; getScopes: (theme?: string) => string[] | undefined; } interface CodeToTokensBaseOptions extends TokenizeWithThemeOptions { lang?: Languages | SpecialLanguage; theme?: Themes | ThemeRegistrationAny | SpecialTheme; } type CodeToTokensOptions = Omit, 'theme'> & CodeOptionsThemes; interface ThemedTokenScopeExplanation { scopeName: string; themeMatches?: IRawThemeSetting[]; } interface ThemedTokenExplanation { content: string; scopes: ThemedTokenScopeExplanation[]; } /** * A single token with color, and optionally with explanation. * * For example: * * ```json * { * "content": "shiki", * "color": "#D8DEE9", * "explanation": [ * { * "content": "shiki", * "scopes": [ * { * "scopeName": "source.js", * "themeMatches": [] * }, * { * "scopeName": "meta.objectliteral.js", * "themeMatches": [] * }, * { * "scopeName": "meta.object.member.js", * "themeMatches": [] * }, * { * "scopeName": "meta.array.literal.js", * "themeMatches": [] * }, * { * "scopeName": "variable.other.object.js", * "themeMatches": [ * { * "name": "Variable", * "scope": "variable.other", * "settings": { * "foreground": "#D8DEE9" * } * }, * { * "name": "[JavaScript] Variable Other Object", * "scope": "source.js variable.other.object", * "settings": { * "foreground": "#D8DEE9" * } * } * ] * } * ] * } * ] * } * ``` */ interface ThemedToken extends TokenStyles, TokenBase { } interface TokenBase { /** * The content of the token */ content: string; /** * The start offset of the token, relative to the input code. 0-indexed. */ offset: number; /** * Explanation of * * - token text's matching scopes * - reason that token text is given a color (one matching scope matches a rule (scope -> color) in the theme) */ explanation?: ThemedTokenExplanation[]; } interface TokenStyles { /** * 6 or 8 digit hex code representation of the token's color */ color?: string; /** * 6 or 8 digit hex code representation of the token's background color */ bgColor?: string; /** * Font style of token. Can be None/Italic/Bold/Underline */ fontStyle?: FontStyle; /** * Override with custom inline style for HTML renderer. * When specified, `color` and `fontStyle` will be ignored. * Prefer use object style for merging with other styles. */ htmlStyle?: Record; /** * Extra HTML attributes for the token. */ htmlAttrs?: Record; } interface TokenizeWithThemeOptions { /** * Include explanation of why a token is given a color. * * You can optionally pass `scopeName` to only include explanation for scopes, * which is more performant than full explanation. * * @default false */ includeExplanation?: boolean | 'scopeName'; /** * A map of color names to new color values. * * The color key starts with '#' and should be lowercased. * * This will be merged with theme's `colorReplacements` if any. */ colorReplacements?: Record>; /** * Lines above this length will not be tokenized for performance reasons. * * @default 0 (no limit) */ tokenizeMaxLineLength?: number; /** * Time limit in milliseconds for tokenizing a single line. * * @default 500 (0.5s) */ tokenizeTimeLimit?: number; /** * Represent the state of the grammar, allowing to continue tokenizing from a intermediate grammar state. * * You can get the grammar state from `getLastGrammarState`. */ grammarState?: GrammarState; /** * The code context of the grammar. * Consider it a prepended code to the input code, that only participate the grammar inference but not presented in the final output. * * This will be ignored if `grammarState` is provided. */ grammarContextCode?: string; } /** * Result of `codeToTokens`, an object with 2D array of tokens and meta info like background and foreground color. */ interface TokensResult { /** * 2D array of tokens, first dimension is lines, second dimension is tokens in a line. */ tokens: ThemedToken[][]; /** * Foreground color of the code. */ fg?: string; /** * Background color of the code. */ bg?: string; /** * A string representation of themes applied to the token. */ themeName?: string; /** * Custom style string to be applied to the root `
` element.
     * When specified, `fg` and `bg` will be ignored.
     */
    rootStyle?: string;
    /**
     * The last grammar state of the code snippet.
     */
    grammarState?: GrammarState;
}
interface CodeOptionsSingleTheme {
    theme: ThemeRegistrationAny | StringLiteralUnion;
}
interface CodeOptionsMultipleThemes {
    /**
     * A map of color names to themes.
     * This allows you to specify multiple themes for the generated code.
     *
     * ```ts
     * highlighter.codeToHtml(code, {
     *   lang: 'js',
     *   themes: {
     *     light: 'vitesse-light',
     *     dark: 'vitesse-dark',
     *   }
     * })
     * ```
     *
     * Will generate:
     *
     * ```html
     * code
     * ```
     *
     * @see https://github.com/shikijs/shiki#lightdark-dual-themes
     */
    themes: Partial>>;
    /**
     * The default theme applied to the code (via inline `color` style).
     * The rest of the themes are applied via CSS variables, and toggled by CSS overrides.
     *
     * For example, if `defaultColor` is `light`, then `light` theme is applied to the code,
     * and the `dark` theme and other custom themes are applied via CSS variables:
     *
     * ```html
     * code
     * ```
     *
     * When set to `false`, no default styles will be applied, and totally up to users to apply the styles:
     *
     * ```html
     * code
     * ```
     *
     * When set to `light-dark()`, the default color will be rendered as `light-dark(#{light}, #{dark})`.
     *
     * ```html
     * code
     * ```
     *
     * @default 'light'
     */
    defaultColor?: StringLiteralUnion<'light' | 'dark'> | 'light-dark()' | false;
    /**
     * The strategy to render multiple colors.
     *
     * - `css-vars`: Render the colors via CSS variables.
     * - `none`: Do not render the colors, only use the default color.
     *
     * @default 'css-vars'
     */
    colorsRendering?: 'css-vars' | 'none';
    /**
     * Prefix of CSS variables used to store the color of the other theme.
     *
     * @default '--shiki-'
     */
    cssVariablePrefix?: string;
}
type CodeOptionsThemes = CodeOptionsSingleTheme | CodeOptionsMultipleThemes;

type BundledTheme = 'andromeeda' | 'aurora-x' | 'ayu-dark' | 'catppuccin-frappe' | 'catppuccin-latte' | 'catppuccin-macchiato' | 'catppuccin-mocha' | 'dark-plus' | 'dracula' | 'dracula-soft' | 'everforest-dark' | 'everforest-light' | 'github-dark' | 'github-dark-default' | 'github-dark-dimmed' | 'github-dark-high-contrast' | 'github-light' | 'github-light-default' | 'github-light-high-contrast' | 'gruvbox-dark-hard' | 'gruvbox-dark-medium' | 'gruvbox-dark-soft' | 'gruvbox-light-hard' | 'gruvbox-light-medium' | 'gruvbox-light-soft' | 'houston' | 'kanagawa-dragon' | 'kanagawa-lotus' | 'kanagawa-wave' | 'laserwave' | 'light-plus' | 'material-theme' | 'material-theme-darker' | 'material-theme-lighter' | 'material-theme-ocean' | 'material-theme-palenight' | 'min-dark' | 'min-light' | 'monokai' | 'night-owl' | 'nord' | 'one-dark-pro' | 'one-light' | 'plastic' | 'poimandres' | 'red' | 'rose-pine' | 'rose-pine-dawn' | 'rose-pine-moon' | 'slack-dark' | 'slack-ochin' | 'snazzy-light' | 'solarized-dark' | 'solarized-light' | 'synthwave-84' | 'tokyo-night' | 'vesper' | 'vitesse-black' | 'vitesse-dark' | 'vitesse-light';

type BundledLanguage = 'angular-html' | 'angular-ts' | 'astro' | 'bash' | 'blade' | 'c' | 'c++' | 'coffee' | 'coffeescript' | 'cpp' | 'css' | 'glsl' | 'gql' | 'graphql' | 'haml' | 'handlebars' | 'hbs' | 'html' | 'html-derivative' | 'http' | 'imba' | 'jade' | 'java' | 'javascript' | 'jinja' | 'jison' | 'jl' | 'js' | 'json' | 'json5' | 'jsonc' | 'jsonl' | 'jsx' | 'julia' | 'less' | 'lit' | 'markdown' | 'marko' | 'md' | 'mdc' | 'mdx' | 'php' | 'postcss' | 'pug' | 'py' | 'python' | 'r' | 'regex' | 'regexp' | 'sass' | 'scss' | 'sh' | 'shell' | 'shellscript' | 'sql' | 'styl' | 'stylus' | 'svelte' | 'ts' | 'ts-tags' | 'tsx' | 'typescript' | 'vue' | 'vue-html' | 'vue-vine' | 'wasm' | 'wgsl' | 'wit' | 'xml' | 'yaml' | 'yml' | 'zsh';
declare const codeToTokens: (code: string, options: CodeToTokensOptions) => Promise;

export { codeToTokens };
export type { BundledLanguage };