@yozora/html-heading
v2.0.0-alpha.2
Published
render Yozora Markdown AST node `IHeading` into HTML string
Downloads
9
Maintainers
Readme
This component is for rendering the Yozora Markdown AST node IHeading
produced by @yozora/tokenizer-heading into HTML string.
This component has been built into [@yozora/html-markdown][], you can use it directly.
Install
npm
npm install --save @yozora/html-heading
yarn
yarn add @yozora/html-heading
Usage
Basic:
import type { IHeading, IYastNode } from '@yozora/ast' import renderHeading from '@yozora/html-heading' // The implementation of the following function has been omitted. const renderChildren: (nodes: IYastNode[]) => string = function () {} const heading = { "type": "heading", "depth": 1, "children": [ { "type": "text", "value": "yozora is cool!" } ] } renderHeading(heading as IHeading, renderChildren) // => <h1 className="yozora-heading"><p className="yozora-heading__content"><span class="yozora-text">yozora is cool!</span></p></h1>
With identifier:
import type { IEmphasis, IHeading, IStrong, IText, IYastNode } from '@yozora/ast' import { HeadingType } from '@yozora/ast' import renderHeading from '@yozora/html-heading' // The implementation of the following function has been omitted. const renderChildren: (nodes: IYastNode[]) => string = function () {} const heading: IHeading = { type: HeadingType, depth: 1, children: [ { type: EmphasisType, children: [ { type: TextType, value: 'Hello', } as IText, ], } as IEmphasis, { type: TextType, value: ', ', } as IText, { type: StrongType, children: [ { type: TextType, value: 'World', } as IText, ], } as IStrong, ], } renderHeading(heading, renderChildren) // => <h6 id="waw" className="yozora-heading yozora-heading--toc"><p className="yozora-heading__content"><em class="yozora-emphasis"><span class="yozora-text">Hello</span></em><span class="yozora-text">, </span><strong class="yozora-strong"><span class="yozora-text">World</span></strong></p><a className="yozora-heading__anchor" href="#waw">¶</a></h6>