Code

Code is a component used to display inline code. It is composed from the Box component with a font family of mono for displaying code.

Import#

import { Code } from "@chakra-ui/core";

import { Code } from "@chakra-ui/core";

Usage#

Hello world

<Code>Hello world</Code>

<Code>Hello world</Code>

Editable Example

Colors#

You can change the color scheme of the component by passing the variantColor prop.

console.log(welcome)var chakra = 'awesome!'npm install chakra

<Stack isInline>
  <Code children="console.log(welcome)" />
  <Code variantColor="red" children="var chakra = 'awesome!'" />
  <Code variantColor="yellow" children="npm install chakra" />
</Stack>

<Stack isInline>
  <Code children="console.log(welcome)" />
  <Code variantColor="red" children="var chakra = 'awesome!'" />
  <Code variantColor="yellow" children="npm install chakra" />
</Stack>

Editable Example

Props#

Name	Type	Default	Description
`variantColor`	`string`		The color scheme to use for the code.
`children`	`React.ReactNode`		The content of the code

Proudly made in 🇳🇬

Released under the MIT License.

Code

.css-12m0k8p{pointer-events:auto;}Import.css-18hqai{color:#319795;font-weight:400;outline:none;opacity:0;margin-left:0.375rem;}.css-18hqai:focus{opacity:1;box-shadow:0 0 0 3px rgba(66,153,225,0.6);}#

Usage#

Colors#

Props#

Import#