Have ideas to improve npm?Join in the discussion! »

    @textlint/txtast-to-html
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.4 • Public • Published

    @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

    Install

    npm i @textlint/txtast-to-html

    DownloadsWeekly Downloads

    1

    Version

    1.0.4

    License

    MIT

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar