created:3/15/2021
updated:3/15/2021
source lines:105
comments %:34
SyntaxHighlighter
Syntax highlighter component using prism for the actual source display.
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 |
|---|---|---|
prism-react-renderer ^1.0.2 | HighlightdefaultPropsPrismThemeLanguage | |
duotoneDark | ||
duotoneLight | ||
react ^17.0.1 | FragmentFCElementTypeCSSProperties | * |
theme-ui ^0.6.0-alpha.7 | useColorModejsxThemedHeadingBox |