Collection of theme-ui and external components.
Theme UI
created:3/15/2021
updated:3/15/2021
source lines:105
comments %:34

SyntaxHighlighter

Syntax highlighter component using prism for the actual source display.

Overview

import { Button } from 'theme-ui';

Name
Description
Default
Controls
children

source code to be displayed.

string | (string & {}) | (string & ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)>) | (string & ReactNodeArray) | (string & ReactPortal)
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

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