Code
Code is a component used to display inline code. It is composed of the
Box component with a font family of mono
for displaying code.
Import#
import { CCode } from '@chakra-ui/vue';
Usage#
Hello world
Editable Example
<c-code>Hello world</c-code>
Colors#
You can change the color scheme of the component by passing the variantColor
prop.
console.log(welcome)
var chakra = 'awesome!'>
npm install chakra
Editable Example
<c-stack is-inline>
<c-code>console.log(welcome)</c-code>
<c-code variant-color="red">var chakra = 'awesome!'></c-code>
<c-code variant-color="yellow">npm install chakra</c-code>
</c-stack>
Props#
Name | Type | Default | Description |
---|---|---|---|
variantColor | string | The color scheme to use for the code. |
Slots#
Name | Description |
---|---|
default | Used for the CCode content |
❤️ Contribute to this page
Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!