Core & UI: Remove placeholder space for codeblocks

.changeset/large-hoops-grow.md

@@ -0,0 +1,6 @@
+---
+'fumadocs-core': patch
+'fumadocs-ui': patch
+---
+
+Remove placeholder space for codeblocks

packages/core/src/highlight/index.ts

@@ -1,6 +1,5 @@
 export {
   highlight,
-  createStyleTransformer,
   getHighlighter,
   type HighlightOptions,
   type HighlightOptionsCommon,

packages/core/src/highlight/shiki.ts

@@ -7,7 +7,6 @@ import {
   type CodeToHastOptionsCommon,
   type Highlighter,
   type RegexEngine,
-  type ShikiTransformer,
 } from 'shiki';
 import type { BundledTheme } from 'shiki/themes';
 import { type Components, toJsxRuntime } from 'hast-util-to-jsx-runtime';
@@ -15,21 +14,6 @@ import { Fragment, type ReactNode } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import type { Root } from 'hast';
 
-export function createStyleTransformer(): ShikiTransformer {
-  return {
-    name: 'rehype-code:styles',
-    line(hast) {
-      if (hast.children.length === 0) {
-        // Keep the empty lines when using grid layout
-        hast.children.push({
-          type: 'text',
-          value: ' ',
-        });
-      }
-    },
-  };
-}
-
 export const defaultThemes = {
   light: 'github-light',
   dark: 'github-dark',
@@ -71,7 +55,6 @@ export async function _highlight(code: string, options: HighlightOptions) {
     lang,
     ...rest,
     ...themes,
-    transformers: [createStyleTransformer(), ...(rest.transformers ?? [])],
     defaultColor: 'themes' in themes ? false : undefined,
   });
 }

packages/core/src/mdx-plugins/rehype-code.ts

@@ -15,11 +15,7 @@ import {
 import type { MdxJsxFlowElement } from 'mdast-util-mdx-jsx';
 import type { CodeBlockIcon, IconOptions } from './transformer-icon';
 import { transformerIcon } from './transformer-icon';
-import {
-  createStyleTransformer,
-  defaultThemes,
-  getHighlighter,
-} from '@/highlight/shiki';
+import { defaultThemes, getHighlighter } from '@/highlight/shiki';
 
 interface MetaValue {
   name: string;
@@ -51,7 +47,6 @@ export const rehypeCodeDefaultOptions: RehypeCodeOptions = {
   defaultLanguage: 'plaintext',
   experimentalJSEngine: false,
   transformers: [
-    createStyleTransformer(),
     transformerNotationHighlight({
       matchAlgorithm: 'v3',
     }),

packages/ui/css/shiki.css

@@ -1,8 +1,3 @@
-.fd-codeblock pre > * {
-  display: grid;
-  font-size: 13px;
-}
-
 .shiki:not(.not-fumadocs-codeblock *) {
   code span {
     color: var(--shiki-light);

packages/ui/src/components/codeblock.tsx

@@ -48,7 +48,7 @@ export const Pre = forwardRef<HTMLPreElement, HTMLAttributes<HTMLPreElement>>(
     return (
       <pre
         ref={ref}
-        className={cn('p-4 focus-visible:outline-none', className)}
+        className={cn('text-[13px] p-4 focus-visible:outline-none', className)}
         {...props}
       >
         {props.children}