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()

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>;
}

Go back

Blockquote – @mantine/core

Up next

Highlight – @mantine/core

Code component props

Name	Type	Description
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

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on Github GitHub discussions

Project

Mantine UI Documentation Github organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter