@incremark/svelte 0.2.5 → 0.2.7

package/dist/components/AutoScrollContainer.svelte

@@ -4,7 +4,7 @@
 -->
 
 <script lang="ts">
-  import { onMount, onDestroy } from 'svelte'
+  import { onMount, onDestroy, tick } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements';
 
   /**
@@ -117,24 +117,24 @@
     lastScrollTop = containerRef.scrollTop
     lastScrollHeight = containerRef.scrollHeight
     
-    observer = new MutationObserver(() => {
+    observer = new MutationObserver(async () => {
       // 使用 tick 等待 DOM 更新
-      setTimeout(() => {
-        if (!containerRef) return
-        
-        // 如果没有滚动条，重置状态
-        if (!hasScrollbar()) {
-          isUserScrolledUp = false
-        }
-        
-        // 更新 scrollHeight 记录（内容变化后）
-        lastScrollHeight = containerRef.scrollHeight
-        
-        // 自动滚动
-        if (enabled && !isUserScrolledUp) {
-          scrollToBottom()
-        }
-      }, 0)
+      await tick()
+      
+      if (!containerRef) return
+      
+      // 如果没有滚动条，重置状态
+      if (!hasScrollbar()) {
+        isUserScrolledUp = false
+      }
+      
+      // 更新 scrollHeight 记录（内容变化后）
+      lastScrollHeight = containerRef.scrollHeight
+      
+      // 自动滚动
+      if (enabled && !isUserScrolledUp) {
+        scrollToBottom()
+      }
     })
     
     observer.observe(containerRef, {

package/dist/components/Incremark.svelte

@@ -6,24 +6,14 @@
 <script lang="ts">
   import type { Component } from 'svelte'
   import type { Readable } from 'svelte/store'
-  import type { RootContent } from '@incremark/core'
+  import type { RootContent, ParsedBlock } from '@incremark/core'
   import type { HTML } from 'mdast'
-  
+
   import { getDefinitionsContext } from '../context/definitionsContext'
   import type { UseIncremarkReturn } from '../stores/useIncremark'
-  import type { ComponentMap, BlockWithStableId } from './types'
-  
-  // 导入默认组件
-  import IncremarkParagraph from './IncremarkParagraph.svelte'
-  import IncremarkHeading from './IncremarkHeading.svelte'
-  import IncremarkCode from './IncremarkCode.svelte'
-  import IncremarkList from './IncremarkList.svelte'
-  import IncremarkTable from './IncremarkTable.svelte'
-  import IncremarkBlockquote from './IncremarkBlockquote.svelte'
-  import IncremarkThematicBreak from './IncremarkThematicBreak.svelte'
-  import IncremarkMath from './IncremarkMath.svelte'
-  import IncremarkHtmlElement from './IncremarkHtmlElement.svelte'
-  import IncremarkDefault from './IncremarkDefault.svelte'
+  import type { ComponentMap, RenderableBlock } from './types'
+
+  // 导入组件
   import IncremarkFootnotes from './IncremarkFootnotes.svelte'
   import IncremarkRenderer from './IncremarkRenderer.svelte'
 
@@ -39,13 +29,18 @@
    */
   interface Props {
     /** 要渲染的块列表（来自 useIncremark 的 blocks） */
-    blocks?: BlockWithStableId[] | Readable<BlockWithStableId[]>
+    blocks?: RenderableBlock[] | Readable<RenderableBlock[]>
+    /** 内容是否完全显示完成（用于控制脚注等需要在内容完全显示后才出现的元素）
+     * 如果传入了 incremark，则会自动使用 incremark.isDisplayComplete，此 prop 被忽略 */
+    isDisplayComplete?: boolean
     /** 自定义组件映射，key 为节点类型 */
     components?: ComponentMap
     /** 自定义容器组件映射，key 为容器名称（如 'warning', 'info'） */
     customContainers?: Record<string, Component<any>>
     /** 自定义代码块组件映射，key 为代码语言名称（如 'echart', 'mermaid'） */
     customCodeBlocks?: Record<string, Component<any>>
+    /** 代码块配置映射，key 为代码语言名称 */
+    codeBlockConfigs?: Record<string, { takeOver?: boolean }>
     /** 待处理块的样式类名 */
     pendingClass?: string
     /** 已完成块的样式类名 */
@@ -58,9 +53,11 @@
 
   let {
     blocks = [],
+    isDisplayComplete = false,
     components = {},
     customContainers = {},
     customCodeBlocks = {},
+    codeBlockConfigs = {},
     pendingClass = 'incremark-pending',
     completedClass = 'incremark-completed',
     showBlockStatus = false,
@@ -70,83 +67,49 @@
   const context = getDefinitionsContext();
   const footnoteReferenceOrder = $derived(context?.footnoteReferenceOrder ?? []);
 
-  // 计算 isDisplayComplete（当不使用 incremark 时）
-  const actualIsDisplayComplete = $derived.by(() => {
-    if (incremark) {
-      // 如果提供了 incremark，在模板中直接使用 $incremark.isDisplayComplete
-      return false
-    }
-    // 如果手动传入 blocks，自动判断是否所有 block 都是 completed
-    const blocksArray = Array.isArray(blocks) ? blocks : []
-    return blocksArray.length > 0 && blocksArray.every(b => b.status === 'completed')
-  })
-
-  // 默认组件映射
-  const defaultComponents: ComponentMap = {
-    paragraph: IncremarkParagraph,
-    heading: IncremarkHeading,
-    code: IncremarkCode,
-    list: IncremarkList,
-    table: IncremarkTable,
-    blockquote: IncremarkBlockquote,
-    thematicBreak: IncremarkThematicBreak,
-    math: IncremarkMath,
-    inlineMath: IncremarkMath,
-    htmlElement: IncremarkHtmlElement
-  }
-
-  // 合并用户组件和默认组件
-  const mergedComponents = $derived({
-    ...defaultComponents,
-    ...components
-  })
-
-  // 处理 blocks（可能是 store 或数组）
-  const blocksArray = $derived.by(() => {
-    if (incremark) {
-      // 如果提供了 incremark，在模板中直接使用 incremark.blocks（store）
-      return []
-    }
-    return Array.isArray(blocks) ? blocks : []
-  })
-
-  // 提取 incremark 的 stores（如果存在）
-  const incremarkBlocks = $derived.by(() => incremark?.blocks)
-  const incremarkIsDisplayComplete = $derived.by(() => incremark?.isDisplayComplete)
+  // 当使用 incremark 时，从 incremark 对象中提取 blocks 和 isDisplayComplete
+  const incremarkBlocks = $derived(
+    incremark ? (incremark as any).blocks : []
+  );
+  const incremarkIsDisplayComplete = $derived(
+    incremark ? (incremark as any).isDisplayComplete : false
+  );
 </script>
 
 <div class="incremark">
   <!-- 主要内容块 -->
-  {#if incremark && incremarkBlocks}
+  {#if incremark}
     <!-- 使用 incremark 的 blocks store -->
-    {#each ($incremarkBlocks || []) as block (block.stableId)}
-      {#if block.node.type !== 'definition' && block.node.type !== 'footnoteDefinition'}
+    {#each $incremarkBlocks as block (block.id)}
+      {#if (block as ParsedBlock).node.type !== 'definition' && (block as ParsedBlock).node.type !== 'footnoteDefinition'}
         <div
-          class="incremark-block {block.status === 'completed' ? completedClass : pendingClass} {showBlockStatus ? 'incremark-show-status' : ''} {(block as BlockWithStableId).isLastPending ? 'incremark-last-pending' : ''}"
+          class="incremark-block {(block as ParsedBlock).status === 'completed' ? completedClass : pendingClass} {showBlockStatus ? 'incremark-show-status' : ''} {(block as RenderableBlock).isLastPending ? 'incremark-last-pending' : ''}"
         >
           <!-- 使用 IncremarkRenderer，传递 customContainers 和 customCodeBlocks -->
-          <IncremarkRenderer 
-            node={block.node} 
+          <IncremarkRenderer
+            node={(block as ParsedBlock).node}
             customContainers={customContainers}
             customCodeBlocks={customCodeBlocks}
-            blockStatus={block.status}
+            codeBlockConfigs={codeBlockConfigs}
+            blockStatus={(block as ParsedBlock).status}
           />
         </div>
       {/if}
     {/each}
   {:else}
     <!-- 使用传入的 blocks 数组 -->
-    {#each blocksArray as block (block.stableId)}
-      {#if block.node.type !== 'definition' && block.node.type !== 'footnoteDefinition'}
+    {#each (Array.isArray(blocks) ? blocks : []) as block (block.id)}
+      {#if (block as ParsedBlock).node.type !== 'definition' && (block as ParsedBlock).node.type !== 'footnoteDefinition'}
         <div
-          class="incremark-block {block.status === 'completed' ? completedClass : pendingClass} {showBlockStatus ? 'incremark-show-status' : ''} {block.isLastPending ? 'incremark-last-pending' : ''}"
+          class="incremark-block {(block as ParsedBlock).status === 'completed' ? completedClass : pendingClass} {showBlockStatus ? 'incremark-show-status' : ''} {(block as RenderableBlock).isLastPending ? 'incremark-last-pending' : ''}"
         >
           <!-- 使用 IncremarkRenderer，传递 customContainers 和 customCodeBlocks -->
-          <IncremarkRenderer 
-            node={block.node} 
+          <IncremarkRenderer
+            node={(block as ParsedBlock).node}
             customContainers={customContainers}
             customCodeBlocks={customCodeBlocks}
-            blockStatus={block.status}
+            codeBlockConfigs={codeBlockConfigs}
+            blockStatus={(block as ParsedBlock).status}
           />
         </div>
       {/if}
@@ -154,12 +117,12 @@
   {/if}
 
   <!-- 脚注列表（仅在内容完全显示后显示） -->
-  {#if incremark && incremarkIsDisplayComplete && footnoteReferenceOrder && $incremarkIsDisplayComplete}
+  {#if incremark && $incremarkIsDisplayComplete && $footnoteReferenceOrder}
     {@const footnoteOrder = $footnoteReferenceOrder ?? []}
     {#if footnoteOrder.length > 0}
       <IncremarkFootnotes />
     {/if}
-  {:else if !incremark && actualIsDisplayComplete && footnoteReferenceOrder}
+  {:else if !incremark && isDisplayComplete && $footnoteReferenceOrder}
     {@const footnoteOrder = $footnoteReferenceOrder ?? []}
     {#if footnoteOrder.length > 0}
       <IncremarkFootnotes />

package/dist/components/Incremark.svelte.d.ts

@@ -1,19 +1,26 @@
 import type { Component } from 'svelte';
 import type { Readable } from 'svelte/store';
 import type { UseIncremarkReturn } from '../stores/useIncremark';
-import type { ComponentMap, BlockWithStableId } from './types';
+import type { ComponentMap, RenderableBlock } from './types';
 /**
  * 组件 Props
  */
 interface Props {
     /** 要渲染的块列表（来自 useIncremark 的 blocks） */
-    blocks?: BlockWithStableId[] | Readable<BlockWithStableId[]>;
+    blocks?: RenderableBlock[] | Readable<RenderableBlock[]>;
+    /** 内容是否完全显示完成（用于控制脚注等需要在内容完全显示后才出现的元素）
+     * 如果传入了 incremark，则会自动使用 incremark.isDisplayComplete，此 prop 被忽略 */
+    isDisplayComplete?: boolean;
     /** 自定义组件映射，key 为节点类型 */
     components?: ComponentMap;
     /** 自定义容器组件映射，key 为容器名称（如 'warning', 'info'） */
     customContainers?: Record<string, Component<any>>;
     /** 自定义代码块组件映射，key 为代码语言名称（如 'echart', 'mermaid'） */
     customCodeBlocks?: Record<string, Component<any>>;
+    /** 代码块配置映射，key 为代码语言名称 */
+    codeBlockConfigs?: Record<string, {
+        takeOver?: boolean;
+    }>;
     /** 待处理块的样式类名 */
     pendingClass?: string;
     /** 已完成块的样式类名 */

package/dist/components/Incremark.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Incremark.svelte.d.ts","sourceRoot":"","sources":["../../src/components/Incremark.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AACvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAK5C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAChE,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAgB5D;;GAEG;AACH,UAAU,KAAK;IACb,wCAAwC;IACxC,MAAM,CAAC,EAAE,iBAAiB,EAAE,GAAG,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAA;IAC5D,wBAAwB;IACxB,UAAU,CAAC,EAAE,YAAY,CAAA;IACzB,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC,CAAA;IACjD,oDAAoD;IACpD,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC,CAAA;IACjD,gBAAgB;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,gBAAgB;IAChB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,gBAAgB;IAChB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,sCAAsC;IACtC,SAAS,CAAC,EAAE,kBAAkB,CAAA;CAC/B;AAuIH,QAAA,MAAM,SAAS,0BAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Incremark.svelte.d.ts","sourceRoot":"","sources":["../../src/components/Incremark.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AACvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAK5C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAChE,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAM1D;;GAEG;AACH,UAAU,KAAK;IACb,wCAAwC;IACxC,MAAM,CAAC,EAAE,eAAe,EAAE,GAAG,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAA;IACxD;uEACmE;IACnE,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,wBAAwB;IACxB,UAAU,CAAC,EAAE,YAAY,CAAA;IACzB,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC,CAAA;IACjD,oDAAoD;IACpD,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC,CAAA;IACjD,0BAA0B;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAA;IACzD,gBAAgB;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,gBAAgB;IAChB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,gBAAgB;IAChB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,sCAAsC;IACtC,SAAS,CAAC,EAAE,kBAAkB,CAAA;CAC/B;AA2FH,QAAA,MAAM,SAAS,0BAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/IncremarkBlockquote.svelte

@@ -1,11 +1,11 @@
 <!--
   @file IncremarkBlockquote.svelte - 引用组件
-  @description 渲染 Markdown 引用块
+  @description 渲染 Markdown 引用块，支持所有块级内容
 -->
 
 <script lang="ts">
   import type { Blockquote } from 'mdast'
-  import IncremarkParagraph from './IncremarkParagraph.svelte'
+  import IncremarkRenderer from './IncremarkRenderer.svelte'
 
   /**
    * 组件 Props
@@ -20,11 +20,7 @@
 
 <blockquote class="incremark-blockquote">
   {#each node.children as child, index (index)}
-    {#if child.type === 'paragraph'}
-      <IncremarkParagraph node={child} />
-    {:else}
-      <div class="unknown-child">{child.type}</div>
-    {/if}
+    <IncremarkRenderer node={child} />
   {/each}
 </blockquote>
 

package/dist/components/IncremarkBlockquote.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IncremarkBlockquote.svelte.d.ts","sourceRoot":"","sources":["../../src/components/IncremarkBlockquote.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAIrC;;GAEG;AACH,UAAU,KAAK;IACb,WAAW;IACX,IAAI,EAAE,UAAU,CAAA;CACjB;AAwBH,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"IncremarkBlockquote.svelte.d.ts","sourceRoot":"","sources":["../../src/components/IncremarkBlockquote.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAIrC;;GAEG;AACH,UAAU,KAAK;IACb,WAAW;IACX,IAAI,EAAE,UAAU,CAAA;CACjB;AAoBH,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/components/IncremarkCode.svelte

@@ -1,11 +1,6 @@
-<!--
-  @file IncremarkCode.svelte - 代码块组件
-  @description 渲染 Markdown 代码块，支持 Shiki 代码高亮和 Mermaid 图表渲染
--->
-
 <script lang="ts">
   import type { Code } from 'mdast'
-  import { onMount, onDestroy } from 'svelte'
+  import { useShiki } from '../stores/useShiki.svelte'
 
   /**
    * 组件 Props
@@ -15,12 +10,16 @@
     node: Code
     /** Shiki 主题，默认 github-dark */
     theme?: string
+    /** 默认回退主题（当指定主题加载失败时使用），默认 github-dark */
+    fallbackTheme?: string
     /** 是否禁用代码高亮 */
     disableHighlight?: boolean
     /** Mermaid 渲染延迟（毫秒），用于流式输入时防抖 */
     mermaidDelay?: number
     /** 自定义代码块组件映射，key 为代码语言名称 */
     customCodeBlocks?: Record<string, any>
+    /** 代码块配置映射，key 为代码语言名称 */
+    codeBlockConfigs?: Record<string, { takeOver?: boolean }>
     /** 块状态，用于判断是否使用自定义组件 */
     blockStatus?: 'pending' | 'stable' | 'completed'
   }
@@ -28,17 +27,17 @@
   let {
     node,
     theme = 'github-dark',
+    fallbackTheme = 'github-dark',
     disableHighlight = false,
     mermaidDelay = 500,
     customCodeBlocks,
+    codeBlockConfigs,
     blockStatus = 'completed'
   }: Props = $props()
 
   // 状态
   let copied = $state(false)
   let highlightedHtml = $state('')
-  let isHighlighting = $state(false)
-  let highlightError = $state(false)
 
   // Mermaid 支持
   let mermaidSvg = $state('')
@@ -49,10 +48,8 @@
   // 视图模式：'preview' | 'source'
   let mermaidViewMode = $state<'preview' | 'source'>('preview')
 
-  // 缓存 highlighter
-  let highlighterRef: any = null
-  const loadedLanguages = new Set<string>()
-  const loadedThemes = new Set<string>()
+  // 使用 Shiki 单例管理器 - 修复：传入 getter 闭包以保持响应式
+  const shiki = useShiki(() => theme)
 
   /**
    * 计算属性
@@ -63,15 +60,16 @@
 
   // 检查是否有自定义代码块组件
   const CustomCodeBlock = $derived.by(() => {
-    // 如果代码块还在 pending 状态，不使用自定义组件
-    if (blockStatus === 'pending') {
-      return null
-    }
-    return customCodeBlocks?.[language] || null
-  })
+    const component = customCodeBlocks?.[language]
+    if (!component) return null
+
+    const config = codeBlockConfigs?.[language]
 
-  // 是否使用自定义组件
-  const useCustomComponent = $derived(!!CustomCodeBlock)
+    if (config?.takeOver) return component
+    if (blockStatus !== 'completed') return null
+
+    return component
+  })
 
   /**
    * 切换 Mermaid 视图模式
@@ -80,54 +78,30 @@
     mermaidViewMode = mermaidViewMode === 'preview' ? 'source' : 'preview'
   }
 
-  /**
-   * Mermaid 渲染（带防抖动）
-   */
-  function scheduleRenderMermaid() {
-    if (!isMermaid || !code) return
-
-    // 清除之前的定时器
-    if (mermaidTimer) {
-      clearTimeout(mermaidTimer)
-    }
-
-    // 显示加载状态
-    mermaidLoading = true
-
-    // 防抖动延迟渲染
-    mermaidTimer = setTimeout(() => {
-      doRenderMermaid()
-    }, mermaidDelay)
-  }
-
   /**
    * 执行 Mermaid 渲染
    */
   async function doRenderMermaid() {
     if (!code) return
-
     mermaidError = ''
 
     try {
-      // 动态导入 mermaid
       if (!mermaidRef) {
-        // @ts-ignore - mermaid 是可选依赖
+        // @ts-ignore
         const mermaidModule = await import('mermaid')
         mermaidRef = mermaidModule.default
         mermaidRef.initialize({
           startOnLoad: false,
           theme: 'dark',
-          securityLevel: 'loose'
+          securityLevel: 'loose',
+          suppressErrorRendering: true
         })
       }
 
-      const mermaid = mermaidRef
       const id = `mermaid-${Date.now()}-${Math.random().toString(36).slice(2)}`
-
-      const { svg } = await mermaid.render(id, code)
+      const { svg } = await mermaidRef.render(id, code)
       mermaidSvg = svg
     } catch (e: any) {
-      // 不显示错误，可能是代码还不完整
       mermaidError = ''
       mermaidSvg = ''
     } finally {
@@ -138,9 +112,12 @@
   /**
    * 动态加载 shiki 并高亮
    */
-  async function highlight() {
+  async function doHighlight() {
     if (isMermaid) {
-      scheduleRenderMermaid()
+      // Mermaid 防抖逻辑
+      if (mermaidTimer) clearTimeout(mermaidTimer)
+      mermaidLoading = true
+      mermaidTimer = setTimeout(doRenderMermaid, mermaidDelay)
       return
     }
 
@@ -149,54 +126,12 @@
       return
     }
 
-    isHighlighting = true
-    highlightError = false
-
     try {
-      // 动态导入 shiki
-      if (!highlighterRef) {
-        const { createHighlighter } = await import('shiki')
-        highlighterRef = await createHighlighter({
-          themes: [theme as any],
-          langs: []
-        })
-        loadedThemes.add(theme)
-      }
-
-      const highlighter = highlighterRef
-      const lang = language
-
-      // 按需加载语言
-      if (!loadedLanguages.has(lang) && lang !== 'text') {
-        try {
-          await highlighter.loadLanguage(lang)
-          loadedLanguages.add(lang)
-        } catch {
-          // 语言不支持，标记但不阻止
-        }
-      }
-
-      // 按需加载主题
-      if (!loadedThemes.has(theme)) {
-        try {
-          await highlighter.loadTheme(theme)
-          loadedThemes.add(theme)
-        } catch {
-          // 主题不支持
-        }
-      }
-
-      const html = highlighter.codeToHtml(code, {
-        lang: loadedLanguages.has(lang) ? lang : 'text',
-        theme: loadedThemes.has(theme) ? theme : 'github-dark'
-      })
+      // 调用经过修复的 shiki.highlight
+      const html = await shiki.highlight(code, language, fallbackTheme)
       highlightedHtml = html
     } catch (e) {
-      // Shiki 不可用或加载失败
-      highlightError = true
       highlightedHtml = ''
-    } finally {
-      isHighlighting = false
     }
   }
 
@@ -207,35 +142,29 @@
     try {
       await navigator.clipboard.writeText(code)
       copied = true
-      setTimeout(() => {
-        copied = false
-      }, 2000)
-    } catch {
-      // 复制失败静默处理
-    }
+      setTimeout(() => { copied = false }, 2000)
+    } catch { /* 静默处理 */ }
   }
 
-  // 监听代码变化，重新高亮/渲染
+  // 监听代码、主题、语言变化并重新渲染
   $effect(() => {
-    highlight()
-  })
-
-  // 清理
-  onDestroy(() => {
-    if (mermaidTimer) {
-      clearTimeout(mermaidTimer)
+    doHighlight()
+    
+    // 返回清理函数取代 onDestroy
+    return () => {
+      if (mermaidTimer) clearTimeout(mermaidTimer)
     }
   })
 </script>
 
-<!-- 自定义代码块组件 -->
-{#if useCustomComponent && CustomCodeBlock}
-  <svelte:component 
-    this={CustomCodeBlock} 
+{#if CustomCodeBlock}
+  {@const Component = CustomCodeBlock}
+  <Component 
     codeStr={code} 
-    lang={language}
+    lang={language} 
+    completed={blockStatus === 'completed'} 
+    takeOver={codeBlockConfigs?.[language]?.takeOver} 
   />
-<!-- Mermaid 图表 -->
 {:else if isMermaid}
   <div class="incremark-mermaid">
     <div class="mermaid-header">
@@ -255,23 +184,18 @@
       </div>
     </div>
     <div class="mermaid-content">
-      <!-- 加载中 -->
       {#if mermaidLoading && !mermaidSvg}
         <pre class="mermaid-source-code">{code}</pre>
-      <!-- 源码模式 -->
       {:else if mermaidViewMode === 'source'}
         <pre class="mermaid-source-code">{code}</pre>
-      <!-- 预览模式 -->
       {:else if mermaidSvg}
         {@html mermaidSvg}
-      <!-- 无法渲染时显示源码 -->
       {:else}
         <pre class="mermaid-source-code">{code}</pre>
       {/if}
     </div>
   </div>
 {:else}
-  <!-- 普通代码块 -->
   <div class="incremark-code">
     <div class="code-header">
       <span class="language">{language}</span>
@@ -280,21 +204,17 @@
       </button>
     </div>
     <div class="code-content">
-      <!-- 正在加载高亮 -->
-      {#if isHighlighting && !highlightedHtml}
+      {#if shiki.isHighlighting && !highlightedHtml}
         <div class="code-loading">
           <pre><code>{code}</code></pre>
         </div>
-      <!-- 高亮后的代码 -->
       {:else if highlightedHtml}
         <div class="shiki-wrapper">
           {@html highlightedHtml}
         </div>
-      <!-- 回退：无高亮 -->
       {:else}
         <pre class="code-fallback"><code>{code}</code></pre>
       {/if}
     </div>
   </div>
 {/if}
-

package/dist/components/IncremarkCode.svelte.d.ts

@@ -7,12 +7,18 @@ interface Props {
     node: Code;
     /** Shiki 主题，默认 github-dark */
     theme?: string;
+    /** 默认回退主题（当指定主题加载失败时使用），默认 github-dark */
+    fallbackTheme?: string;
     /** 是否禁用代码高亮 */
     disableHighlight?: boolean;
     /** Mermaid 渲染延迟（毫秒），用于流式输入时防抖 */
     mermaidDelay?: number;
     /** 自定义代码块组件映射，key 为代码语言名称 */
     customCodeBlocks?: Record<string, any>;
+    /** 代码块配置映射，key 为代码语言名称 */
+    codeBlockConfigs?: Record<string, {
+        takeOver?: boolean;
+    }>;
     /** 块状态，用于判断是否使用自定义组件 */
     blockStatus?: 'pending' | 'stable' | 'completed';
 }

package/dist/components/IncremarkCode.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IncremarkCode.svelte.d.ts","sourceRoot":"","sources":["../../src/components/IncremarkCode.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAI/B;;GAEG;AACH,UAAU,KAAK;IACb,WAAW;IACX,IAAI,EAAE,IAAI,CAAA;IACV,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,eAAe;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6BAA6B;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACtC,wBAAwB;IACxB,WAAW,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,WAAW,CAAA;CACjD;AAmRH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"IncremarkCode.svelte.d.ts","sourceRoot":"","sources":["../../src/components/IncremarkCode.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAI/B;;GAEG;AACH,UAAU,KAAK;IACb,WAAW;IACX,IAAI,EAAE,IAAI,CAAA;IACV,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,eAAe;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6BAA6B;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACtC,0BAA0B;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAA;IACzD,wBAAwB;IACxB,WAAW,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,WAAW,CAAA;CACjD;AAiMH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}