TypeScript: Use Universal Shiki configuartion for Markdown renderer

Author: fuma-nama

.changeset/tired-adults-dream.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-typescript': minor
+---
+
+Use Universal Shiki configuartion for Markdown renderer

packages/typescript/package.json

@@ -65,8 +65,8 @@
   },
   "peerDependencies": {
     "@types/react": "*",
-    "fumadocs-core": "^15.7.0 || ^16.0.0",
-    "fumadocs-ui": "^15.7.0 || ^16.0.0",
+    "fumadocs-core": "^16.5.0",
+    "fumadocs-ui": "^16.5.0",
     "react": "*",
     "typescript": "*"
   },

packages/typescript/src/index.ts

@@ -1,5 +1,5 @@
 export * from '@/lib/base';
-export { renderMarkdownToHast } from './markdown';
+export type { MarkdownRenderer } from './markdown';
 export { createProject } from './create-project';
 export * from '@/lib/remark-auto-type-table';
 export * from './cache/fs-cache';

packages/typescript/src/lib/remark-auto-type-table.ts

@@ -3,12 +3,13 @@ import type { Nodes } from 'hast';
 import type { Transformer } from 'unified';
 import type { Expression, ExpressionStatement, ObjectExpression, Program } from 'estree';
 import { createGenerator, type DocEntry, type Generator } from '@/lib/base';
-import { renderMarkdownToHast, renderTypeToHast } from '@/markdown';
+import { type MarkdownRenderer, markdownRenderer } from '@/markdown';
 import { valueToEstree } from 'estree-util-value-to-estree';
 import { visit } from 'unist-util-visit';
 import { type BaseTypeTableProps, type GenerateTypeTableOptions } from '@/lib/type-table';
 import { toEstree } from 'hast-util-to-estree';
 import { type ParameterTag, parseTags } from '@/lib/parse-tags';
