A next-generation tool to create blazing-fast documentation sites
API
created:3/5/2021
updated:3/5/2021
loc
105
comments
34%
passed
12
coverage
55%

SyntaxHighlighter

avatar of atanasster

Syntax highlighter component using prism for the actual source display.

Overview

import { Button } from 'theme-ui';

Test data

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))
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

Tests results

Status
Full name
Title
Time(ms)
SyntaxHighlighter.test.ts(12 tests)
passed
SyntaxHighlighter > overview > 1
snapshot
141
passed
SyntaxHighlighter > overview > 1
accessibility
502
passed
SyntaxHighlighter > overview > 2
snapshot
221
passed
SyntaxHighlighter > overview > 2
accessibility
374
passed
SyntaxHighlighter > overview > 3
snapshot
257
passed
SyntaxHighlighter > overview > 3
accessibility
112
passed
SyntaxHighlighter > overview > 4
snapshot
63
passed
SyntaxHighlighter > overview > 4
accessibility
87
passed
SyntaxHighlighter > overview > 5
snapshot
61
total 12 tests

Tests coverage

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%

A11y tests

import { Button } from 'theme-ui';

Viewport

import { Button } from 'theme-ui';
320px
import { Button } from 'theme-ui';
375px
import { Button } from 'theme-ui';
768px
import { Button } from 'theme-ui';
1024px