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

SyntaxHighlighter

@component-controls/components
3.4.5

Syntax highlighter component using prism for the actual source display.

import { SyntaxHighlighter } from '@component-controls/components';

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

optional

PrismTheme
theme provided to the component. Themes can be imported from
prism-react-renderer/themes
.

PrismTheme
-
title

optional title to display for the code block. Usually used from MDX

string
-
language

source lnguage used, by default "jsx".

markupbashclikeccppcssjavascriptjsxcoffeescriptactionscriptcss-extrdiffgitgographqlhandlebarsjsonlessmakefilemarkdownobjectivecocamlpythonreasonsassscsssqlstylustsxtypescriptwasmyaml
jsx
renderFn

custom function to render the source code.

(props: RenderProps, other: { theme: PrismTheme; }) => ReactNode
-
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
style

css styles for the container.

CSSProperties
-
as

syntax container as element. Can be used as

div
or
span
.

ElementType<any>
span
metastring

code configuration string passed from MDX

string
``

package
imports
peer
HighlightdefaultPropsPrismThemeLanguage
duotoneDark
duotoneLight
react
^17.0.1
FragmentFCElementTypeCSSProperties
*
theme-ui
^0.6.0-alpha.7
useColorModejsxThemedHeadingBox

Stories

Theme

import { Button } from 'theme-ui';