Docscn

Code block

Code blocks and code tabs for Shiki output.

Installation

npx shadcn@latest add @docscn/codeblock

Usage

defaultMdxComponents renders every code block in your MDX with CodeBlock. Fumadocs MDX's syntax works as usual:

```ts title="greet.ts"
export function greet(name: string) {
  return `Hello, ${name}!`; 
}
```
greet.ts
export function greet(name: string) {
  return `Hello, ${name}!`; 
}
  • title="..." adds a title bar, with an icon for the language.
  • The copy button copies the code.
  • Shiki's notations add highlighted ([!code highlight]), added and removed ([!code ++], [!code --]), focused ([!code focus]) and highlighted-word ([!code word:x]) styles, and lineNumbers shows line numbers.

Code blocks with tab="..." and ```npm blocks become code tabs, on shadcn/ui tabs:

npm install next-themes

Props

PropTypeDescription
titleReactNodeThe title bar's text.
iconReactNodeThe title bar's icon. A string is treated as SVG markup.
allowCopybooleanShow the copy button. Defaults to true.
keepBackgroundbooleanKeep the background colour of the Shiki theme.
viewportPropsHTMLAttributesProps for the scrolling area.
Actions(props) => ReactNodeReplace the area that holds the copy button.

CodeBlockTabs also accepts groupId and persist, to keep the same tab selected across code tabs and page loads.

The component's CSS (the light and dark Shiki themes and the notation styles) was added to your global stylesheet. Add not-docs-codeblock to an element to opt it out.

MDX components

The components for Fumadocs MDX content.

Callout

Highlight notes, tips and warnings.