@witchcraft/editor
    Preparing search index...

    Function useHighlightJsTheme

    • Dynamically loads and creates the css for a given theme.

      It's result, themeCss should be added as a head tag (e.g. using useHead or teleporting a <component :is="'style'"> to the head).

      By default it's an array of one item so you can more easily pass it to unhead https://unhead.unjs.io/'s useHead.

      By default, it will only apply the theme to the code blocks in the prosemirror editor. This is done via css nesting so might not work in older browsers.

      While additionalThemes can be provided, it is dangerous to inject them from user input.

      Instead, you can create a theme that only uses css variables, then allow the user to customize the css variables instead.

      Dark theme detection is just done by checking if the theme name contains "dark".

      You can provide different background colors for dark and light themes by providing a darkLightBgs and it will automatically apply them.

      Parameters

      • __namedParameters: {
            additionalThemes?: Ref<Record<string, string>, Record<string, string>>;
            classes?: string;
            darkLightBgs?: Ref<
                { dark: string; light: string },
                { dark: string; light: string },
            >;
            debug?: boolean;
            defaultTheme?: string;
        } = {}
        • OptionaladditionalThemes?: Ref<Record<string, string>, Record<string, string>>
        • Optionalclasses?: string

          Additional class to wrap the loaded css in.

        • OptionaldarkLightBgs?: Ref<{ dark: string; light: string }, { dark: string; light: string }>
        • Optionaldebug?: boolean
        • OptionaldefaultTheme?: string

      Returns {
          backgroundColor: ComputedRef<string>;
          isDark: ComputedRef<boolean>;
          knownThemes: Ref<string[], string[]>;
          loadTheme: (themeName: string) => Promise<Error | undefined>;
          rawThemeCss: Ref<string, string>;
          theme: Ref<string, string>;
          themeCss: ComputedRef<string[]>;
      }

    Settings

    Member Visibility