Markdown

Markdownは、マークダウン形式のテキストをレンダリングするコンポーネントです。

インポート

pnpm add @yamada-ui/markdown

Copied!

@yamada-ui/markdownは、@yamada-ui/reactに含まれていないため、別途インストールする必要があります。

import { Markdown } from "@yamada-ui/markdown"

Copied!

使い方

Markdownは、内部的にreact-markdownとreact-syntax-highlighterを使用しています。

編集可能な例

const README = `
<p align="center">
  <img src="https://raw.githubusercontent.com/yamada-ui/yamada-ui/main/logo/logo-colored@2x.png" alt="Yamada UI" width="480" />
</p>

<p align="center">
  <img alt="NPM Minzip" src="https://img.shields.io/bundlephobia/minzip/@yamada-ui/react"/>
  <a href="https://www.npmjs.com/package/@yamada-ui/react">
    <img alt="MIT License" src="https://img.shields.io/npm/v/@yamada-ui/react"/>
  </a>
  <img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@yamada-ui/react.svg?style=flat"/>
  <a href="https://github.com/yamada-ui/yamada-ui/blob/main/LICENSE">
    <img alt="MIT License" src="https://img.shields.io/github/license/yamada-ui/yamada-ui"/>
  </a>
  <img alt="Github Stars" src="https://img.shields.io/github/stars/yamada-ui/yamada-ui" />
  <a href="https://discord.gg/H7V5RfEDTR">
    <img alt="MIT License" src="https://img.shields.io/badge/Chat%20on-Discord-%235865f2"/>
  </a>
</p>

Yamada UI is a React UI component library that streamlines the development of cutting-edge web applications and websites. This library offers a diverse range of components that can be easily combined to construct complex user interfaces, incorporating various features such as color modes and animations, which are not typically supported by other React UI component libraries.

## Features

- Ease of Styling: Yamada UI contains a set of layout components like \`Box\` and \`Stack\` that make it easy to style your components by passing props.
- Flexible & composable: Yamada UI components are built on top of a React UI Primitive for endless composability.
- Animation: Yamada UI provides hooks that allow for easy declaration of animations. These hooks can be written similar to CSS animations and are supported by all components.
- Color mode: Yamada UI makes it easy to set values for each color mode in the props of all components.
- Theme switching: Yamada UI allows users to switch themes. Users can adapt their own themes and use web applications and websites.
- Other features: Yamada UI comes with essential loading and notification features that are considered crucial for modern web applications and websites. This means you don't have to define them individually yourself.

## Installation

To use Yamada UI components, all you need to install the
\`@yamada-ui/react\` package.

\`\`\`sh
pnpm add @yamada-ui/react
# or
yarn add @yamada-ui/react
# or
npm install @yamada-ui/react
# or
bun add @yamada-ui/react
\`\`\`

## Usage

To get started with using the components, please follow the steps below:

1. Wrap your application with the \`UIProvider\` provided

\`\`\`tsx
import { UIProvider } from '@yamada-ui/react'

const App = ({ children }) => {
  return <UIProvider>{children}</UIProvider>
}

export default App
\`\`\`

Yamada UI supports light and dark modes by default

2. Now you can start using components like so

\`\`\`tsx
import { Box, Text } from '@yamada-ui/react'

const Example = () => {
  return (
    <Box>
      <Text>ギャルのパンティーおくれーーーっ！！！！！</Text>
    </Box>
  )
}
\`\`\`

## License

MIT © [Hirotomo Yamada](https://github.com/yamada-ui)
`

return (
  <Box>
    <Markdown>{README}</Markdown>
  </Box>
)

Copied!

コードブロックのテーマを変更する

編集可能な例

const README = `
<p align="center">
  <img src="https://raw.githubusercontent.com/yamada-ui/yamada-ui/main/logo/logo-colored@2x.png" alt="Yamada UI" width="480" />
</p>

<p align="center">
  <img alt="NPM Minzip" src="https://img.shields.io/bundlephobia/minzip/@yamada-ui/react"/>
  <a href="https://www.npmjs.com/package/@yamada-ui/react">
    <img alt="MIT License" src="https://img.shields.io/npm/v/@yamada-ui/react"/>
  </a>
  <img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@yamada-ui/react.svg?style=flat"/>
  <a href="https://github.com/yamada-ui/yamada-ui/blob/main/LICENSE">
    <img alt="MIT License" src="https://img.shields.io/github/license/yamada-ui/yamada-ui"/>
  </a>
  <img alt="Github Stars" src="https://img.shields.io/github/stars/yamada-ui/yamada-ui" />
  <a href="https://discord.gg/H7V5RfEDTR">
    <img alt="MIT License" src="https://img.shields.io/badge/Chat%20on-Discord-%235865f2"/>
  </a>
</p>

Yamada UI is a React UI component library that streamlines the development of cutting-edge web applications and websites. This library offers a diverse range of components that can be easily combined to construct complex user interfaces, incorporating various features such as color modes and animations, which are not typically supported by other React UI component libraries.

## Features

- Ease of Styling: Yamada UI contains a set of layout components like \`Box\` and
  \`Stack\` that make it easy to style your components by passing props.
- Flexible & composable: Yamada UI components are built on top of a React UI
  Primitive for endless composability.
- Animation: Yamada UI provides hooks that allow for easy declaration of animations.
  These hooks can be written similar to CSS animations and are supported by all components.
- Color mode: Yamada UI makes it easy to set values for each color mode in the props of all components.
  This is not currently implemented in any other React UI component library.
- Theme switching: Yamada UI allows users to switch themes.
  Users can adapt their own themes and use web applications and websites.
  This is not currently implemented in any other React UI component library.
- Other features:
  Yamada UI comes with essential loading and notification features that are considered crucial for modern web applications and websites.
  This means you don't have to define them individually yourself.

## Installation

To use Yamada UI components, all you need to install the
\`@yamada-ui/react\` package.

\`\`\`sh
pnpm add @yamada-ui/react
# or
yarn add @yamada-ui/react
# or
npm install @yamada-ui/react
# or
bun add @yamada-ui/react
\`\`\`

## Usage

To get started with using the components, please follow the steps below:

1. Wrap your application with the \`UIProvider\` provided

\`\`\`tsx
import { UIProvider } from '@yamada-ui/react'

const App = ({ children }) => {
  return <UIProvider>{children}</UIProvider>
}

export default App
\`\`\`

Yamada UI supports light and dark modes by default

2. Now you can start using components like so

\`\`\`tsx
import { Box, Text } from '@yamada-ui/react'

const Example = () => {
  return (
    <Box>
      <Text>ギャルのパンティーおくれーーーっ！！！！！</Text>
    </Box>
  )
}
\`\`\`

## License

MIT © [Hirotomo Yamada](https://github.com/yamada-ui)
`

