Code Block

A component for displaying code snippets with syntax highlighting and customizable styling.

Examples

Basic Code Block

function greet(name) {
  return `Hello, ${name}!`;
}

// Call the function
greet("World");

Code Block with Header

You can use CodeBlockGroup to add a header with metadata and actions to your code blocks.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Different Languages

You can highlight code in various languages by changing the language prop.

Python Example

def fibonacci(n):
    a, b = 0, 1
    for _ in range(n):
        yield a
        a, b = b, a + b

# Generate the first 10 Fibonacci numbers
for number in fibonacci(10):
    print(number)

CSS Example

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.button:hover {
  background-color: #45a049;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

Different Themes

Shiki supports many popular themes. Here are some examples:

GitHub Dark Theme

function calculateTotal(items) {
  return items
    .filter(item => item.price > 0)
    .reduce((total, item) => {
      return total + item.price * item.quantity;
    }, 0);
}

Nord Theme

function calculateTotal(items) {
  return items
    .filter(item => item.price > 0)
    .reduce((total, item) => {
      return total + item.price * item.quantity;
    }, 0);
}

Installation

npx shadcn add "https://prompt-kit.com/c/code-block.json"

Component API

CodeBlock

CodeBlockCode

CodeBlockGroup

Usage with Markdown

The CodeBlock component is used internally by the Markdown component to render code blocks in markdown content. When used within the Markdown component, code blocks are automatically wrapped with the not-prose class to prevent conflicts with prose styling.

import { Markdown } from "@/components/prompt-kit/markdown"

function MyComponent() {
const markdownContent = ` # Example

  \`\`\`javascript
  function greet(name) {

  return `Hello, \${name}!\`;
  }
  \`\`\`

  return <Markdown className="prose">{markdownContent}</Markdown>

}

Tailwind Typography and not-prose

The CodeBlock component includes the not-prose class by default to prevent Tailwind Typography's prose styling from affecting code blocks. This is important when using the @tailwindcss/typography plugin, which provides beautiful typography defaults but can interfere with code block styling.

Since code blocks are styled with Shiki for syntax highlighting, they should not inherit Tailwind Typography styles. The not-prose class ensures that code blocks maintain their intended appearance regardless of the surrounding typography context.

<article className="prose">
<h1>My Content</h1>
<p>This content has prose styling applied.</p>

{/* The CodeBlock has not-prose to prevent prose styling */}
<CodeBlock>
  <CodeBlockCode code={code} language="javascript" />
</CodeBlock>
</article>

Customizing Syntax Highlighting

The CodeBlockCode component uses Shiki for syntax highlighting. You can customize the theme by passing a different theme name to the theme prop.

Shiki supports many popular themes including:

• github-light (default)
• github-dark
• dracula
• nord
• and more.

For a complete list of supported themes, refer to the Shiki documentation.