An easy HTML syntax sugar
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
test
.gitignore
CHANGELOG.md
LICENSE
README.md
gulpfile.coffee
index.js
package.json

README.md

b-html

An easy HTML syntax sugar.

Concepts:

Try b-html (real-time preview demo)

Twitter hashtag is #bhtml.

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

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

License

MIT

Author

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