0
# Prism React Renderer
1

2
Prism React Renderer is a React component library for syntax highlighting using Prism.js. It provides a render-props-driven approach to render syntax-highlighted code directly in React applications with VSCode-like theming capabilities.
3

4
## Package Information
5

6
- **Package Name**: prism-react-renderer
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install prism-react-renderer`
10
- **Peer Dependencies**: React >=16.0.0
11
- **Dependencies**: @types/prismjs, clsx
12

13
## Core Imports
14

15
```typescript
16
import { Highlight, themes, Prism } from "prism-react-renderer";
17
```
18

19
For CommonJS:
20

21
```javascript
22
const { Highlight, themes, Prism } = require("prism-react-renderer");
23
```
24

25
Additional imports for advanced usage:
26

27
```typescript
28
import { 
29
  useTokenize, 
30
  normalizeTokens,
31
  type PrismTheme,
32
  type Token,
33
  type RenderProps 
34
} from "prism-react-renderer";
35
```
36

37
## Basic Usage
38

39
```typescript
40
import { Highlight, themes } from "prism-react-renderer";
41

42
function CodeBlock({ code, language }) {
43
  return (
44
    <Highlight
45
      theme={themes.vsDark}
46
      code={code}
47
      language={language}
48
    >
49
      {({ className, style, tokens, getLineProps, getTokenProps }) => (
50
        <pre className={className} style={style}>
51
          {tokens.map((line, i) => (
52
            <div key={i} {...getLineProps({ line })}>
53
              {line.map((token, key) => (
54
                <span key={key} {...getTokenProps({ token })} />
55
              ))}
56
            </div>
57
          ))}
58
        </pre>
59
      )}
60
    </Highlight>
61
  );
62
}
63
```
64

65
## Architecture
66

67
Prism React Renderer is built around several key components:
68

69
- **Highlight Component**: Main render-props component that orchestrates syntax highlighting
70
- **Bundled Prism Instance**: Modified Prism.js that doesn't pollute global namespace
71
- **Theme System**: VSCode-compatible themes with language-specific styling support
72
- **Tokenization Hooks**: React hooks for tokenizing code and generating element props
73
- **Utility Functions**: Functions for normalizing tokens and converting themes
74

75
## Capabilities
76

77
### Syntax Highlighting
78

79
Core syntax highlighting functionality using the render props pattern for maximum flexibility. Supports 20+ programming languages and provides complete control over rendering.
80

81
```typescript { .api }
82
interface HighlightProps {
83
  prism?: PrismLib;
84
  theme?: PrismTheme;
85
  language: Language;
86
  code: string;
87
  children: (props: RenderProps) => JSX.Element;
88
}
89

90
declare const Highlight: React.FC<HighlightProps>;
91
```
92

93
[Component and Hooks](./component-hooks.md)
94

95
### Built-in Themes
96

97
Collection of 20 built-in syntax highlighting themes inspired by popular code editors like VSCode, with support for language-specific styling.
98

99
```typescript { .api }
100
declare const themes: {
101
  dracula: PrismTheme;
102
  duotoneDark: PrismTheme;
103
  duotoneLight: PrismTheme;
104
  github: PrismTheme;
105
  nightOwl: PrismTheme;
106
  nightOwlLight: PrismTheme;
107
  oceanicNext: PrismTheme;
108
  okaidia: PrismTheme;
109
  palenight: PrismTheme;
110
  shadesOfPurple: PrismTheme;
111
  synthwave84: PrismTheme;
112
  ultramin: PrismTheme;
113
  vsDark: PrismTheme;
114
  vsLight: PrismTheme;
115
  jettwaveDark: PrismTheme;
116
  jettwaveLight: PrismTheme;
117
  oneDark: PrismTheme;
118
  oneLight: PrismTheme;
119
  gruvboxMaterialDark: PrismTheme;
120
  gruvboxMaterialLight: PrismTheme;
121
};
122
```
123

124
[Themes](./themes.md)
125

126
### Bundled Prism Instance
127

128
Pre-configured Prism.js instance with common programming languages bundled for optimal performance and no global namespace pollution.
129

130
```typescript { .api }
131
declare const Prism: PrismLib;
132

133
interface PrismLib {
134
  languages: Record<string, PrismGrammar>;
135
  tokenize(text: string, grammar: PrismGrammar): (string | PrismToken)[];
136
  hooks: {
137
    run(name: string, env: EnvConfig): void;
138
  };
139
}
140
```
141

142
**Supported Languages**: markup, jsx, tsx, swift, kotlin, objectivec, js-extras, reason, rust, graphql, yaml, go, cpp, markdown, python, json (and their dependencies)
143

144
[Utilities](./utilities.md)
145

146
## Core Types
147

148
```typescript { .api }
149
type Language = string;
150

151
interface Token {
152
  types: string[];
153
  content: string;
154
  empty?: boolean;
155
}
156

157
interface RenderProps {
158
  tokens: Token[][];
159
  className: string;
160
  style: CSSProperties;
161
  getLineProps: (input: LineInputProps) => LineOutputProps;
162
  getTokenProps: (input: TokenInputProps) => TokenOutputProps;
163
}
164

165
interface PrismTheme {
166
  plain: PrismThemeEntry;
167
  styles: Array<{
168
    types: string[];
169
    style: PrismThemeEntry;
170
    languages?: Language[];
171
  }>;
172
}
173

174
interface PrismThemeEntry {
175
  color?: string;
176
  background?: string;
177
  backgroundColor?: string;
178
  fontStyle?: "normal" | "italic";
179
  fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
180
  textDecorationLine?: "none" | "underline" | "line-through" | "underline line-through";
181
  opacity?: number;
182
  cursor?: string;
183
  textShadow?: string;
184
  backgroundImage?: string;
185
}
186

187
interface LineInputProps {
188
  style?: CSSProperties;
189
  className?: string;
190
  line: Token[];
191
  [key: string]: unknown;
192
}
193

194
interface LineOutputProps {
195
  style?: CSSProperties;
196
  className: string;
197
  [key: string]: unknown;
198
}
199

200
interface TokenInputProps {
201
  style?: CSSProperties;
202
  className?: string;
203
  token: Token;
204
  [key: string]: unknown;
205
}
206

207
interface TokenOutputProps {
208
  style?: CSSProperties;
209
  className: string;
210
  children: string;
211
  [key: string]: unknown;
212
}
213

214
type PrismGrammar = import("prismjs").Grammar;
215
type PrismLib = typeof import("prismjs");
216
```