K

Prism code highlight

Code highlight with Mantine theme colors and styles
Import
License

Installation

Package depends on react, react-dom, @mantine/hooks, @mantine/core, react-jss and prism-react-renderer.

Install with npm:

npm install react-jss prism-react-renderer @mantine/prism @mantine/core @mantine/hooks

Install with yarn:

yarn add react-jss prism-react-renderer @mantine/prism @mantine/core @mantine/hooks

Usage

Use Prism component to highlight code with Mantine theme styles. Component uses prism-react-renderer under the hood and support light and dark theme, it is used in Mantine docs to display all code examples.

import React from 'react';
import { Button } from '@mantine/core';
function Demo() {
return <Button>Hello</Button>
}
import React from 'react';
import { Prism } from '@mantine/prism';
const demoCode = `import React from 'react';
import { Button } from '@mantine/core';
function Demo() {
return <Button>Hello</Button>
}`;
function Demo() {
return <Prism language="tsx">{demoCode}</Prism>;
}

Line numbers

Set withLineNumbers prop to display line numbers:

1
import React from 'react';
2
import { Button } from '@mantine/core';
3
4
function Demo() {
5
return <Button>Hello</Button>
6
}
<Prism withLineNumbers language="tsx">{code}</Prism>

Lines highlight

To highlight individual lines use highlightLines prop with object containing line numbers as keys and highlight options as values. Highlight options include color from theme.colors and label which replaces line number:

1
import React from 'react';
2
import { Button } from '@mantine/core';
3
-
function Demo() {
-
return <Button>Hello</Button>
-
}
7
+
function Usage() {
+
return <ActionIcon>Hello</ActionIcon>;
+
}
const deleted = { color: 'red', label: '-' };
const added = { color: 'green', label: '+' };
<Prism
language="tsx"
withLineNumbers
highlightLines={{
4: deleted,
5: deleted,
6: deleted,
8: added,
9: added,
10: added,
}}
>
{code}
</Prism>

Copy button

To remove copy button set noCopy prop. Copy button labels can be changed with copyLabel and copiedLabel props:

import React from 'react';
import { Button } from '@mantine/core';
function Demo() {
return <Button>Hello</Button>
}
import React from 'react';
import { Button } from '@mantine/core';
function Demo() {
return <Button>Hello</Button>
}
<Prism noCopy language="tsx">{code}</Prism>
<Prism
language="tsx"
copyLabel="Copy code to clipboard"
copiedLabel="Code copied to clipboard"
>
{code}
</Prism>

Force dark theme

You can force dark color scheme by setting themeOverride={{ colorScheme: 'dark' }}:

import React from 'react';
import { Button } from '@mantine/core';
function Demo() {
return <Button>Hello</Button>
}
<Prism themeOverride={{ colorScheme: 'dark' }} language="tsx">{code}</Prism>

Languages

Component supports all languages which are supported by prism-react-renderer:

import React from 'react';
import cx from 'clsx';
import { useReducedMotion } from '@mantine/hooks';
import { DefaultProps, MantineNumberSize, useMantineTheme, mergeStyles } from '../../theme';
import useStyles, { sizes } from './Burger.styles';
export const BURGER_SIZES = sizes;
export interface BurgerProps
extends DefaultProps<typeof useStyles>,
React.ComponentPropsWithoutRef<'button'> {
/** Burger state: true for cross, false for burger */
opened: boolean;
/** Burger color from theme */
color?: string;
/** Predefined burger size or number to set width and height in px */
size?: MantineNumberSize;
/** Get element ref */
elementRef?: React.ForwardedRef<HTMLButtonElement>;
}
export function Burger({
className,
style,
opened,
color = 'gray',
size = 'md',
themeOverride,
elementRef,
classNames,
styles,
...others
}: BurgerProps) {
const theme = useMantineTheme(themeOverride);
const reduceMotion = useReducedMotion();
const classes = useStyles({ color, size, theme, reduceMotion }, classNames);
const _styles = mergeStyles(classes, styles);
return (
<button
type="button"
className={cx(classes.root, className)}
ref={elementRef}
style={{ ...style, ..._styles.root }}
{...others}
>
<div
className={cx(classes.burger, { [classes.opened]: opened })}
style={{ ..._styles.burger, ...(opened ? _styles.opened : null) }}
/>
</button>
);
}
Burger.displayName = '@mantine/core/Burger';
Build fully functional accessible web applications with ease
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback