0
# Syntax Highlighting
1

2
Code highlighting components with extensive language support and customization options for displaying formatted code in documentation and interfaces.
3

4
## Capabilities
5

6
### SyntaxHighlighter Component
7

8
Primary component for rendering syntax-highlighted code blocks with extensive language support.
9

10
```typescript { .api }
11
interface SyntaxHighlighterProps {
12
  /** Programming language for syntax highlighting */
13
  language: SupportedLanguage;
14
  /** Code content to highlight */
15
  children: string;
16
  /** Show line numbers */
17
  showLineNumbers?: boolean;
18
  /** Color theme for highlighting */
19
  theme?: string;
20
  /** Additional styling options */
21
  [key: string]: any;
22
}
23

24
/**
25
 * Lazy-loaded syntax highlighter component with extensive language support
26
 * Optimized for performance with code splitting
27
 */
28
const SyntaxHighlighter: React.ComponentType<SyntaxHighlighterProps>;
29

30
/**
31
 * Supported programming languages for syntax highlighting
32
 * Includes popular languages like JavaScript, TypeScript, Python, etc.
33
 */
34
type SupportedLanguage = 
35
  | "javascript" 
36
  | "typescript" 
37
  | "jsx" 
38
  | "tsx" 
39
  | "css" 
40
  | "html" 
41
  | "json" 
42
  | "markdown" 
43
  | "python"
44
  | "java"
45
  | "c"
46
  | "cpp"
47
  | "csharp"
48
  | "php"
49
  | "ruby"
50
  | "go"
51
  | "rust"
52
  | "swift"
53
  | "kotlin"
54
  | "scala"
55
  | "bash"
56
  | "shell"
57
  | "sql"
58
  | "yaml"
59
  | "xml"
60
  | "dockerfile"
61
  | string; // Additional languages supported by the underlying highlighter
62
```
63

64
### Type Definitions
65

66
Interfaces for syntax highlighter configuration and rendering.
67

68
```typescript { .api }
69
/**
70
 * Format types for syntax highlighter configuration
71
 */
72
interface SyntaxHighlighterFormatTypes {
73
  [key: string]: any;
74
}
75

76
/**
77
 * Props for syntax highlighter renderer components
78
 */
79
interface SyntaxHighlighterRendererProps {
80
  /** Parsed code rows for rendering */
81
  rows: any[];
82
  /** Styling information */
83
  stylesheet: any;
84
  /** Whether to use inline styles */
85
  useInlineStyles: boolean;
86
}
87
```
88

89
### Copy to Clipboard Utility
90

91
Utility function for creating copy-to-clipboard functionality.
92

93
```typescript { .api }
94
/**
95
 * Creates a copy-to-clipboard function for code blocks
96
 * Returns a function that can copy text to the system clipboard
97
 */
98
function createCopyToClipboardFunction(): (text: string) => void;
99
```
100

101
## Usage Examples
102

103
**Basic Syntax Highlighting:**
104

105
```typescript
106
import { SyntaxHighlighter } from "@storybook/components";
107

108
// JavaScript code highlighting
109
<SyntaxHighlighter language="javascript">
110
  {`
111
    function greet(name) {
112
      return \`Hello, \${name}!\`;
113
    }
114
    
115
    console.log(greet("World"));
116
  `}
117
</SyntaxHighlighter>
118

119
// TypeScript code highlighting
120
<SyntaxHighlighter language="typescript">
121
  {`
122
    interface User {
123
      name: string;
124
      age: number;
125
    }
126
    
127
    const user: User = {
128
      name: "Alice",
129
      age: 30
130
    };
131
  `}
132
</SyntaxHighlighter>
133
```
134

135
**Advanced Configuration:**
136

137
```typescript
138
import { SyntaxHighlighter } from "@storybook/components";
139

140
// With line numbers and custom theme
141
<SyntaxHighlighter 
142
  language="jsx"
143
  showLineNumbers={true}
144
  theme="dark"
145
>
146
  {`
147
    import React from 'react';
148
    
149
    function Component({ title }) {
150
      return (
151
        <div>
152
          <h1>{title}</h1>
153
          <p>Hello from React!</p>
154
        </div>
155
      );
156
    }
157
    
158
    export default Component;
159
  `}
160
</SyntaxHighlighter>
161
```
162

163
**Different Languages:**
164

165
```typescript
166
import { SyntaxHighlighter } from "@storybook/components";
167

