Code

Inline or block code without syntax highlight
Import

Inline code

By default, Code component renders inline code html element:

React.createElement()
import { Code } from '@mantine/core';
function Demo() {
return <Code>React.createElement()</Code>;
}

Block code

To render code in pre element pass block prop to Code component:

import React from 'react';
import { Code } from '@mantine/core';

function Demo() {
  return <Code>React.createElement()</Code>;
}
import { Code } from '@mantine/core';
const codeForPreviousDemo = `import React from 'react';
import { Code } from '@mantine/core';
function Demo() {
return <Code>React.createElement()</Code>;
}`;
function Demo() {
return <Code block>{codeForPreviousDemo}</Code>;
}

Custom color

By default, code has gray color, you can change it to any color from theme.colors:

React.createElement()React.createElement()React.createElement()
import { Code } from '@mantine/core';
function Demo() {
return (
<>
<Code color="red">React.createElement()</Code>
<Code color="teal">React.createElement()</Code>
<Code color="blue">React.createElement()</Code>
</>
);
}

Syntax highlight

In case you need syntax highlight like in all code examples on Mantine website, use @mantine/prism package:

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>;
}
Download more icon variants from https://tabler-icons.io/i/search

Code component props

NameTypeDescription
block
boolean
True for code block, false for inline code
children *
ReactNode
Code content
color
MantineColor
Code color and background from theme, defaults to gray in light theme and to dark in dark theme