Default Dark Themes From prism-react-renderer

These are the light themes that come with prism-react-renderer by default.

There are also dark themes.

duotoneLight

1function ThemeCodeBlock({ theme, code, language }) {
2  return (
3    <Highlight
4      {...defaultProps}
5      theme={theme}
6      code={code.trim()}
7      language={language}
8    >
9      {({ className, style, tokens, getLineProps, getTokenProps }) => (
10        <pre className="some_class" style={style}>
11          {tokens.map((line, i) => (
12            <div
13              key={i}
14              {...getLineProps({ line, key: i })}
15              className="token-line code_line"
16            >
17              <span className="line_number">
18                {i + 1}
19              </span>
20              <span className="code_line_content">
21                {line.map((token, key) => (
22                  <span key={key} {...getTokenProps({ token, key })} />
23                ))}
24              </span>
25            </div>
26          ))}
27        </pre>
28      )}
29    </Highlight>
30  )
31}

github

1function ThemeCodeBlock({ theme, code, language }) {
2  return (
3    <Highlight
4      {...defaultProps}
5      theme={theme}
6      code={code.trim()}
7      language={language}
8    >
9      {({ className, style, tokens, getLineProps, getTokenProps }) => (
10        <pre className="some_class" style={style}>
11          {tokens.map((line, i) => (
12            <div
13              key={i}
14              {...getLineProps({ line, key: i })}
15              className="token-line code_line"
16            >
17              <span className="line_number">
18                {i + 1}
19              </span>
20              <span className="code_line_content">
21                {line.map((token, key) => (
22                  <span key={key} {...getTokenProps({ token, key })} />
23                ))}
24              </span>
25            </div>
26          ))}
27        </pre>
28      )}
29    </Highlight>
30  )
31}

nightOwlLight

1function ThemeCodeBlock({ theme, code, language }) {
2  return (
3    <Highlight
4      {...defaultProps}
5      theme={theme}
6      code={code.trim()}
7      language={language}
8    >
9      {({ className, style, tokens, getLineProps, getTokenProps }) => (
10        <pre className="some_class" style={style}>
11          {tokens.map((line, i) => (
12            <div
13              key={i}
14              {...getLineProps({ line, key: i })}
15              className="token-line code_line"
16            >
17              <span className="line_number">
18                {i + 1}
19              </span>
20              <span className="code_line_content">
21                {line.map((token, key) => (
22                  <span key={key} {...getTokenProps({ token, key })} />
23                ))}
24              </span>
25            </div>
26          ))}
27        </pre>
28      )}
29    </Highlight>
30  )
31}

ultramin

1function ThemeCodeBlock({ theme, code, language }) {
2  return (
3    <Highlight
4      {...defaultProps}
5      theme={theme}
6      code={code.trim()}
7      language={language}
8    >
9      {({ className, style, tokens, getLineProps, getTokenProps }) => (
10        <pre className="some_class" style={style}>
11          {tokens.map((line, i) => (
12            <div
13              key={i}
14              {...getLineProps({ line, key: i })}
15              className="token-line code_line"
16            >
17              <span className="line_number">
18                {i + 1}
19              </span>
20              <span className="code_line_content">
21                {line.map((token, key) => (
22                  <span key={key} {...getTokenProps({ token, key })} />
23                ))}
24              </span>
25            </div>
26          ))}
27        </pre>
28      )}
29    </Highlight>
30  )
31}

vsLight

1function ThemeCodeBlock({ theme, code, language }) {
2  return (
3    <Highlight
4      {...defaultProps}
5      theme={theme}
6      code={code.trim()}
7      language={language}
8    >
9      {({ className, style, tokens, getLineProps, getTokenProps }) => (
10        <pre className="some_class" style={style}>
11          {tokens.map((line, i) => (
12            <div
13              key={i}
14              {...getLineProps({ line, key: i })}
15              className="token-line code_line"
16            >
17              <span className="line_number">
18                {i + 1}
19              </span>
20              <span className="code_line_content">
21                {line.map((token, key) => (
22                  <span key={key} {...getTokenProps({ token, key })} />
23                ))}
24              </span>
25            </div>
26          ))}
27        </pre>
28      )}
29    </Highlight>
30  )
31}