Code

Inline or block code without syntax highlight
Import

Inline code

By default Code component renders inline code html element:

React.createElement()
<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>;
}
const codeForPreviousDemo = `import React from 'react';
import { Code } from '@mantine/core';
function Demo() {
return <Code>React.createElement()</Code>;
}`;
<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()
<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 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>;
}
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