docscn

Server code block

A code block highlighted in a React Server Component.

const greeting = "Hello, world!";

Installation

npx shadcn@latest add @docscn/server-codeblock

Usage

import { ServerCodeBlock } from "@/components/docs/components/codeblock.rsc";

<ServerCodeBlock lang="ts" code={code} />;

ServerCodeBlock is an async React Server Component. It highlights the code with Shiki on the server, using the same code block as your content, and sends no highlighting code to the browser.

For code that's only known in the browser, use DynamicCodeBlock.

Props

Prop

Type

Dynamic code block

A code block highlighted in the browser, for code that's only known at runtime.

Callout

Highlight notes, tips and warnings, built on the shadcn/ui alert.

On this page

InstallationUsageProps