LogoMkSaaS Docs
LogoMkSaaS Docs
Homepage

Introduction

Quick StartWhat is FumadocsComparisons

Setup

Manual InstallationStatic Export

Writing

MarkdownInternationalization

UI

OverviewThemesSearch
Components
MDX
CalloutCardCode BlockHeading
X (Twitter)
MDX

Code Block

Adding code blocks to your docs

config.js
import createMDX from 'fumadocs-mdx/config';

const withMDX = createMDX();

/** @type {import('next').NextConfig} */
const config = {
  reactStrictMode: true, 
}; 

export default withMDX(config);

Display code blocks, added by default.

  • Copy button
  • Custom titles and icons

Usage

Wrap the pre element in <CodeBlock />, which acts as the wrapper of code block.

import { Pre, CodeBlock }

See Markdown for usages.

Keep Background

Use the background color generated by Shiki (the Rehype Code plugin).

import { Pre, CodeBlock }

Icons

Specify a custom icon by passing an icon prop to CodeBlock component.

By default, the icon will be injected by the custom Shiki transformer.

config.js
console.log('js');

Card

Use the Card component in your MDX documentation

Heading

Heading components for your MDX documentation

Table of Contents

Usage
Keep Background
Icons
from
'fumadocs-ui/components/codeblock'
;
<MDX
components={{
// HTML `ref` attribute conflicts with `forwardRef`
pre: ({ ref: _ref, ...props }) => (
<CodeBlock {...props}>
<Pre>{props.children}</Pre> {}
</CodeBlock>
),
}}
/>;
from
'fumadocs-ui/components/codeblock'
;
<MDX
components={{
pre: ({ ref: _ref, ...props }) => (
<CodeBlock keepBackground {...props}>
<Pre>{props.children}</Pre>
</CodeBlock>
),
}}
/>;