@yozora/html-admonition

This component is for rendering the Yozora Markdown AST node IAdmonition produced by @yozora/tokenizer-admonition into HTML string.

This component has been built into [@yozora/html-markdown][], you can use it directly.

Install

• npm

  npm install --save @yozora/html-admonition

• yarn

  yarn add @yozora/html-admonition

Usage

• Basic:

  import type { Admonition, Node } from '@yozora/ast'
  import { createNodeRendererContext } from '@yozora/core-html-renderer'
  import renderAdmonition from '@yozora/html-admonition'
  
  const context = createNodeRendererContext(
    {}, // definitionMap
    {}, // footnoteDefinitionMap
  )
  
  const admonition = {
    "type": "admonition",
    "keyword": "note",
    "title": [
      {
        "type": "text",
        "value": "optional title"
      }
    ],
    "children": [
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "some content"
          }
        ]
      }
    ]
  }
  renderAdmonition(admonition as Admonition, context)
  // => <div class="yozora-admonition yozora-admonition--default"><div class="yozora-admonition__heading"><h5><span class="yozora-text">optional title</span></h5></div><div class="yozora-admonition__body"><p class="yozora-paragraph"><span class="yozora-text">some content</span></p></div></div>

Related

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