Code

Inline or block code without syntax highlight

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

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

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