feat(components/codeblock): a reusable component for displaying syntax-highlighted code blocks

[gsvprharsha]

Summary

This PR adds a new CodeBlock component to the UI registry. It uses Shiki for syntax highlighting.

The component supports props like:

• lang: the code language
• maxHeight / maxWidth: for scrollable code areas
• textSize: to adjust font size

Changes

• Added the component at ui/codeblock.tsx
• Added example usage at example/codeblock.tsx
• Added registry metadata
• Integrated shiki and hast-util-to-jsx-runtime

Example

<CodeBlock lang="js" maxHeight={300} maxWidth={300} textSize={14}>
  {`function greet() {
  console.log("Hello, world!")
}

greet()`}
</CodeBlock>

Features

• Supports many programming languages from Shiki, including popular ones like JavaScript, TypeScript, and Python.
• Offers customizable themes from Shiki’s built-in collection, allowing light and dark mode highlighting.
• Provides props such as lang (language), textSize (font size), and maxHeight / maxWidth for scrollable code blocks.
• Follows shadcn design principles.

Preview

A preview of the CodeBlock component showing syntax-highlighted code with customizable size and language support.

[vercel]

@wolfosek is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.