@yozora/react-admonition

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

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

Related

• @yozora/ast
• @yozora/react-markdown
• @yozora/tokenizer-admonition
• remark-admonitions