Code
Code is a component that represents a code block. By default, it renders a code element.
console.log("Hello, Yamada!")<Code>console.log("Hello, Yamada!")</Code>
Usage
import { Code } from "@yamada-ui/react"
import { Code } from "@/components/ui"
import { Code } from "@workspaces/ui"
<Code />
Change Variant
console.log("Hello, Yamada!")console.log("Hello, Yamada!")console.log("Hello, Yamada!")console.log("Hello, Yamada!")<VStack alignItems="flex-start">
<For each={["solid", "subtle", "surface", "outline"]}>
{(variant, index) => (
<Code key={index} variant={variant}>
console.log("Hello, Yamada!")
</Code>
)}
</For>
</VStack>
Change Size
console.log("Hello, Yamada!")console.log("Hello, Yamada!")console.log("Hello, Yamada!")console.log("Hello, Yamada!")<VStack alignItems="flex-start">
<For each={["xs", "sm", "md", "lg"]}>
{(size, index) => (
<Code key={index} size={size}>
console.log("Hello, Yamada!")
</Code>
)}
</For>
</VStack>
Change Color Scheme
console.log("Hello, Yamada!")console.log("Hello, Yamada!")<VStack alignItems="flex-start">
<For each={["success", "warning"]}>
{(colorScheme, index) => (
<Code key={index} colorScheme={colorScheme}>
console.log("Hello, Yamada!")
</Code>
)}
</For>
</VStack>
Props
Similar Components
Blockquote
Blockquote is a component that represents a quotation. By default, it renders a blockquote element.
Em
Em is a component that represents emphasized text. By default, it renders a em element.
Heading
Heading is a component that represents section headings. By default, it renders an h1 element.
Highlight
Highlight is a component that highlights specified strings within text. By default, it renders a p element.
Kbd
Kbd is a component that represents keyboard input.
Mark
Mark is a component that emphasizes a specific part of the text.
Text
Text is a component that represents a paragraph of text. By default, it renders a p element.
Link
Link is a component for creating hyperlinks to different web pages, locations within the same page, or other URLs.