+import type { ResolvedShikiConfig } from 'fumadocs-core/highlight/config';
 
 function objectBuilder() {
   const out: ObjectExpression = {
@@ -46,21 +47,19 @@ function objectBuilder() {
 
 async function buildTypeProp(
   entries: DocEntry[],
-  {
-    renderMarkdown = renderMarkdownToHast,
-    renderType = renderTypeToHast,
-  }: RemarkAutoTypeTableOptions,
+  renderer: MarkdownRenderer,
 ): Promise<ObjectExpression> {
   async function onItem(entry: DocEntry) {
     const node = objectBuilder();
     const tags = parseTags(entry.tags);
-    node.addJsxProperty('type', await renderType(entry.simplifiedType));
-    node.addJsxProperty('typeDescription', await renderType(entry.type));
+    node.addJsxProperty('type', await renderer.renderTypeToHast(entry.simplifiedType));
+    node.addJsxProperty('typeDescription', await renderer.renderTypeToHast(entry.type));
     node.addExpressionNode('required', valueToEstree(entry.required));
 
-    if (tags.default) node.addJsxProperty('default', await renderType(tags.default));
+    if (tags.default) node.addJsxProperty('default', await renderer.renderTypeToHast(tags.default));
 
-    if (tags.returns) node.addJsxProperty('returns', await renderMarkdown(tags.returns));
+    if (tags.returns)
+      node.addJsxProperty('returns', await renderer.renderMarkdownToHast(tags.returns));
 
     if (tags.params) {
       node.addExpressionNode('parameters', {
@@ -70,7 +69,7 @@ async function buildTypeProp(
     }
 
     if (entry.description) {
-      node.addJsxProperty('description', await renderMarkdown(entry.description));
+      node.addJsxProperty('description', await renderer.renderMarkdownToHast(entry.description));
     }
 
     return node.build();
@@ -80,7 +79,7 @@ async function buildTypeProp(
     const node = objectBuilder();
     node.addExpressionNode('name', valueToEstree(param.name));
     if (param.description)
-      node.addJsxProperty('description', await renderMarkdown(param.description));
+      node.addJsxProperty('description', await renderer.renderMarkdownToHast(param.description));
 
     return node.build();
   }
@@ -111,8 +110,12 @@ export interface RemarkAutoTypeTableOptions {
    */
   outputName?: string;
 
-  renderMarkdown?: typeof renderMarkdownToHast;
-  renderType?: typeof renderTypeToHast;
+  /**
+   * config for Shiki when using default `renderMarkdown` & `renderType`.
+   */
+  shiki?: ResolvedShikiConfig;
+  renderMarkdown?: MarkdownRenderer['renderMarkdownToHast'];
+  renderType?: MarkdownRenderer['renderTypeToHast'];
 
   /**
    * Customise type table generation
@@ -145,7 +148,19 @@ export function remarkAutoTypeTable(
     options: generateOptions = {},
     remarkStringify = true,
     generator = createGenerator(),
+    renderMarkdown,
+    renderType,
+    shiki,
   } = config;
+  let renderer: MarkdownRenderer;
+
+  if (renderMarkdown && renderType) {
+    renderer = { renderMarkdownToHast: renderMarkdown, renderTypeToHast: renderType };
+  } else {
+    renderer = markdownRenderer(shiki);
+    if (renderMarkdown) renderer.renderMarkdownToHast = renderMarkdown;
+    if (renderType) renderer.renderTypeToHast = renderType;
+  }
 
   return async (tree, file) => {
     const queue: Promise<void>[] = [];
@@ -178,7 +193,7 @@ export function remarkAutoTypeTable(
                     body: [
                       {
                         type: 'ExpressionStatement',
-                        expression: await buildTypeProp(doc.entries, config),
+                        expression: await buildTypeProp(doc.entries, renderer),
                       },
                     ],
                   } satisfies Program,

packages/typescript/src/markdown.ts

@@ -1,58 +1,56 @@
 import type { ElementContent, Nodes } from 'hast';
 import { remark } from 'remark';
 import { remarkGfm } from 'fumadocs-core/mdx-plugins/remark-gfm';
-import { rehypeCode, type RehypeCodeOptions } from 'fumadocs-core/mdx-plugins/rehype-code';
+import { createRehypeCode } from 'fumadocs-core/mdx-plugins/rehype-code.min';
 import remarkRehype from 'remark-rehype';
-import { getHighlighter } from 'fumadocs-core/highlight';
+import { highlightHast } from 'fumadocs-core/highlight/core';
+import { withJSEngine } from 'fumadocs-core/highlight/full/config';
 
-const shikiOptions = {
-  lazy: true,
-  langs: ['ts', 'tsx'],
-
-  // disable default transformers & meta parser
-  transformers: [],
-  parseMetaString: undefined,
-
-  themes: {
-    light: 'github-light',
-    dark: 'github-dark',
-  },
-} satisfies RehypeCodeOptions;
-
-const processor = remark().use(remarkGfm).use(remarkRehype).use(rehypeCode, shikiOptions);
-
-export async function renderTypeToHast(type: string): Promise<Nodes> {
-  const highlighter = await getHighlighter('js', {
-    langs: ['ts'],
-    themes: Object.values(shikiOptions.themes),
-  });
-
-  const nodes = highlighter.codeToHast(type, {
-    lang: 'ts',
-    structure: 'inline',
-    themes: shikiOptions.themes,
-    defaultColor: false,
-  });
+export interface MarkdownRenderer {
+  renderTypeToHast: (type: string) => Nodes | Promise<Nodes>;
+  renderMarkdownToHast: (md: string) => Nodes | Promise<Nodes>;
+}
 
+export function markdownRenderer(shiki = withJSEngine): MarkdownRenderer {
+  const processor = remark()
+    .use(remarkGfm)
+    .use(remarkRehype)
+    .use(createRehypeCode(shiki), {
+      lazy: true,
+      langs: ['ts', 'tsx'],
+      // disable default transformers & meta parser
+      transformers: [],
+      parseMetaString: undefined,
+    });
   return {
-    type: 'element',
-    tagName: 'span',
-    properties: {
-      class: 'shiki',
-    },
-    children: [
-      {
+    async renderTypeToHast(type) {
+      const nodes = await highlightHast(type, {
+        config: shiki,
+        lang: 'ts',
+        structure: 'inline',
+        defaultColor: false,
+      });
+
+      return {
         type: 'element',
-        tagName: 'code',
-        properties: {},
-        children: nodes.children as ElementContent[],
-      },
-    ],
-  };
-}
-
-export async function renderMarkdownToHast(md: string): Promise<Nodes> {
-  md = md.replace(/{@link (?<link>[^}]*)}/g, '$1'); // replace jsdoc links
+        tagName: 'span',
+        properties: {
+          class: 'shiki',
+        },
+        children: [
+          {
+            type: 'element',
+            tagName: 'code',
+            properties: {},
+            children: nodes.children as ElementContent[],
+          },
+        ],
+      };
+    },
+    renderMarkdownToHast(md) {
+      md = md.replace(/{@link (?<link>[^}]*)}/g, '$1'); // replace jsdoc links
 
-  return processor.run(processor.parse(md));
+      return processor.run(processor.parse(md));
+    },
+  };
 }

packages/typescript/src/ui/auto-type-table.tsx

@@ -2,29 +2,42 @@ import { type ParameterNode, type TypeNode, TypeTable } from 'fumadocs-ui/compon
 import { type Jsx, toJsxRuntime } from 'hast-util-to-jsx-runtime';
 import * as runtime from 'react/jsx-runtime';
 import defaultMdxComponents from 'fumadocs-ui/mdx';
-import { renderMarkdownToHast, renderTypeToHast } from '@/markdown';
 import 'server-only';
 import type { ReactNode } from 'react';
 import { type BaseTypeTableProps, type GenerateTypeTableOptions } from '@/lib/type-table';
 import { type Generator } from '@/lib/base';
 import type { Nodes } from 'hast';
 import { parseTags } from '@/lib/parse-tags';
+import type { ResolvedShikiConfig } from 'fumadocs-core/highlight/config';
+import { markdownRenderer } from '@/markdown';
 
-export type AutoTypeTableProps = BaseTypeTableProps;
+interface JSXMarkdownRenderer {
+  renderMarkdown: (md: string) => Promise<ReactNode>;
+  renderType: (type: string) => Promise<ReactNode>;
+}
+
+export interface AutoTypeTableProps extends BaseTypeTableProps, Partial<JSXMarkdownRenderer> {
+  generator: Generator;
+
+  /** Shiki configuration when using default `renderMarkdown` & `renderType` */
+  shiki?: ResolvedShikiConfig;
+  options?: GenerateTypeTableOptions;
+}
 
 export async function AutoTypeTable({
   generator,
   options = {},
-  renderType = renderTypeDefault,
-  renderMarkdown = renderMarkdownDefault,
+  renderType,
+  renderMarkdown,
+  shiki,
   ...props
-}: AutoTypeTableProps & {
-  generator: Generator;
+}: AutoTypeTableProps) {
+  if (!renderType || !renderMarkdown) {
+    const renderer = markdownRenderer(shiki);
+    renderType ??= async (v) => toJsx(await renderer.renderTypeToHast(v));
+    renderMarkdown ??= async (v) => toJsx(await renderer.renderMarkdownToHast(v));
+  }
 
-  renderMarkdown?: typeof renderMarkdownDefault;
-  renderType?: typeof renderTypeDefault;
-  options?: GenerateTypeTableOptions;
-}) {
   const output = await generator.generateTypeTable(props, options);
 
   return output.map(async (item) => {
@@ -66,11 +79,3 @@ function toJsx(hast: Nodes) {
     components: { ...defaultMdxComponents, img: undefined },
   });
 }
-
-async function renderTypeDefault(type: string): Promise<ReactNode> {
-  return toJsx(await renderTypeToHast(type));
-}
-
-async function renderMarkdownDefault(md: string): Promise<ReactNode> {
-  return toJsx(await renderMarkdownToHast(md));
-}