Code

Inline and block code

Source

View source code

LLM docs

LLM documentation

Docs

Edit this page

PackageIcon

@mantine/core

Usage

By default, the Code component renders an inline code html element:

React.createElement()

import { Code } from '@mantine/core';

function Demo() {
  return <Code>React.createElement()</Code>;
}

Block code

To render code in a pre element, pass the block prop to the Code component:

import { Code } from '@mantine/core';

function Demo() {
  return <Code>React.createElement()</Code>;
}

import { Code } from '@mantine/core';

const codeForPreviousDemo = `import { Code } from '@mantine/core';

function Demo() {
  return <Code>React.createElement()</Code>;
}`;

function Demo() {
  return <Code block>{codeForPreviousDemo}</Code>;
}

Custom color

By default, the code color is gray. You can change it to any valid CSS color or to one of the theme.colors:

React.createElement()React.createElement()

import { Code, Group } from '@mantine/core';

function Demo() {
  return (
    <Group justify="center">
      <Code color="blue.9" c="white">
        React.createElement()
      </Code>
      <Code color="var(--mantine-color-blue-light)">React.createElement()</Code>
    </Group>
  );
}

Blockquote

Highlight