@yozora/html-footnote-definition

This component is for rendering the Yozora Markdown AST node IFootnoteDefinition produced by [@yozora/tokenizer-footnote-definition][] into HTML string.

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

Install

• npm

  npm install --save @yozora/html-footnote-definition

• yarn

  yarn add @yozora/html-footnote-definition

Usage

• Basic:

  import type { IFootnoteDefinition } from '@yozora/ast'
  import renderFootnoteDefinitions from '@yozora/html-footnote-definition'
  
  const nodes: IFootnoteDefinition[] = [
      {
        type: 'footnoteDefinition',
        identifier: 'bravo',
        label: 'Bravo',
        children: [
          {
            type: 'text',
            value: 'bravo and charlie.',
          } as IText,
        ],
      },
    ]
  renderFootnoteReference({ nodes }, rendererChildren)
  // => <div class="yozora-footnote-definition">
  //      <div class="yozora-footnote-definition__title">footnote-definition</div>
  //      <ul class="yozora-footnote-definition__main">
  //        <li id=bravo class="yozora-footnote-definition__item">
  //          <p class="yozora-footnote-definition__item-title yozora-paragraph">
  //            <a href=#reference-bravo>&uarr;</a>
  //              <span>Bravo</span>
  //          </p>
  //          <div class="yozora-footnote-definition__item-content">
  //            <span class="yozora-text">bravo and charlie.</span>
  //          </div>
  //        </li>
  //      </ul>
  //    </div>

Related

• @yozora/ast
• @yozora/react-markdown
• @yozora/react-footnote-definition
• @yozora/tokenizer-footnote
• @yozora/tokenizer-footnote-reference
• @yozora/tokenizer-footnote-definitions
• Break | Mdast