>skeehn
DocsComponentsGitHub

code-block

Code display with copy and line numbers

AIcode-block.csscode-block.js

Installation

$npx skeehn add code-block

Preview

tsx
1
2
3
4
5
6
7
8
9
import { Button } from '@skeehn/react';

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

Props

PropTypeDefaultDescription
codestring—Code content to display
languagestring—Programming language for syntax hints
showLineNumbersbooleanfalseShow line numbers
copyablebooleantrueShow copy button

Usage

code-block.tsx
1import { CodeBlock } from '@skeehn/react';23export function Example() {4  return (5    <CodeBlock6      code="const x = 42;"7      language="javascript"8      showLineNumbers9      copyable10    />11  );12}