0
# Standard Syntax Highlighter
1

2
The default syntax highlighter component using highlight.js with comprehensive language support and built-in themes.
3

4
## Capabilities
5

6
### Default Export (SyntaxHighlighter)
7

8
The main syntax highlighter component with full highlight.js support and default styling.
9

10
```javascript { .api }
11
/**
12
 * React component for syntax highlighting using highlight.js
13
 * @param props - Configuration props for the highlighter
14
 * @returns JSX element with highlighted code
15
 */
16
function SyntaxHighlighter(props: SyntaxHighlighterProps): JSX.Element;
17

18
interface SyntaxHighlighterProps {
19
  /** Programming language to highlight (default: auto-detect) */
20
  language?: string;
21
  /** Code string to highlight */
22
  children: string;
23
  /** Theme object for styling */
24
  style?: { [key: string]: React.CSSProperties };
25
  /** Additional styles for the pre tag */
26
  customStyle?: React.CSSProperties;
27
  /** Use inline styles vs CSS classes (default: true) */
28
  useInlineStyles?: boolean;
29
  /** Show line numbers in left gutter (default: false) */
30
  showLineNumbers?: boolean;
31
  /** Show line numbers inline with code (default: true when showLineNumbers is true) */
32
  showInlineLineNumbers?: boolean;
33
  /** Starting line number (default: 1) */
34
  startingLineNumber?: number;
35
  /** Styles for line number container */
36
  lineNumberContainerStyle?: React.CSSProperties;
37
  /** Styles for individual line numbers, can be function */
38
  lineNumberStyle?: React.CSSProperties | ((lineNumber: number) => React.CSSProperties);
39
  /** Wrap each line in a span element (default: false) */
40
  wrapLines?: boolean;
41
  /** Enable line wrapping with CSS white-space: pre-wrap (default: false) */
42
  wrapLongLines?: boolean;
43
  /** Props for line wrapper spans, can be function */
44
  lineProps?: React.HTMLProps<HTMLElement> | ((lineNumber: number) => React.HTMLProps<HTMLElement>);
45
  /** Custom renderer for code lines */
46
  renderer?: (props: RendererProps) => React.ReactNode;
47
  /** Custom component for pre tag (default: 'pre') */
48
  PreTag?: React.ComponentType<any> | string;
49
  /** Custom component for code tag (default: 'code') */
50
  CodeTag?: React.ComponentType<any> | string;
51
  /** Props for the code tag */
52
  codeTagProps?: React.HTMLProps<HTMLElement>;
53
  /** Additional props spread to pre tag */
54
  [key: string]: any;
55
}
56
```
57

58
**Usage Examples:**
59

60
```javascript
61
import React from 'react';
62
import SyntaxHighlighter from 'react-syntax-highlighter';
63
import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';
64

65
// Basic usage
66
const BasicExample = () => {
67
  const code = `function hello() {
68
  console.log('Hello, World!');
69
}`;
70

71
  return (
72
    <SyntaxHighlighter language="javascript" style={docco}>
73
      {code}
74
    </SyntaxHighlighter>
75
  );
76
};
77

78
// With line numbers
79
const LineNumberExample = () => {
80
  const code = `def fibonacci(n):
81
    if n <= 1:
82
        return n
83
    return fibonacci(n-1) + fibonacci(n-2)
84

85
print(fibonacci(10))`;
86

87
  return (
88
    <SyntaxHighlighter 
89
      language="python" 
90
      style={docco}
91
      showLineNumbers={true}
92
      startingLineNumber={1}
93
    >
94
      {code}
95
    </SyntaxHighlighter>
96
  );
97
};
98

99
// Custom styling
100
const CustomStyleExample = () => {
101
  const code = `<div className="example">
102
  <h1>Hello World</h1>
103
  <p>This is a paragraph.</p>
104
</div>`;
105

106
  return (
107
    <SyntaxHighlighter 
108
      language="html"
109
      style={docco}
110
      customStyle={{
111
        padding: '20px',
112
        borderRadius: '8px',
113
        fontSize: '14px'
114
      }}
115
      codeTagProps={{
116
        style: {
117
          fontFamily: 'Menlo, Monaco, Consolas, monospace'
118
        }
119
      }}
120
    >
121
      {code}
122
    </SyntaxHighlighter>
123
  );
124
};
125
```
126

127
### Supported Languages Property
128

129
Access to the list of supported languages.
130

131
```javascript { .api }
132
/**
133
 * Array of supported language identifiers
134
 */
135
const supportedLanguages: string[];
136
```
137

138
**Usage Example:**
139

140
```javascript
141
import SyntaxHighlighter from 'react-syntax-highlighter';
142

143
// Check if a language is supported
144
const isSupported = SyntaxHighlighter.supportedLanguages.includes('typescript');
145

146
// List all supported languages
147
console.log('Supported languages:', SyntaxHighlighter.supportedLanguages);
148
```
149

150
### Language Detection
151

152
The highlighter supports automatic language detection when no language is specified.
153

154
```javascript
155
// Auto-detect language (highlight.js feature)
156
<SyntaxHighlighter style={docco}>
157
  {codeString}
158
</SyntaxHighlighter>
159

160
// Plain text (no highlighting)
161
<SyntaxHighlighter language="text" style={docco}>
162
  {plainTextString}
163
</SyntaxHighlighter>
164
```
165

166
### Line Number Customization
167

168
Advanced line number styling and positioning options.
169

170
```javascript
171
// Function-based line number styling
172
const dynamicLineNumberStyle = (lineNumber) => ({
173
  color: lineNumber % 2 === 0 ? '#666' : '#999',
174
  fontWeight: lineNumber === 5 ? 'bold' : 'normal'
175
});
176

177
<SyntaxHighlighter 
178
  language="javascript"
179
  style={docco}
180
  showLineNumbers={true}
181
  lineNumberStyle={dynamicLineNumberStyle}
182
  lineNumberContainerStyle={{
183
    backgroundColor: '#f5f5f5',
184
    borderRight: '2px solid #ddd',
185
    paddingRight: '10px'
186
  }}
187
>
188
  {code}
189
</SyntaxHighlighter>
190
```
191

192
### Custom Rendering
193

194
Integration with virtualization libraries and custom renderers.
195

196
```javascript
197
// Custom renderer for virtualization
198
const customRenderer = ({ rows, stylesheet, useInlineStyles }) => {
199
  return rows.map((node, i) => (
200
    <div key={i} className="code-line">
201
      {/* Custom rendering logic */}
202
      {createElement({
203
        node,
204
        stylesheet,
205
        useInlineStyles,
206
        key: `code-segment-${i}`
207
      })}
208
    </div>
209
  ));
210
};
211

212
<SyntaxHighlighter 
213
  language="javascript"
214
  style={docco}
215
  renderer={customRenderer}
216
  wrapLines={true}
217
>
218
  {code}
219
</SyntaxHighlighter>
220
```
221

222
## Types
223

224
```javascript { .api }
225
interface RendererProps {
226
  /** Array of parsed code rows */
227
  rows: RowData[];
228
  /** Style object for theming */
229
  stylesheet: { [key: string]: React.CSSProperties };
230
  /** Whether to use inline styles */
231
  useInlineStyles: boolean;
232
}
233

234
interface RowData {
235
  type: 'element';
236
  tagName: string;
237
  properties: {
238
    className?: string[];
239
    style?: React.CSSProperties;
240
    key?: string;
241
  };
242
  children: Array<RowData | TextNode>;
243
}
244

245
interface TextNode {
246
  type: 'text';
247
  value: string;
248
}
249
```