B-html NPM | npm.io

An easy HTML syntax sugar.

Concepts:

It's just HTML (like a CoffeeScript)
Off-side rule
Simple syntax

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

with CLI

$ npm install -g b-html-cli

with gulp

$ npm install gulp-b-html

with browserify

$ npm install b-htmlify

Syntax Reference

indent (spaces) + prefix + content

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