CodeBlock

The CodeBlock component provides a Windows 98-style code block for displaying formatted code snippets with syntax highlighting.

Import

import { CodeBlock } from 'rohit-ui';

Examples

Basic CodeBlock

example.js

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

<CodeBlock
  language="javascript"
  code={`function greet(name) {
    return \`Hello, \${name}!\`;
}`}
/>

CodeBlock with Line Numbers

example.js

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

<CodeBlock
  language="javascript"
  code={`function greet(name) {
    return \`Hello, \${name}!\`;
}`}
  showLineNumbers
/>

Rohit Mode CodeBlock

UNNECESSARILY COMPLICATED.js

// This code is unnecessarily complicated
function complicated() {
  return "UNNECESSARILY COMPLICATED";
}

<CodeBlock
  language="javascript"
  code={`// This code is unnecessarily complicated
function complicated() {
    return "UNNECESSARILY COMPLICATED";
}`}
  rohitMode
/>

Note: In Rohit Mode, the code block will wiggle, change color, and sometimes randomly reorder its lines.

Props

Name	Type	Default	Description
code	string	-	The code to display
language	string	'text'	Programming language for syntax highlighting
showLineNumbers	boolean	false	Whether to display line numbers
showCopyButton	boolean	true	Whether to show the copy button
onCopy	function	-	Function called when code is copied
className	string	-	CSS class to apply to the code block container
rohitMode	boolean	false	Enables Rohit Mode with silly animations and behaviors

CSS Customization

You can customize the CodeBlock component using styled-components:

import styled from 'styled-components';
import { CodeBlock } from 'rohit-ui';

const CustomCodeBlock = styled(CodeBlock)`
  background: #f0f0f0;
  .code-header {
    background: purple;
    color: white;
  }
  .code-content {
    font-family: 'Comic Sans MS', monospace;
  }
`;

function MyComponent() {
  return (
    <CustomCodeBlock
      language="javascript"
      code="console.log('Custom styled code block');"
    />
  );
}

Rohit Mode Behavior

When Rohit Mode is enabled, the CodeBlock component will:

Wiggle or bounce randomly
Change color periodically
Sometimes randomly reorder its lines
Draw unnecessary attention to itself