SyntaxHighlighter

Syntax highlighter component using prism for the actual source display.

import { Button } from 'theme-ui';

select	#	dark	children
	1		Johnny Oberbrunner
	2		Jolie Beahan Sr.
	3		Cleo Lindgren
	4		Tyler Blanda
	5		Krista Zulauf

5 data rows

Name	Description	Default	Controls
children	source code to be displayed. (string & (boolean \| ReactChild \| ReactFragment \| ReactPortal \| null))		import { Button } from 'theme-ui';
dark	used to specify a "dark" color theme - applcable only if no custom theme prop is provided. if dark: true, duotoneDark theme is used. if dark: false, duotoneLight theme is used. boolean	false

	Status	Full name	Title	Time(ms)
SyntaxHighlighter.test.ts(12 tests)
	passed	SyntaxHighlighter > overview > 1	snapshot	89
	passed	SyntaxHighlighter > overview > 1	accessibility	158
	passed	SyntaxHighlighter > overview > 2	snapshot	89
	passed	SyntaxHighlighter > overview > 2	accessibility	693
	passed	SyntaxHighlighter > overview > 3	snapshot	70
	passed	SyntaxHighlighter > overview > 3	accessibility	146
	passed	SyntaxHighlighter > overview > 4	snapshot	70
	passed	SyntaxHighlighter > overview > 4	accessibility	141
	passed	SyntaxHighlighter > overview > 5	snapshot	92

total 12 tests

	Kind	Total	Covered	Skipped	%
SyntaxHighlighter.tsx
	lines	30	22	0	73.33%
	functions	11	6	0	54.54%
	statements	33	24	0	72.72%
	branches	22	14	0	63.63%

import { Button } from 'theme-ui';

import { Button } from 'theme-ui';

320px

import { Button } from 'theme-ui';

375px

import { Button } from 'theme-ui';

768px

import { Button } from 'theme-ui';

1024px