16aaf55a91
- 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.
39 lines
831 B
Plaintext
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
|
|
}}
|
|
/>;
|
|
```
|