Prism code highlight

Code highlight with Mantine theme colors and styles

Import

Source

View source code

Docs

Package

Bundle size

License

Installation

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

Install with npm:

npm install @mantine/prism @mantine/core @mantine/hooks

Install with yarn:

yarn add @mantine/prism @mantine/core @mantine/hooks

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

Project

Contribute to Mantine Changelog Releases

Community

Join Discord community Follow on Twitter Email newsletter Github discussions

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

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter