import{Highlight,themes}from'prism-react-renderer';<Highlighttheme={themes.dracula}{/* ... */}/> These themes are JSON-based and are heavily inspired by VSCode's theme format. exporttypePrismTheme={plain:PrismThemeEntrystyles:Array<{types:string[]style:PrismThemeEntrylanguages?:Language[]}>...
This package includes the default syntax color themes from theprismjsandprism-react-rendererpackages. To add these to your Theme UIthemeobject, import a preset and add the styles totheme.styles.code. // theme.js importnightOwlfrom'@theme-ui/prism/presets/night-owl.json' ...
import { Highlight, themes } from 'prism-react-renderer'; const remapLanguages: Record<string, string> = { 'objective-c': 'objc', sh: 'bash', rb: 'ruby', json: 'js', }; function BaconCode(props: { children: string; // language-ts className: string; // "app.config.ts" meta...
While all classNames are provided with <Highlight />, so that you could use your good old Prism CSS-file themes, you can also choose to use prism-react-renderer's themes like so: import { Highlight, themes } from 'prism-react-renderer'; <Highlight theme={themes.dracula} {/* ... ...