@yozora/react-admonition NPM

This component is for rendering the Admonition data produced by @yozora/tokenizer-admonition.\ This component has been built into @yozora/react-markdown, you can use it directly.

Install

npm

npm install --save @yozora/react-admonition

yarn
```
yarn add @yozora/react-admonition
```

Usage

Basic:

import React from 'react'
import Admonition from '@yozora/react-admonition'

const wrapper = (
  <Admonition
    keyword="info"
    style={{ color: 'orange', fontSize: '16px' }}
    title={<span>a<strong>b</strong></span>}
  >
    some text1
    <span>some text2</span>
  </Admonition>
)

Props

Name	Type	Required	Default	Description
`children`	`React.ReactNode`	`false`	-	Admonition contents
`className`	`string`	`false`	-	Root css class
`keyword`	`string`	`false`	-	Admonition keyword
`title`	`string`	`false`	-	Admonition title
`style`	`React.CSSProperties`	`false`	-	Root css style
`icon`	`React.ReactNode`	`false`	-	Admonition title icon

className: The root element of this component will always bind with the CSS class 'yozora-admonition'
keyword
Raw Keyword Resolved Keyword
note
default note
note note
import info
info info
success tip
tip tip
warning caution
caution caution
error error
danger danger

Raw Keyword	Resolved Keyword
	`note`
`default`	`note`
`note`	`note`
`import`	`info`
`info`	`info`
`success`	`tip`
`tip`	`tip`
`warning`	`caution`
`caution`	`caution`
`error`	`error`
`danger`	`danger`

CSS variables

Name	Default value
`--yozora-admonition-border-width`	`5px`
`--yozora-colors-background-error`	`#ffebec`
`--yozora-colors-background-info`	`#eef9fd`
`--yozora-colors-background-note`	`#fdfdfe`
`--yozora-colors-background-success`	`#e6f6e6`
`--yozora-colors-background-warning`	`#fff8e6`
`--yozora-colors-border-error`	`#e13238`
`--yozora-colors-border-info`	`#4cb3d4`
`--yozora-colors-border-note`	`#d4d5d8`
`--yozora-colors-border-success`	`#009400`
`--yozora-colors-border-warning`	`#e6a700`