Code Block

A syntax-highlighted code block with copy and download functionality, perfect for displaying code snippets in documentation and tutorials.

On This Page

Meet Bungas

Your open-source, proactive personal AI assistant with 200+ integrations. Bungas combines todos, goals, calendar, and email into one system, turns tasks into automated workflows, and completes work instead of just tracking it. Open-source and self-hostable with support for custom automations and multi-step workflows.

Code Block

A syntax-highlighted code block with copy and download functionality, perfect for displaying code snippets in documentation and tutorials.

example.js

function greet(name) {
  console.log(`Hello, ${name}!`);
  return `Welcome to Bungas UI`;
}

greet("Developer");

Usage in Gaia

Makes AI-generated code readable and usable. Auto-detects language and adds copy-paste utility.

Features

Copy to Clipboard - One-click code copying with visual feedback
Download - Save code snippets as files with appropriate extensions
Line Numbers - Optional line number display
Language Support - Auto-detects file extensions for 20+ languages
Filename Display - Show the filename in the header
Syntax Highlighting Ready - Works seamlessly with syntax highlighting libraries

Installation

npx shadcn@latest add https://bungas.treonstudio.com/r/code-block.json

Usage

import { CodeBlock } from "@/components/ui/code-block";
 
export default function Example() {
  const code = `function hello() {
  console.log("Hello, World!");
}`;
 
  return (
    <CodeBlock language="javascript" filename="hello.js">
      {code}
    </CodeBlock>
  );
}

Examples

Different Languages

fibonacci.py

def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

print(fibonacci(10))

types.ts

interface User {
  id: string;
  name: string;
  email: string;
}

const createUser = (data: User): User => {
  return { ...data };
};

deploy.sh

#!/bin/bash
# Deploy script
echo "Building application..."
npm run build
echo "Deploying to production..."
npm run deploy

With Line Numbers

component.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from "react";
import { cn } from "@/lib/utils";

export function Component({ className }) {
  const [count, setCount] = React.useState(0);
  
  return (
    <div className={cn("container", className)}>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

Props

Prop	Type	Default	Description
children	string	-	The code content to display
language	string	"plaintext"	Programming language for syntax highlighting
filename	string	-	Optional filename to display in header
showLineNumbers	boolean	false	Show line numbers on the left
className	string	-	Additional CSS classes

Supported Languages

The component automatically detects file extensions for the following languages:

JavaScript (.js)
TypeScript (.ts)
Python (.py)
Java (.java)
C++ (.cpp)
C (.c)
C# (.cs)
Ruby (.rb)
Go (.go)
Rust (.rs)
PHP (.php)
Swift (.swift)
Kotlin (.kt)
HTML (.html)
CSS (.css)
JSON (.json)
XML (.xml)
YAML (.yaml)
Markdown (.md)
Bash/Shell (.sh)
SQL (.sql)

Tips

Integration with Syntax Highlighters

This component works great with syntax highlighting libraries like react-syntax-highlighter or prism-react-renderer. Simply wrap the code content with your preferred highlighter:

import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
<CodeBlock language="javascript">
  <SyntaxHighlighter language="javascript" style={oneDark}>
    {code}
  </SyntaxHighlighter>
</CodeBlock>

Custom Styling

Override the default styles using Tailwind classes:

<CodeBlock 
  className="border-blue-500 bg-blue-950" 
  language="python"
>
  {code}
</CodeBlock>

On This Page

Meet Bungas