Core & UI: fix type unions on dynamic codeblock

.changeset/curly-tigers-cough.md

@@ -0,0 +1,6 @@
+---
+'fumadocs-core': patch
+'fumadocs-ui': patch
+---
+
+Fix type problems on dynamic codeblock

apps/docs/components/preview/dynamic-codeblock.tsx

@@ -27,7 +27,16 @@ export default function Example() {
           className="bg-transparent px-4 py-2 text-sm focus-visible:outline-none"
         />
       </div>
-      <DynamicCodeBlock lang={lang} code={code} options={{}} />
+      <DynamicCodeBlock
+        lang={lang}
+        code={code}
+        options={{
+          themes: {
+            light: 'catppuccin-latte',
+            dark: 'catppuccin-mocha',
+          },
+        }}
+      />
     </div>
   );
 }

apps/docs/content/docs/ui/components/dynamic-codeblock.mdx

@@ -29,6 +29,10 @@ import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
   lang="ts"
   code='console.log("Hello World")'
   options={{
+    themes: {
+      light: 'github-light',
+      dark: 'github-dark',
+    },
     components: {
       // add/override components
     },

packages/core/src/highlight/index.ts

@@ -2,4 +2,6 @@ export {
   highlight,
   createStyleTransformer,
   type HighlightOptions,
+  type HighlightOptionsCommon,
+  type HighlightOptionsThemes,
 } from './shiki';

packages/core/src/highlight/shiki.ts

@@ -35,13 +35,17 @@ export const defaultThemes = {
   dark: 'github-dark',
 };
 
-export type HighlightOptions = CodeToHastOptionsCommon<BundledLanguage> &
-  (CodeOptionsThemes<BundledTheme> | Record<never, never>) &
+export type HighlightOptionsCommon = CodeToHastOptionsCommon<BundledLanguage> &
   CodeOptionsMeta & {
     engine?: Awaitable<RegexEngine>;
     components?: Partial<Components>;
   };
 
+export type HighlightOptionsThemes = CodeOptionsThemes<BundledTheme>;
+
+export type HighlightOptions = HighlightOptionsCommon &
+  (HighlightOptionsThemes | Record<never, never>);
+
 const highlighters = new Map<string, Promise<Highlighter>>();
 
 export async function _highlight(code: string, options: HighlightOptions) {

packages/ui/src/components/dynamic-codeblock.tsx

@@ -1,6 +1,9 @@
 'use client';
 import { CodeBlock, Pre } from '@/components/codeblock';
-import type { HighlightOptions } from 'fumadocs-core/highlight';
+import type {
+  HighlightOptionsCommon,
+  HighlightOptionsThemes,
+} from 'fumadocs-core/highlight';
 import { useShiki } from 'fumadocs-core/highlight/client';
 import { cn } from '@/utils/cn';
 
@@ -12,7 +15,7 @@ const components = {
       </CodeBlock>
     );
   },
-} satisfies HighlightOptions['components'];
+} satisfies HighlightOptionsCommon['components'];
 
 export function DynamicCodeBlock({
   lang,
@@ -21,7 +24,7 @@ export function DynamicCodeBlock({
 }: {
   lang: string;
   code: string;
-  options?: Omit<HighlightOptions, 'lang'>;
+  options?: Omit<HighlightOptionsCommon, 'lang'> & HighlightOptionsThemes;
 }) {
   return useShiki(code, {
     lang,