A next-generation tool to create blazing-fast documentation sites
API
created:3/5/2021
updated:3/5/2021
loc
105
comments
34%
passed
12
coverage
55%

SyntaxHighlighter

avatar of atanasster
@component-controls/components
3.14.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 & (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
``

Commits

Date
Author
Commit Message
2/17/2021

atanasster

avatar of atanasster
feat: components history and catalog
12/3/2020

atanasster

avatar of atanasster
chore: upgrade nextjs
11/17/2020

atanasster

avatar of atanasster
chore: cleanup default imports of React
7/20/2020

atanasster

avatar of atanasster
docs: update source with title
6/28/2020

atanasster

avatar of atanasster
feat: mdx code add parameters and mdx docs
6/21/2020

atanasster

avatar of atanasster
fix: dark mode removed from theme context
4/19/2020

atanasster

avatar of atanasster
chore: clean up props tables
3/20/2020

atanasster

avatar of atanasster
docs: update Source and SyntaxHighlight docs
3/9/2020

atanasster

avatar of atanasster
feat: syntahighlighter and markdown code format
9 commits
package
imports
peer
HighlightdefaultPropsPrismThemeLanguage
duotoneDark
duotoneLight
react
^17.0.1
FragmentFCElementTypeCSSProperties
*
theme-ui
^0.8.4
useColorModejsxThemedHeadingBox

Stories

Theme

import { Button } from 'theme-ui';