@yozora/html-paragraph/README.md

render Yozora Markdown AST node `IParagraph` into HTML string

<header>
  <h1 align="center">
    <a href="https://github.com/guanghechen/yozora-html/tree/main/packages/paragraph#readme">@yozora/html-paragraph</a>
  </h1>
  <div align="center">
    <a href="https://www.npmjs.com/package/@yozora/html-paragraph">
      <img
        alt="Npm Version"
        src="https://img.shields.io/npm/v/@yozora/html-paragraph.svg"
      />
    </a>
    <a href="https://www.npmjs.com/package/@yozora/html-paragraph">
      <img
        alt="Npm Download"
        src="https://img.shields.io/npm/dm/@yozora/html-paragraph.svg"
      />
    </a>
    <a href="https://www.npmjs.com/package/@yozora/html-paragraph">
      <img
        alt="Npm License"
        src="https://img.shields.io/npm/l/@yozora/html-paragraph.svg"
      />
    </a>
    <a href="#install">
      <img
        alt="Module formats: cjs, esm"
        src="https://img.shields.io/badge/module_formats-cjs%2C%20esm-green.svg"
      />
    </a>
    <a href="https://github.com/nodejs/node">
      <img
        alt="Node.js Version"
        src="https://img.shields.io/node/v/@yozora/html-paragraph"
      />
    </a>
    <a href="https://github.com/facebook/jest">
      <img
        alt="Tested with Jest"
        src="https://img.shields.io/badge/tested_with-jest-9c465e.svg"
      />
    </a>
    <a href="https://github.com/prettier/prettier">
      <img
        alt="Code Style: prettier"
        src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square"
      />
    </a>
  </div>
</header>
<br/>

This component is for rendering the Yozora Markdown AST node [`IParagraph`][@yozora/ast] 
produced by [@yozora/tokenizer-paragraph][] into HTML string.

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

## Install

* npm

  ```bash
  npm install --save @yozora/html-paragraph
  ```

* yarn

  ```bash
  yarn add @yozora/html-paragraph
  ```


## Usage

* Basic:

  ```typescript
  import type { IParagraph, IYastNode } from '@yozora/ast'
  import renderParagraph from '@yozora/html-paragraph'

  // The implementation of the following function has been omitted.
  const renderChildren: (nodes: IYastNode[]) => string = function () {}

  const paragraph = {
    "type": "paragraph",
    "children": [
      {
        "type": "text",
        "value": "yozora is cool!"
      }
    ]
  }
  renderParagraph(paragraph as IParagraph, renderChildren)
  // => <p class="yozora-paragraph"><span class="yozora-text">yozora is cool!</span></p>
  ```

## Related

* [@yozora/ast][]
* [@yozora/react-markdown][]
* [@yozora/react-paragraph][]
* [@yozora/tokenizer-paragraph][]
* [Paragraph | Mdast][mdast]


[@yozora/ast]: https://www.npmjs.com/package/@yozora/ast#paragraph
[@yozora/react-markdown]: https://www.npmjs.com/package/@yozora/react-markdown
[@yozora/tokenizer-paragraph]: https://www.npmjs.com/package/@yozora/tokenizer-paragraph
[@yozora/react-paragraph]: https://www.npmjs.com/package/@yozora/react-paragraph
[mdast]: https://github.com/syntax-tree/mdast#paragraph