import type { Root } from "hast"; import type { BuiltinTheme, CodeOptionsThemes, HighlighterCoreOptions, ShikiTransformer } from "shiki"; import { VFile } from "vfile"; import type { Meta } from "./perser.js"; export type ShikiOptions = { /** * Language names to include. * * @default Object.keys(bundledLanguages) * @see https://shiki.style/guide/install#fine-grained-bundle */ langs?: HighlighterCoreOptions["langs"]; /** * Extra meta data to pass to the highlighter */ meta?: Record; /** * Customize the generated HTML by manipulating the hast tree. * You can pass custom functions to modify the tree for different types of nodes. * * @see https://shiki.style/guide/transformers */ transformers?: (meta: M) => ShikiTransformer[]; }; export type RehypeCustomCodeOptions = { /** * glob pattern to language name associations. * - key: glob pattern * - value: language name. if you want not to be highlighted with shiki, set `ignore`. * @default {} * @example * ```ts * const langAssociations = { * // highlight `jsx-like-lang` as `jsx` * "jsx-like-lang": "jsx", * }; * ``` * Following code block will be highlighted as jsx: * ````md * ```jsx-like-lang *
Hello, World!
* ``` * ```` */ langAssociations?: Record; /** * List of languages this plugin does not work in. * @default [] * @example * ```ts * const options: RehypeCustomCodeOptions = { * ignoreLangs: ["plaintext", "text"], * } * ``` */ ignoreLangs?: string[]; /** * Prefix for props. * @default "data" * @example * ```ts * const options: RehypeCustomCodeOptions = { * propsPrefix: "", * } * ``` * If this option is given, the following HTML will be output: * ```html *
     *   
     * 
* ``` * `propsPrefix: ""` is useful to receive as props in React, etc. * * @example * ```ts * const options: RehypeCustomCodeOptions = { * propsPrefix: "PRE", * } * ``` * If this option is given, the following HTML will be output: * ```html *
     *   
     * 
* ``` * given `propsPrefix` is converted to lowercase */ propsPrefix?: string; /** * Preprocess the meta string. * @default (metaString) => metaString */ metaStringPreprocess?: (metaString: string) => string; /** * Transform the parsed meta data. * @default (meta) => meta */ metaDataTransform?: (meta: M) => M; /** * Whether to export the code text as props. * This is useful when you want to use the code text in custom components. * @default options.shiki ? false : true * @example * ```ts * const options: RehypeCustomCodeOptions = { * shouldExportCodeAsProps: true, * } * ``` * If this option is given, the following HTML will be output: * ```html *
     *   
     * 
* ``` */ shouldExportCodeAsProps?: boolean; /** * Options for shikiji. * If this option is given, the code will be highlighted using shikiji. * @default false * @see https://github.com/antfu/shikiji */ shiki?: (ShikiOptions & CodeOptionsThemes) | false; }; export declare const defaultRehypeCustomCodeOptions: (options?: RehypeCustomCodeOptions) => { shiki: false; langAssociations: {}; ignoreLangs: never[]; propsPrefix: string; shouldExportCodeAsProps: boolean; metaStringPreprocess: (metaString: string) => string; metaDataTransform: (meta: M) => M; }; type PluginReturn = (tree: Root, file: VFile) => void; /** * rehype plugin to customize code blocks. * @param options options * @returns unified plugin * * @example * ```ts * import { rehypeCustomCode } from "rehype-custom-code"; * * const md = ` * \`\`\`javascript title="Hello, World!" {1-5} * console.log("Hello, World!"); * \`\`\` * `; * * const html = await unified() * .use(remarkParse) * .use(remarkRehype) * .use(rehypeCustomCode, { * shiki: { * themes: { * light: "github-light", * dark: "one-dark-pro", * }, * }, * }) * .use(rehypeStringify) * .process(md); * * console.log(html.toString()); * ``` */ export declare const rehypeCustomCode: (_options: RehypeCustomCodeOptions) => PluginReturn; export {}; //# sourceMappingURL=plugin.d.ts.map