Type alias RehypeCustomCodeOptions<M>

RehypeCustomCodeOptions<M>: {
    ignoreLangs?: string[];
    langAssociations?: Record<string, string>;
    metaDataTransform?: ((meta) => M);
    metaStringPreprocess?: ((metaString) => string);
    propsPrefix?: string;
    shiki?: ShikiOptions<M> & CodeOptionsThemes<BuiltinTheme> | false;
    shouldExportCodeAsProps?: boolean;
}

Type Parameters

Type declaration

  • Optional ignoreLangs?: string[]

    List of languages this plugin does not work in.

    Default

    []

    Example

    const options: RehypeCustomCodeOptions = {
      ignoreLangs: ["plaintext", "text"],
    }
  • Optional langAssociations?: Record<string, string>

    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

    const langAssociations = {
      // highlight `jsx-like-lang` as `jsx`
      "jsx-like-lang": "jsx",
    };

    Following code block will be highlighted as jsx:

    ```jsx-like-lang
    <div>Hello, World!</div>
    ```
  • Optional metaDataTransform?: ((meta) => M)

    Transform the parsed meta data.

    Default

    (meta) => meta
      • (meta): M

      • Parameters

        • meta: M

        Returns M

  • Optional metaStringPreprocess?: ((metaString) => string)

    Preprocess the meta string.

    Default

    (metaString) => metaString
      • (metaString): string

      • Parameters

        • metaString: string

        Returns string

  • Optional propsPrefix?: string

    Prefix for props.

    Default

    "data"

    Example

    const options: RehypeCustomCodeOptions = {
      propsPrefix: "",
    }

    If this option is given, the following HTML will be output:

    <pre lang="javascript" title="Hello, World!" line="1-5">
      <!-- Some code... -->
    </pre>

    propsPrefix: "" is useful to receive as props in React, etc.

    Example

    const options: RehypeCustomCodeOptions = {
      propsPrefix: "PRE",
    }

    If this option is given, the following HTML will be output:

    <pre pre-lang="javascript" pre-title="Hello, World!" pre-line="1-5">
      <!-- Some code... -->
    </pre>

    given propsPrefix is converted to lowercase

  • Optional shiki?: ShikiOptions<M> & CodeOptionsThemes<BuiltinTheme> | false

    Options for shikiji. If this option is given, the code will be highlighted using shikiji.

    Default

    false

    See

    https://github.com/antfu/shikiji

  • Optional shouldExportCodeAsProps?: boolean

    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

    const options: RehypeCustomCodeOptions = {
      shouldExportCodeAsProps: true,
    }

    If this option is given, the following HTML will be output:

    <pre data-code='console.log("Hello, World!");\n' ...>
      <!-- Some code... -->
    </pre>

Settings

Member Visibility

Theme