LogoMkSaaS Docs
LogoMkSaaS Docs
Homepage

Introduction

Quick StartWhat is FumadocsComparisons

Setup

Manual InstallationStatic Export

Writing

MarkdownInternationalization

UI

OverviewThemesSearch
Components
AccordionBannerCode Block (Dynamic)FilesGitHub InfoZoomable ImageInline TOCRoot ToggleStepsTabsType Table
MDX
X (Twitter)
Components

Code Block (Dynamic)

A codeblock that also highlights code

Usage

import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';

<DynamicCodeBlock lang="ts" code='console.log("Hello World")' />;

This component, different from the MDX CodeBlock component, can be used without MDX. It highlights the code with Shiki and use the default component to render it.

Features:

  • Can be pre-rendered on server
  • load languages and themes on browser lazily

Options

import { DynamicCodeBlock }

Banner

Add a banner to your site

Files

Display file structure in your documentation

Table of Contents

Usage
Options
from
'fumadocs-ui/components/dynamic-codeblock'
;
<DynamicCodeBlock
lang="ts"
code='console.log("Hello World")'
options={{
components: {
// add/override components
},
// or Shiki options
}}
/>;
console.log("This is pre-rendered")
console.log("This is pre-rendered")