CodeBlock

SSR-safe component for rendering syntax-highlighted code blocks with proper whitespace preservation.

Props

Prop	Type	Required	Default	Description
`code`	`string`	Yes	-	The code content to display
`language`	`string`	No	`'text'`	Programming language for syntax highlighting
`className`	`string`	No	-	Additional CSS classes
`highlightLines`	`number[]`	No	-	Array of line numbers to highlight

Usage

1import { CodeBlock } from '@/components/atoms/CodeBlock';
2
3// Basic usage
4<CodeBlock code="const x = 1;" language="typescript" />
5
6// With highlighted lines
7<CodeBlock 
8  code={codeSnippet} 
9  language="javascript"
10  highlightLines={[3, 5, 7]}
11/>

import { CodeBlock } from '@/components/atoms/CodeBlock';

// Basic usage
<CodeBlock code="const x = 1;" language="typescript" />

// With highlighted lines
<CodeBlock 
  code={codeSnippet} 
  language="javascript"
  highlightLines={[3, 5, 7]}
/>

Features

SSR-safe: Can be used in server components without hydration issues
Syntax highlighting: Uses Prism via react-syntax-highlighter
Line numbers: Shows line numbers by default
Line wrapping: Wraps long lines for better readability
Custom theme: Uses Contentstack design system colors
Line highlighting: Optional support for highlighting specific lines
Whitespace preservation: Maintains exact spacing and newlines

Styling

The component uses a custom theme (contentstackCodeTheme) that matches the Contentstack design system:

Background: #1A1919 (lighter than default dark background)
Text colors: Muted accent colors for syntax highlighting
Line numbers: Subtle gray color with proper spacing
Border radius: 8px with subtle border

Notes

This is a pure rendering component with no client-side interactivity
For copy-to-clipboard functionality, use CodeBlockWithCopy instead
Line numbers start at 1 by default
Highlighted lines use a subtle background overlay