guanghechen
@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-definitionyarn
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>↑</a> // <span>Bravo</span> // </p> // <div class="yozora-footnote-definition__item-content"> // <span class="yozora-text">bravo and charlie.</span> // </div> // </li> // </ul> // </div>