Prism code highlight

Code highlight with Mantine theme colors and styles
Import
License

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

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 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
}
Build fully functional accessible web applications faster than ever
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