168
// Python code
169
<SyntaxHighlighter language="python">
170
  {`
171
    def calculate_fibonacci(n):
172
        if n <= 1:
173
            return n
174
        return calculate_fibonacci(n-1) + calculate_fibonacci(n-2)
175
    
176
    print(calculate_fibonacci(10))
177
  `}
178
</SyntaxHighlighter>
179

180
// CSS code
181
<SyntaxHighlighter language="css">
182
  {`
183
    .button {
184
      background-color: #007bff;
185
      color: white;
186
      padding: 8px 16px;
187
      border: none;
188
      border-radius: 4px;
189
      cursor: pointer;
190
    }
191
    
192
    .button:hover {
193
      background-color: #0056b3;
194
    }
195
  `}
196
</SyntaxHighlighter>
197

198
// JSON data
199
<SyntaxHighlighter language="json">
200
  {`
201
    {
202
      "name": "my-project",
203
      "version": "1.0.0",
204
      "dependencies": {
205
        "react": "^18.0.0",
206
        "@storybook/components": "^8.6.14"
207
      }
208
    }
209
  `}
210
</SyntaxHighlighter>
211
```
212

213
**Copy to Clipboard Integration:**
214

215
```typescript
216
import { SyntaxHighlighter, createCopyToClipboardFunction } from "@storybook/components";
217
import { useState } from "react";
218

219
function CodeBlock({ code, language }) {
220
  const [copied, setCopied] = useState(false);
221
  const copyToClipboard = createCopyToClipboardFunction();
222

223
  const handleCopy = () => {
224
    copyToClipboard(code);
225
    setCopied(true);
226
    setTimeout(() => setCopied(false), 2000);
227
  };
228

229
  return (
230
    <div style={{ position: 'relative' }}>
231
      <button 
232
        onClick={handleCopy}
233
        style={{ 
234
          position: 'absolute', 
235
          top: 8, 
236
          right: 8,
237
          zIndex: 1
238
        }}
239
      >
240
        {copied ? 'Copied!' : 'Copy'}
241
      </button>
242
      
243
      <SyntaxHighlighter language={language}>
244
        {code}
245
      </SyntaxHighlighter>
246
    </div>
247
  );
248
}
249

250
// Usage
251
<CodeBlock 
252
  language="typescript"
253
  code={`
254
    const example = "Hello World";
255
    console.log(example);
256
  `}
257
/>
258
```
259

260
**Inline Code Highlighting:**
261

262
```typescript
263
import { SyntaxHighlighter } from "@storybook/components";
264

265
// For short code snippets
266
<SyntaxHighlighter 
267
  language="javascript" 
268
  style={{ display: 'inline-block', padding: '2px 4px' }}
269
>
270
  {`const x = 42;`}
271
</SyntaxHighlighter>
272
```
273

274
## Supported Languages
275

276
The SyntaxHighlighter component supports a wide range of programming languages:
277

278
**Web Technologies:**
279
- `javascript`, `js` - JavaScript
280
- `typescript`, `ts` - TypeScript  
281
- `jsx` - JavaScript with JSX
282
- `tsx` - TypeScript with JSX
283
- `css` - Cascading Style Sheets
284
- `html` - HTML markup
285
- `json` - JSON data
286

287
**Backend Languages:**
288
- `python` - Python
289
- `java` - Java
290
- `csharp`, `cs` - C#
291
- `php` - PHP
292
- `ruby` - Ruby
293
- `go` - Go
294
- `rust` - Rust
295
- `kotlin` - Kotlin
296
- `scala` - Scala
297

298
**System Languages:**
299
- `c` - C
300
- `cpp`, `c++` - C++
301
- `bash`, `shell` - Shell scripts
302

303
**Data and Config:**
304
- `sql` - SQL queries
305
- `yaml`, `yml` - YAML configuration
306
- `xml` - XML markup
307
- `dockerfile` - Docker configuration
308
- `markdown`, `md` - Markdown
309

310
## Performance Notes
311

312
The SyntaxHighlighter component is lazy-loaded to optimize bundle size. It only loads the highlighting engine when first used, reducing initial page load times.
313

314
For applications with many code blocks, consider implementing virtualization or pagination to maintain performance with large amounts of highlighted code.
315

316
## Theming
317

318
The component automatically adapts to Storybook's current theme (light/dark) and provides consistent styling across different syntax highlighting scenarios. Custom themes can be applied using the `theme` prop.