Code

Display 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>