CodeBlock

Import

import { CodeBlock } from 'tuimorphic';

Basic Usage

function greet(name: string) {
  console.log(`Hello, ${name}!`);
}

greet('World');

<CodeBlock
  code="const x = 1;\nconst y = 2;"
  language="typescript"
/>

Props

Prop	Type	Default	Description
code	`string`	-	The code string to display (required)
language	`string`	-	Programming language for semantic purposes
showLineNumbers	`boolean`	`true`	Whether to show line numbers on the left side
startLineNumber	`number`	`1`	Starting line number
showCopyButton	`boolean`	`false`	Whether to show the copy button
onCopy	`(code: string) => void`	-	Callback fired when code is copied
className	`string`	-	Additional CSS class names

Variants

Basic Code Block

function greet(name: string) {
  console.log(`Hello, ${name}!`);
}

greet('World');

<CodeBlock
  code="const greeting = 'Hello, World!';\nconsole.log(greeting);"
  language="javascript"
/>

With Language Label

TYPESCRIPT

import { Button } from 'tuimorphic';

export function App() {
  return (
    <Button variant="primary">
      Click me
    </Button>
  );
}

<CodeBlock
  code={`interface User {\n  name: string;\n  age: number;\n}`}
  language="typescript"
  showCopyButton
/>

Without Line Numbers

BASH

npm install tuimorphic
pnpm add tuimorphic
yarn add tuimorphic

<CodeBlock
  code="npm install tuimorphic"
  showLineNumbers={false}
/>

Custom Start Line

TYPESCRIPT

  const handleSubmit = async (data: FormData) => {
    const response = await fetch('/api/submit', {
      method: 'POST',
      body: data,
    });
    return response.json();
  };

<CodeBlock
  code={`  if (condition) {\n    doSomething();\n  }`}
  language="javascript"
  startLineNumber={42}
/>

With Copy Button

<CodeBlock
  code={`function add(a, b) {\n  return a + b;\n}`}
  language="javascript"
  showCopyButton
  onCopy={(code) => console.log('Copied:', code)}
/>

Multi-language Examples

// TypeScript
<CodeBlock
  code={`interface User {\n  name: string;\n  age: number;\n}`}
  language="typescript"
  showCopyButton
/>
 
// Shell
<CodeBlock
  code="npm install tuimorphic\nnpm run dev"
  language="shell"
  showLineNumbers={false}
/>

On this page