TxtAST to HTML string.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src fix: remove console.log Jan 8, 2018
test feat: add own source Jan 8, 2018
.gitignore test: add toHTML testing Jan 7, 2018
.travis.yml test: add toHTML testing Jan 7, 2018
LICENSE feat: add option Jan 7, 2018
README.md feat: add own source Jan 8, 2018
package.json 1.0.4 Jan 8, 2018
tsconfig.json feat: add option Jan 7, 2018
yarn.lock test: add toHTML testing Jan 7, 2018

README.md

@textlint/txtast-to-html

TxtAST to HTML string.

This HTML string aim to be used as Custom Elements.

Install

Install with npm:

npm install @textlint/txtast-to-html

Usage

import { toHTML } from "@textlint/txtast-to-html";
const { parse } = require("markdown-to-ast");
const txtAST = parse(`# Title

text [link](http://example.com).

- list1
- list2

`);
const HTMLString = toHTML(txtAST);
/*
<txtast-document data-metadata="{&quot;loc&quot;:{&quot;start&quot;:{&quot;line&quot;:1,&quot;column&quot;:0},&quot;end&quot;:{&quot;line&quot;:8,&quot;column&quot;:0}},&quot;range&quot;:[0,68]}"><txtast-header data-metadata="{&quot;depth&quot;:1,&quot;loc&quot;:{&quot;start&quot;:{&quot;line&quot;:1,&quot;column&quot;:0},&quot;end&quot;:{&quot;line&quot;:1,&quot;column&quot;:7}},&quot;range&quot;:[0,7]}"># <txtast-str data-metadata="{&quot;value&quot;:&quot;Title&quot;,&quot;loc&quot;:{&quot;start&quot;:{&quot;line&quot;:1,&quot;column&quot;:2},&quot;end&quot;:{&quot;line&quot;:1,&quot;column&quot;:7}},&quot;range&quot;:[2,7]}">Title</txtast-str></txtast-header><txtast-paragraph data-metadata="{&quot;loc&quot;:{&quot;start&quot;:{&quot;line&quot;:3,&quot;column&quot;:0},&quot;end&quot;:{&quot;line&quot;:3,&quot;column&quot;:32}},&quot;range&quot;:[17,49]}"><txtast-str data-metadata="{&quot;value&quot;:&quot;text &quot;,&quot;loc&quot;:{&quot;start&quot;:{&quot;line&quot;:3,&quot;column&quot;:0},&quot;end&quot;:{&quot;line&quot;:3,&quot;column&quot;:5}},&quot;range&quot;:[17,22]}">text </txtast-str><txtast-link data-metadata="{&quot;title&quot;:null,&quot;url&quot;:&quot;http://example.com&quot;,&quot;loc&quot;:{&quot;start&quot;:{&quot;line&quot;:3,&quot;column&quot;:5},&quot;end&quot;:{&quot;line&quot;:3,&quot;column&quot;:31}},&quot;range&quot;:[22,48]}">[<txtast-str data-metadata="{&quot;value&quot;:&quot;link&quot;,&quot;loc&quot;:{&quot;start&quot;:{&quot;line&quot;:3,&quot;column&quot;:6},&quot;end&quot;:{&quot;line&quot;:3,&quot;column&quot;:10}},&quot;range&quot;:[23,27]}">link</txtast-str>](http://example.com)</txtast-link><txtast-str data-metadata="{&quot;value&quot;:&quot;.&quot;,&quot;loc&quot;:{&quot;start&quot;:{&quot;line&quot;:3,&quot;column&quot;:31},&quot;end&quot;:{&quot;line&quot;:3,&quot;column&quot;:32}},&quot;range&quot;:[48,49]}">.</txtast-str></txtast-paragraph><txtast-list data-metadata="{&quot;ordered&quot;:false,&quot;start&quot;:null,&quot;loose&quot;:false,&quot;loc&quot;:{&quot;start&quot;:{&quot;line&quot;:5,&quot;column&quot;:0},&quot;end&quot;:{&quot;line&quot;:6,&quot;column&quot;:7}},&quot;range&quot;:[51,66]}"><txtast-listitem data-metadata="{&quot;loose&quot;:false,&quot;checked&quot;:null,&quot;loc&quot;:{&quot;start&quot;:{&quot;line&quot;:5,&quot;column&quot;:0},&quot;end&quot;:{&quot;line&quot;:5,&quot;column&quot;:7}},&quot;range&quot;:[51,58]}">- <txtast-paragraph data-metadata="{&quot;loc&quot;:{&quot;start&quot;:{&quot;line&quot;:5,&quot;column&quot;:2},&quot;end&quot;:{&quot;line&quot;:5,&quot;column&quot;:7}},&quot;range&quot;:[53,58]}"><txtast-str data-metadata="{&quot;value&quot;:&quot;list1&quot;,&quot;loc&quot;:{&quot;start&quot;:{&quot;line&quot;:5,&quot;column&quot;:2},&quot;end&quot;:{&quot;line&quot;:5,&quot;column&quot;:7}},&quot;range&quot;:[53,58]}">list1</txtast-str></txtast-paragraph></txtast-listitem><txtast-listitem data-metadata="{&quot;loose&quot;:false,&quot;checked&quot;:null,&quot;loc&quot;:{&quot;start&quot;:{&quot;line&quot;:6,&quot;column&quot;:0},&quot;end&quot;:{&quot;line&quot;:6,&quot;column&quot;:7}},&quot;range&quot;:[59,66]}">- <txtast-paragraph data-metadata="{&quot;loc&quot;:{&quot;start&quot;:{&quot;line&quot;:6,&quot;column&quot;:2},&quot;end&quot;:{&quot;line&quot;:6,&quot;column&quot;:7}},&quot;range&quot;:[61,66]}"><txtast-str data-metadata="{&quot;value&quot;:&quot;list2&quot;,&quot;loc&quot;:{&quot;start&quot;:{&quot;line&quot;:6,&quot;column&quot;:2},&quot;end&quot;:{&quot;line&quot;:6,&quot;column&quot;:7}},&quot;range&quot;:[61,66]}">list2</txtast-str></txtast-paragraph></txtast-listitem></txtast-list>

</txtast-document>
*/

Simplify output:

<txtast-document>
    <txtast-header>#
        <txtast-str>Title</txtast-str>
    </txtast-header>
    <txtast-paragraph>
        <txtast-str>text</txtast-str>
        <txtast-link>[
            <txtast-str>link</txtast-str>
            ](http://example.com)
        </txtast-link>
        <txtast-str>.</txtast-str>
    </txtast-paragraph>
    <txtast-list>
        <txtast-listitem>-
            <txtast-paragraph>
                <txtast-str>list1</txtast-str>
            </txtast-paragraph>
        </txtast-listitem>
        <txtast-listitem>-
            <txtast-paragraph>
                <txtast-str>list2</txtast-str>
            </txtast-paragraph>
        </txtast-listitem>
    </txtast-list>

</txtast-document>

Changelog

See Releases page.

Running tests

Install devDependencies and Run npm test:

npm i -d && npm test

Contributing

Pull requests and stars are always welcome.

For bugs and feature requests, please create an issue.

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

Author

License

MIT © azu