❤Nosferatu's Pace Maker

    npm

    Sign UpSign In

    b-html

    0.9.0 • Public • Published

    b-html

    An easy HTML syntax sugar.

    Concepts:

    Try b-html (real-time preview demo)

    Simple Example

    index.bhtml (b-html) :

    <!doctype html
    <html
      <head
        </meta
          @charset UTF-8
        <title
          b-html example
      <body
        <!--comment example
        <p
          Hello, b-html!
          <a
            @href https://github.com/bouzuya
            >@bouzuya

    index.html (compiled b-html && formatted for demo) :

    <!DOCTYPE html>
    <html>
      <head>
        <meta
          charset="utf-8"
          />
        <title>
          b-html example
        </title>
      </head>
      <body>
        <!--comment eample-->
        <p>
          Hello, b-html!
          <a
            href="https://github.com/bouzuya"
            >
            @bouzuya
          </a>
        </p>
      </body>
    </html>

    Try b-html (real-time preview demo)

    Installation

    $ npm install b-html

    See also: #api

    with CLI

    $ npm install -g b-html-cli

    See also: b-html/b-html-cli

    with gulp

    $ npm install gulp-b-html

    See also: b-html/gulp-b-html

    with browserify

    $ npm install b-htmlify

    See also: b-html/b-htmlify

    Syntax Reference

    indent (spaces) + prefix + content

    Prefix Type Parent Child Examples
    < 'element' MAY MAY <p -> <p></p>
    </ 'empty element' MAY MUST NOT </img -> <img />
    <!-- 'comment' MAY MUST NOT <--xyz -> <!--xyz-->
    <!doctype html 'doctype' MAY MUST NOT <!doctype html -> <!DOCTYPE html>
    See: #doctypes
    @ 'attribute' MUST MUST NOT @class foo -> class="foo"
    > 'text' MAY MUST NOT >text -> text
    ><text -> <text
    >@text -> @text
    >>text -> >text
    >|text -> |text
    | 'new line text' MAY MUST NOT |text -> <NL>text
    |<text -> <NL><text
    |@text -> <NL>@text
    |>text -> <NL>>text
    ||text -> <NL>|text
    (others) 'text' (default) MAY MUST NOT text -> text

    Try b-html (real-time preview demo)

    Doctypes

    • <!doctype html -> (HTML 5)
    • <!doctype html 5 -> (HTML 5)
    • <!doctype html 4.01 strict -> (HTML 4.01 Strict)
    • <!doctype html 4.01 transitional -> (HTML 4.01 Transitional)
    • <!doctype html 4.01 frameset -> (HTML 4.01 Frameset)
    • <!doctype html strict -> (HTML 4.01 Strict)
    • <!doctype html transitional -> (HTML 4.01 Transitional)
    • <!doctype html frameset -> (HTML 4.01 Frameset)
    • <!doctype xhtml 1.0 strict -> (XHTML 1.0 Strict)
    • <!doctype xhtml 1.0 transitional -> (XHTML 1.0 Transitional)
    • <!doctype xhtml 1.0 frameset -> (XHTML 1.0 Frameset)
    • <!doctype xhtml strict -> (HTML 1.0 Strict)
    • <!doctype xhtml transitional -> (HTML 1.0 Transitional)
    • <!doctype xhtml frameset -> (HTML 1.0 Frameset)
    • <!doctype xhtml 1.1 -> (XHTML 1.1)
    • <!doctype xhtml basic -> (XHTML Basic 1.1)
    • <!doctype xhtml basic 1.0 -> (XHTML Basic 1.0)
    • <!doctype xhtml basic 1.1 -> (XHTML Basic 1.1)
    • <!doctype xhtml mobile -> (XHTML Mobile 1.2)
    • <!doctype xhtml mobile 1.0 -> (XHTML Mobile 1.0)
    • <!doctype xhtml mobile 1.1 -> (XHTML Mobile 1.1)
    • <!doctype xhtml mobile 1.2 -> (XHTML Mobile 1.2)
    • <!doctype html PUBLIC ... ->

    API

    signature

    • bHtml(source: string): string
    • bHtml(source: string, options: { format: any }): any

    params:

    • source ... b-html source string.
    • options.format ... formatter function. see also: #formatter signature

    See the following examples.

    no options

    import assert from 'assert';
    import bHtml from 'b-html';
     
    assert(bHtml('<p') === '<p></p>');

    with format option

    import assert from 'assert';
    import bHtml from 'b-html';
     
    let source = '<p';
    let options = {
      format(nodes, options) {
        assert(nodes[0].type === 'element');
        assert(nodes[0].name === 'p');
        assert.deepEqual(nodes[0].attributes, []);
        assert.deepEqual(nodes[0].children, []);
        assert.deepEqual(options, { format });
        let n = nodes[0];
        return `<${n.name}>My formatter!</${n.name}>`;
      }
    };
    assert(bHtml(source, options) === '<p>My formatter!</p>');

    formatter signature

    format(nodes: Array<Node>, options: {}): any

    • Node
      • type: string
    • Element extends Node
      • (type === 'element')
      • name: string
      • attributes: Array
      • children: Array
    • EmptyElement extends Node
      • (type === 'empty element')
      • name: string
      • attributes: Array
      • children: Array
    • Comment extends Node
      • (type === 'comment')
      • value: string
    • Doctype extends Node
      • (type === 'doctype')
      • value: string
    • Attribute extends Node
      • (type === 'attribute')
      • name: string
      • value: string
    • Text: string
      • (type === 'text')
      • value: string
    • NewLineText
      • (type === 'new line text')
      • value: string

    Related Projects

    Badges

    Circle CI Join the chat at https://gitter.im/b-html/b-html

    License

    MIT

    Author

    bouzuya <m@bouzuya.net> (http://bouzuya.net)

    Tip: Click on a version number to view a previous version's package page

    Current Tags

    • Version
      Downloads (Last 7 Days)
      • Tag
    • 0.9.0
      3
      • latest

    Version History

    Install

    npm i b-html

    Repository

    Gitgithub.com/b-html/b-html

    Homepage

    github.com/b-html/b-html#readme

    DownloadsWeekly Downloads

    3

    Version

    0.9.0

    License

    MIT

    Last publish

    Collaborators

    • bouzuya
    Try on RunKit
    Report malware