SyntaxHighlighter

3.15.0

Syntax highlighter component using prism for the actual source display.

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

import { Button } from 'theme-ui';

Name	Description	Default
children	source code to be displayed. (string & (boolean \| ReactChild \| ReactFragment \| ReactPortal \| null))
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	``

Date	Author	Commit Message
2/17/2021	atanasster	feat: components history and catalog
12/3/2020	atanasster	chore: upgrade nextjs
11/17/2020	atanasster	chore: cleanup default imports of React
7/20/2020	atanasster	docs: update source with title
6/28/2020	atanasster	feat: mdx code add parameters and mdx docs
6/21/2020	atanasster	fix: dark mode removed from theme context
4/19/2020	atanasster	chore: clean up props tables
3/20/2020	atanasster	docs: update Source and SyntaxHighlight docs
3/9/2020	atanasster	feat: syntahighlighter and markdown code format

9 commits

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.8.4	useColorModejsxThemedHeadingBox

import { Button } from 'theme-ui';