Prism code highlight

Code highlight with Mantine theme colors and styles

Import

Source

View source code

Docs

Edit this page

Package

@mantine/prism

License

MIT

Installation

Package depends on react, react-dom, @mantine/hooks, @mantine/core 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 { Button } from '@mantine/core';

function Demo() {
  return <Button>Hello</Button>
}

import { Prism } from '@mantine/prism';

const demoCode = `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 { Button } from '@mantine/core';
2

3
function Demo() {
4
  return <Button>Hello</Button>
5
}

<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 { Button } from '@mantine/core';
2

-
function Demo() {
-
  return <Button>Hello</Button>
-
}
6

+
function Usage() {
+
  return <ActionIcon>Hello</ActionIcon>;
+
}

const deleted = { color: 'red', label: '-' };
const added = { color: 'green', label: '+' };

<Prism
  language="tsx"
  withLineNumbers
  highlightLines={{
    3: deleted,
    4: deleted,
    5: deleted,
    7: added,
    8: added,
    9: added,
  }}
>
  {code}
</Prism>

Copy button

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

import { Button } from '@mantine/core';

function Demo() {
  return <Button>Hello</Button>
}

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>

Native scrollbars

By default, Prism uses ScrollArea component to handle overflow content, to replace it with native scrollbars set scrollAreaComponent="div":

With ScrollArea component (default):

<p>
  Long code that will force Prism to have a horizontal scrollbar, by default, scroll behavior is handled by ScrollArea component, but it can be changed to native browser scrollbars
</p>

With native scrollbars:

<p>
  Long code that will force Prism to have a horizontal scrollbar, by default, scroll behavior is handled by ScrollArea component, but it can be changed to native browser scrollbars
</p>

import { Text } from '@mantine/core';
import { Prism } from '@mantine/prism';

const longCode = `
<p>
  Long code that will force Prism to have a horizontal scrollbar, by default, scroll behavior is handled by ScrollArea component, but it can be changed to native browser scrollbars
</p>
`;

function Demo() {
  return (
    <>
      <Text mb={5}>With ScrollArea component (default):</Text>
      <Prism language="tsx">{longCode}</Prism>

      <Text mb={5} mt="xl">With native scrollbars:</Text>
      <Prism language="tsx" scrollAreaComponent="div">{longCode}</Prism>
    </>
  );
}

With tabs

To display multiple files use Prism.Tabs component, it supports the same props as Tabs component:

@font-face {
  font-family: Chunkfive; src: url('Chunkfive.otf');
}

body, .usertext {
  color: #F0F0F0; background: #600;
  font-family: Chunkfive, sans;
  --heading-1: 30px/32px Helvetica, sans-serif;
}

@import url(print.css);
@media print {
  a[href^=http]::after {
    content: attr(href)
  }
}

<Prism.Tabs>
  <Prism.Tab label="styles.css" language="css" icon={<CSSIcon />}>
    {cssCode}
  </Prism.Tab>

  <Prism.Tab label="decorator.py" language="python" icon={<PythonIcon />}>
    {pythonCode}
  </Prism.Tab>

  <Prism.Tab label="component.tsx" language="tsx" icon={<TsIcon />}>
    {tsCode}
  </Prism.Tab>
</Prism.Tabs>

Force dark/light theme

You can force dark/light color scheme by setting colorScheme prop:

import { Button } from '@mantine/core';

function Demo() {
  return <Button>Hello</Button>
}

<Prism colorScheme="dark" language="tsx">{code}</Prism>

Languages

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

package main

import "fmt"

func main() {
    ch := make(chan float64)
    ch <- 1.0e10    // magic number
    x, ok := <- ch
    defer fmt.Println(`exitting now`)
    go println(len("hello world!"))
    return
}

Go back

Notifications system – @mantine/notifications

Up next

Rich text editor – @mantine/rte

Build fully functional accessible web applications faster than ever

Project

Contribute to Mantine Media assets 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