@yozora/html-list
v2.0.0-alpha.2
Published
render Yozora Markdown AST node `IList` and `IListItem` into HTML string
Downloads
11
Readme
This component is for rendering the Yozora Markdown AST node [IList
][@yozora/ast__list]
produced by @yozora/tokenizer-list and [IListItem
][@yozora/ast__list-item]
produced by @yozora/tokenizer-list-item into HTML string.
This component has been built into [@yozora/html-markdown][], you can use it directly.
Install
npm
npm install --save @yozora/html-list
yarn
yarn add @yozora/html-list
Usage
Basic:
import type { IList, IYastNode } from '@yozora/ast' import renderList from '@yozora/html-list' // The implementation of the following function has been omitted. const renderChildren: (nodes: IYastNode[]) => string = function () {} const list = { "type": "list", "ordered": false, "marker": 45, "spread": true, "children": [ { "type": "listItem", "children": [ { "type": "paragraph", "children": [{ "type": "text", "value": "a" }] } ] }, { "type": "listItem", "children": [ { "type": "paragraph", "children": [{ "type": "text", "value": "b" }] } ] } ] } renderList(list as IList, renderChildren) // => <ul class="yozora-list"><li class="yozora-list-item"><p class="yozora-paragraph"><span class="yozora-text">a</span></p></li><li class="yozora-list-item"><p class="yozora-paragraph"><span class="yozora-text">b</span></p></li></ul>
List with task items:
import type { IList, IYastNode } from '@yozora/ast' import renderList from '@yozora/html-list' // The implementation of the following function has been omitted. const renderChildren: (nodes: IYastNode[]) => string = function () {} const list = { "type": "list", "ordered": false, "marker": 45, "spread": false, "children": [ { "type": "listItem", "status": "todo", "children": [{ "type": "text", "value": "foo" }] }, { "type": "listItem", "status": "done", "children": [{ "type": "text", "value": "bar" }] } ] } renderList(list as IList, renderChildren) // => <ul class="yozora-list"><li class="yozora-list-item"><input disabled="" type="checkbox" /> <span class="yozora-text">foo</span></li><li class="yozora-list-item"><input checked="" disabled="" type="checkbox" /> <span class="yozora-text">bar</span></li></ul>
Ordered list:
import type { IList, IYastNode } from '@yozora/ast' import renderList from '@yozora/html-list' // The implementation of the following function has been omitted. const renderChildren: (nodes: IYastNode[]) => string = function () {} const list = { "type": "list", "ordered": true, "start": 1, "marker": 46, "spread": false, "children": [ { "type": "listItem", "children": [{ "type": "text", "value": "a" }] }, { "type": "listItem", "children": [{ "type": "text", "value": "b" }] }, { "type": "listItem", "children": [{ "type": "text", "value": "c" }] } ] } renderList(list as IList, renderChildren) // => <ol class="yozora-list" start="1"><li class="yozora-list-item"><span class="yozora-text">a</span></li><li class="yozora-list-item"><span class="yozora-text">b</span></li><li class="yozora-list-item"><span class="yozora-text">c</span></li></ol>