return <Markdown code={{ theme: "materialDark" }}>{README}</Markdown>

Copied!

カスタムコンポーネントを使う

カスタムコンポーネントを使う場合は、componentsに変更する要素とカスタムコンポーネントを設定します。

編集可能な例

const README = `
<p align="center">
  <img src="https://raw.githubusercontent.com/yamada-ui/yamada-ui/main/logo/logo-colored@2x.png" alt="Yamada UI" width="480" />
</p>

<p align="center">
  <img alt="NPM Minzip" src="https://img.shields.io/bundlephobia/minzip/@yamada-ui/react"/>
  <a href="https://www.npmjs.com/package/@yamada-ui/react">
    <img alt="MIT License" src="https://img.shields.io/npm/v/@yamada-ui/react"/>
  </a>
  <img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@yamada-ui/react.svg?style=flat"/>
  <a href="https://github.com/yamada-ui/yamada-ui/blob/main/LICENSE">
    <img alt="MIT License" src="https://img.shields.io/github/license/yamada-ui/yamada-ui"/>
  </a>
  <img alt="Github Stars" src="https://img.shields.io/github/stars/yamada-ui/yamada-ui" />
  <a href="https://discord.gg/H7V5RfEDTR">
    <img alt="MIT License" src="https://img.shields.io/badge/Chat%20on-Discord-%235865f2"/>
  </a>
</p>

Yamada UI is a React UI component library that streamlines the development of cutting-edge web applications and websites. This library offers a diverse range of components that can be easily combined to construct complex user interfaces, incorporating various features such as color modes and animations, which are not typically supported by other React UI component libraries.

## Features

- Ease of Styling: Yamada UI contains a set of layout components like \`Box\` and
  \`Stack\` that make it easy to style your components by passing props.
- Flexible & composable: Yamada UI components are built on top of a React UI
  Primitive for endless composability.
- Animation: Yamada UI provides hooks that allow for easy declaration of animations.
  These hooks can be written similar to CSS animations and are supported by all components.
- Color mode: Yamada UI makes it easy to set values for each color mode in the props of all components.
  This is not currently implemented in any other React UI component library.
- Theme switching: Yamada UI allows users to switch themes.
  Users can adapt their own themes and use web applications and websites.
  This is not currently implemented in any other React UI component library.
- Other features:
  Yamada UI comes with essential loading and notification features that are considered crucial for modern web applications and websites.
  This means you don't have to define them individually yourself.

## Installation

To use Yamada UI components, all you need to install the
\`@yamada-ui/react\` package.

\`\`\`sh
pnpm add @yamada-ui/react
# or
yarn add @yamada-ui/react
# or
npm install @yamada-ui/react
# or
bun add @yamada-ui/react
\`\`\`

## Usage

To get started with using the components, please follow the steps below:

1. Wrap your application with the \`UIProvider\` provided

\`\`\`tsx
import { UIProvider } from '@yamada-ui/react'

const App = ({ children }) => {
  return <UIProvider>{children}</UIProvider>
}

export default App
\`\`\`

Yamada UI supports light and dark modes by default

2. Now you can start using components like so

\`\`\`tsx
import { Box, Text } from '@yamada-ui/react'

const Example = () => {
  return (
    <Box>
      <Text>ギャルのパンティーおくれーーーっ！！！！！</Text>
    </Box>
  )
}
\`\`\`

## License

MIT © [Hirotomo Yamada](https://github.com/yamada-ui)
`

const components = {
  h2: ({ children }) => (
    <Heading
      size="2xl"
      bgGradient="linear(to-l, #f37bdf, #59a9e1)"
      bgClip="text"
      isTruncated
    >
      {children}
    </Heading>
  ),
}

return <Markdown components={components}>{README}</Markdown>

Copied!

GitHubでこのページを編集する

前ColorSwatch 次Timeline