@yozora/html-heading

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>

Related

• @yozora/ast
• @yozora/react-markdown
• @yozora/react-heading
• @yozora/tokenizer-heading
• Heading | Mdast