❤
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)

Dependencies (0)

    Dev Dependencies (11)

    Package Sidebar

    Install

    npm i b-html

    Repository

    github.com/b-html/b-html

    Homepage

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

    Weekly Downloads

    10

    Version

    0.9.0

    License

    MIT

    Last publish

    Collaborators

    • bouzuya
    Try on RunKit
    Report malware