Library/CodeSnippet

CodeSnippet

Syntax-highlighted code block with inline variant. Powered by react-syntax-highlighter.

Simple Build
Interactive Preview
Initialising Operative...

Architecture

Component Architecture
CodeSnippet/

Prop Usage

PropTypeDefaultDescription
coderequired
stringThe source code string to display.
language
string"tsx"Language for syntax highlighting (tsx, typescript, bash, python, etc).
inline
booleanfalseRenders as an inline <code> span instead of a block.
className
stringAdditional classes for the container.

Usage

import { CodeSnippet } from '@/ui'; // Block snippet <CodeSnippet code={`const greeting = 'Hello, World!';`} language="typescript" /> // Bash command <CodeSnippet code="npm install @your/package" language="bash" /> // Inline <p>Use the <CodeSnippet code="useState" inline /> hook.</p>