SyntaxHighlighter

3.4.5

Syntax highlighter component using prism for the actual source display.

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

import { Button } from 'theme-ui';

() => (
  <SyntaxHighlighter theme={shadesOfPurple}>{source}</SyntaxHighlighter>
)

Name	Description	Default
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
prism-react-renderer ^1.0.2	HighlightdefaultPropsPrismThemeLanguage
prism-react-renderer/themes/duotoneDark ^1.0.2	duotoneDark
prism-react-renderer/themes/duotoneLight ^1.0.2	duotoneLight
react ^17.0.1	FragmentFCElementTypeCSSProperties	*
theme-ui ^0.6.0-alpha.7	useColorModejsxThemedHeadingBox

^0.6.0-alpha.7

^1.0.2

import { Button } from 'theme-ui';

({
  children,
  dark,
}) => <SyntaxHighlighter dark={dark}>{children}</SyntaxHighlighter>