Dynamic code block

const greeting = "Hello, world!";

InstallationCopy Anchor Link

npx shadcn@latest add @docscn/dynamic-codeblock

UsageCopy Anchor Link

import { DynamicCodeBlock } from "@/components/docs/components/dynamic-codeblock";

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

It loads Shiki in the browser and highlights the code with the GitHub light and dark themes, using the same code block as your content. Until Shiki has loaded, it shows the code without colours.

Shiki's full bundle is large. To load less, use DynamicCodeBlock from components/dynamic-codeblock.core with your own highlighter, built with only the languages and themes you need.

For code that's known on the server, ServerCodeBlock sends no JavaScript to the browser.

PropsCopy Anchor Link