Code Block

Special

Syntax-highlighted code display with line numbers, copy button, and retro terminal themes.

Import

import { PixelCodeBlock, PixelCode } from "@/components/ui/pixel/pixel-code-block"

Usage

example.js
1function greet(name) {
2  console.log(`Hello, ${name}!`);
3  return true;
4}
5 
6greet("World");
Inline code:const x = 10;

Component Source

Copy and paste the following code into your project at /src/components/ui/pixel/pixel-code-block.tsx

"use client";

import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";
import { cn } from "@/lib/utils";

const pixelCodeBlockVariants = cva(
  "relative border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] font-mono overflow-hidden",
  {
    variants: {
      variant: {
        default: "bg-[#1a1a1a] text-[#00ff00]",
        terminal: "bg-black text-[#00ff00]",
        dark: "bg-[#0d1117] text-[#c9d1d9]",
        light: "bg-white text-black dark:bg-[#1a1a1a] dark:text-white",
        matrix: "bg-black text-[#00ff00]",
        amber: "bg-black text-[#ffb000]",
      },
      size: {
        sm: "text-xs",
        md: "text-sm",
        lg: "text-base",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "md",
    },
  },
);

export interface PixelCodeBlockProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof pixelCodeBlockVariants> {
  code: string;
  language?: string;
  showLineNumbers?: boolean;
  showCopyButton?: boolean;
  title?: string;
  highlightLines?: number[];
}

const PixelCodeBlock = React.forwardRef<HTMLDivElement, PixelCodeBlockProps>(
  (
    {
      className,
      variant,
      size,
      code,
      language = "javascript",

// ... (more code below)

Props

PropTypeDefaultDescription
codestring-Source code to display
languagestring-Programming language (e.g., 'javascript', 'python')
titlestring-Code block title/filename
variant"default" | "terminal" | "dark" | "light" | "matrix" | "amber""default"Color theme
size"sm" | "md" | "lg""md"Text size
showLineNumbersbooleantrueShow line numbers
showCopyButtonbooleantrueShow copy button
highlightLinesnumber[]-Array of line numbers to highlight

Examples

JavaScript Code

Basic JavaScript with syntax highlighting

example.js
1function greet(name) {
2  console.log(`Hello, ${name}!`);
3  return true;
4}
5 
6greet("World");
Inline code:const x = 10;

Terminal Theme

Green terminal style

example.js
1function greet(name) {
2  console.log(`Hello, ${name}!`);
3  return true;
4}
5 
6greet("World");
Inline code:const x = 10;

Line Highlighting

Highlight specific lines

example.js
1function greet(name) {
2  console.log(`Hello, ${name}!`);
3  return true;
4}
5 
6greet("World");
Inline code:const x = 10;

Inline Code

Inline code snippet

example.js
1function greet(name) {
2  console.log(`Hello, ${name}!`);
3  return true;
4}
5 
6greet("World");
Inline code:const x = 10;

Accessibility

This component is built with accessibility in mind, including proper ARIA attributes, keyboard navigation, and focus management.