prmbr-image-mksaas/content/docs/components/dynamic-codeblock.mdx
javayhu 16aaf55a91 refactor: enhance documentation feature and update dependencies
- Updated content collections to include new schemas for better document handling.
- Added new documentation files for comparisons, customization, and internationalization.
- Introduced a manual installation guide and improved markdown support.
- Updated package.json with new dependencies for enhanced functionality.
- Added new images for documentation and improved layout components for better user experience.
- Adjusted TypeScript configurations for better path management.
2025-03-30 22:34:16 +08:00

39 lines
831 B
Plaintext

---
title: Code Block (Dynamic)
description: A codeblock that also highlights code
preview: dynamicCodeBlock
---
## Usage
```tsx
import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
<DynamicCodeBlock lang="ts" code='console.log("Hello World")' />;
```
This component, different from the MDX [`CodeBlock`](/docs/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
```tsx
import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
<DynamicCodeBlock
lang="ts"
code='console.log("Hello World")'
options={{
components: {
// add/override components
},
// or Shiki options
}}
/>;
```