markview-vue 0.1.9 → 0.1.11

package/dist/index.d.ts

@@ -5,7 +5,6 @@ import { FunctionalComponent } from 'vue';
 import { HighlighterCore } from 'shiki/core';
 import { InjectionKey } from 'vue';
 import { LucideProps } from 'lucide-vue-next';
-import { MDXComponents } from 'mdx/types';
 import { MDXProps } from 'mdx/types';
 import { PluggableList } from '@mdx-js/mdx/lib/core';
 import { Plugin as Plugin_2 } from 'vue';
@@ -673,6 +672,32 @@ declare type ContainerType_2 = 'tip' | 'warning' | 'danger' | 'info';
  */
 export declare function copyToClipboard(text: string): Promise<boolean>;
 
+/**
+ * 创建 Highlighter Vue Plugin
+ *
+ * 在应用初始化时预加载语言，后续所有 MarkdownRender 实例自动可用。
+ *
+ * @example
+ * ```ts
+ * import { createHighlighterPlugin } from 'markview-vue'
+ *
+ * // 方式 1：传入多个语言
+ * app.use(createHighlighterPlugin({
+ *   langs: [
+ *     import('@shikijs/langs/python'),
+ *     import('@shikijs/langs/rust'),
+ *     import('@shikijs/langs/go'),
+ *   ]
+ * }))
+ *
+ * // 方式 2：传入整个语言包
+ * app.use(createHighlighterPlugin({
+ *   langs: import('@shikijs/langs')
+ * }))
+ * ```
+ */
+export declare function createHighlighterPlugin(options?: HighlighterPluginOptions): Plugin_2;
+
 declare const _default: __VLS_WithTemplateSlots_4<typeof __VLS_component_4, __VLS_TemplateResult_4["slots"]>;
 export { _default as ListItem }
 export { _default as li }
@@ -701,6 +726,11 @@ export { _default_6 as mark }
 
 export declare const Divider: __VLS_WithTemplateSlots_20<typeof __VLS_component_20, __VLS_TemplateResult_20["slots"]>;
 
+/**
+ * 确保 highlighter 已初始化
+ */
+declare function ensureReady(): Promise<void>;
+
 /**
  * 从 VNode 中提取语言标识（用于代码块）
  */
@@ -764,8 +794,17 @@ declare function hide(): void;
 
 /**
  * 高亮代码
+ *
+ * @param code - 源代码
+ * @param lang - 语言标识
+ * @param theme - 主题名称，'light' | 'dark'，默认 'light'
  */
