Code

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