Code

Code (코드 표시)

Code 컴포넌트는 인라인(inline) 또는 블록(block) 형태로 코드를 표시하는 컴포넌트예요. 기본적으로 인라인 code HTML 요소를 렌더링해요.

출처: 문서

본문

기본적으로 Code 컴포넌트는 인라인 code HTML 요소를 렌더링해요.

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

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

블록 코드

pre 요소 안에 코드를 렌더링하려면 block prop을 전달하면 돼요.

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

커스텀 색상

기본적으로 코드 색상은 회색(gray)이에요. color prop으로 유효한 CSS 색상이나 theme.colors 중 하나로 바꿀 수 있어요.

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

더 알아보기 (Learn more)

• Kbd — 키보드 키 표시 컴포넌트
• 테마 색상 — Mantine 테마 색상 참고