-export declare function highlightCode(code: string, lang: string): Promise<string>;
+export declare function highlightCode(code: string, lang: string, theme?: 'light' | 'dark'): Promise<string>;
+
+export declare interface HighlighterPluginOptions {
+    /** 需要预加载的语言包 */
+    langs?: LangInput;
+}
 
 export declare const Icon: DefineComponent<__VLS_Props_14, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_14> & Readonly<{}>, {
     size: number;
@@ -821,6 +860,13 @@ export declare const ImagePreview: DefineComponent<__VLS_Props_11, {}, {}, {}, {
 
 export declare const img: DefineComponent<__VLS_Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_2> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
 
+declare const isLoading: Ref<boolean, boolean>;
+
+declare const isReady: Ref<boolean, boolean>;
+
+/** 支持的语言包输入类型 */
+export declare type LangInput = Promise<any>[] | Promise<any>;
+
 /**
  * 语言别名映射表
  */
@@ -828,6 +874,40 @@ export declare const LANGUAGE_ALIASES: Record<string, string>;
 
 export declare const List: __VLS_WithTemplateSlots_13<typeof __VLS_component_13, __VLS_TemplateResult_13["slots"]>;
 
+declare const loadedLangs: Ref<string[], string[]>;
+
+/**
+ * 加载额外语言
+ *
+ * @param langs - 支持单个 Promise、Promise 数组、或整个语言包
+ */
+declare function loadLangs(langs: LangInput): Promise<void>;
+
+/**
+ * 动态加载额外语言
+ *
+ * @param langs - 语言包输入，支持以下格式：
+ *   - 单个语言 Promise：`import('@shikijs/langs/python')`
+ *   - 语言 Promise 数组：`[import('@shikijs/langs/python'), import('@shikijs/langs/rust')]`
+ *   - 语言包 Promise：`import('@shikijs/langs')` — 自动解析包内所有语言
+ *
+ * @example
+ * ```ts
+ * // 方式1：传入单个语言
+ * await loadLanguages(import('@shikijs/langs/python'))
+ *
+ * // 方式2：传入多个语言
+ * await loadLanguages([
+ *   import('@shikijs/langs/python'),
+ *   import('@shikijs/langs/rust'),
+ * ])
+ *
+ * // 方式3：传入整个语言包（会自动解析所有语言）
+ * await loadLanguages(import('@shikijs/langs'))
+ * ```
+ */
+export declare function loadLanguages(langs: LangInput): Promise<void>;
+
 export declare const MarkdownRender: DefineComponent<MarkdownRenderProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
     error: (error: Error) => any;
     rendered: () => any;
@@ -843,7 +923,7 @@ export declare const MarkdownRender: DefineComponent<MarkdownRenderProps, {}, {}
 }>, {
     format: "md" | "mdx";
     theme: "light" | "dark";
-    components: MDXComponents;
+    components: MDXProps["components"];
     raw: string;
     remarkGfm: boolean;
     prefix: string;
@@ -853,6 +933,7 @@ export declare const MarkdownRender: DefineComponent<MarkdownRenderProps, {}, {}
     tocMode: "sidebar" | "embedded";
     showBackTop: boolean;
     backTopThreshold: number;
+    extraLangs: LangInput;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {
     wrapperRef: HTMLDivElement;
     contentRef: HTMLDivElement;
@@ -899,6 +980,13 @@ export declare interface MarkdownRenderProps {
     showBackTop?: boolean;
     /** 回到顶部按钮显示阈值（滚动距离） */
     backTopThreshold?: number;
+    /**
+     * 额外语言包，支持以下格式：
+     * - 单个语言：import('@shikijs/langs/python')
+     * - 语言数组：[import('@shikijs/langs/python'), import('@shikijs/langs/rust')]
+     * - 语言包（bundled）：import('@shikijs/langs') — 自动解析包内所有语言
+     */
+    extraLangs?: LangInput;
 }
 
 /**
@@ -937,6 +1025,9 @@ declare interface Props {
  */
 export declare function provideHeadingCollapse(): HeadingCollapseState;
 
+/** 刷新已加载语言列表 */
+declare function refreshLoadedLangs(): Promise<void>;
+
 declare function show(msg: string, toastType?: ToastType_2, duration?: number): void;
 
 export declare const Skeleton: DefineComponent<__VLS_Props_9, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_9> & Readonly<{}>, {
@@ -1036,6 +1127,36 @@ export declare const ul: DefineComponent<{}, () => VNode<RendererNode, RendererE
  */
 export declare function useHeadingCollapse(): HeadingCollapseState | null;
 
+/**
+ * Composable：在组件内使用 highlighter
+ *
+ * @example
+ * ```ts
+ * const { loadLangs, loadedLangs, isReady } = useHighlighter()
+ *
+ * onMounted(async () => {
+ *   await loadLangs(import('@shikijs/langs/go'))
+ *   console.log('已加载:', loadedLangs.value)
+ * })
+ * ```
+ */
+export declare function useHighlighter(): UseHighlighterReturn;
+
+export declare interface UseHighlighterReturn {
+    /** highlighter 是否已初始化 */
+    isReady: typeof isReady;
+    /** 当前已加载的语言列表 */
+    loadedLangs: typeof loadedLangs;
+    /** 是否正在加载语言 */
+    isLoading: typeof isLoading;
+    /** 加载额外语言 */
+    loadLangs: typeof loadLangs;
+    /** 确保 highlighter 已初始化 */
+    ensureReady: typeof ensureReady;
+    /** 刷新已加载语言列表 */
+    refreshLoadedLangs: typeof refreshLoadedLangs;
+}
+
 /**
  * Vue 插件安装方法，支持 app.use() 方式全局注册
  */