CodeBlock component for displaying syntax-highlighted code with line numbers, copy functionality, and tabs.
Experiment with all the properties of the CodeBlock component in real time.
Color theme of the code block.
Display line numbers.
function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}
console.log(fibonacci(10));Basic code block with syntax highlighting. Supports multiple programming languages.
import { CodeBlock } from "lambda-ui-components";
const code = `function hello() {
console.log("Hello, World!");
}`;
export default function App() {
return (
<CodeBlock
code={code}
language="javascript"
theme="dark"
/>
);
}Highlight specific lines using highlightLines prop. Format: "2,4-6" to highlight lines 2, 4, 5, and 6.
function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}
console.log(fibonacci(10));Display multiple code snippets with tabs using the tabs prop.
function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}
console.log(fibonacci(10));Prop | Default | Type |
|---|---|---|
code | "" | string |
language | "javascript" | string |
theme | "dark" | "light" | "dark" |
showLineNumbers | false | boolean |
buttonCopy | false | boolean |
highlightLines | undefined | string |
tabs | undefined | CodeTab[] |
className | "" | string |
Prop | Default | Type |
|---|---|---|
label | undefined | string |
language | undefined | string |
code | undefined | string |
icon | undefined | ReactNode |