b-html

v0.9.0

Published

4 years ago

An easy HTML syntax sugar

Downloads

0High
0Medium
0Low

bouzuya

HTML b-html

An easy HTML syntax sugar.

Concepts:

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

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

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

Related Projects

b-html/b-html-cli ... A CLI for b-html (b-html <-> HTML converter).
b-html/gulp-b-html ... A gulp plugin for b-html.
b-html/b-htmlify ... A browserify transform for b-html.
b-html/b-html-demo ... A demo for b-html.
zakuro9715/vim-b-html ... b-html syntaxt highlighting for vim.
b-html/atom-language-b-html ... b-html support in Atom.
b-html/b-html-logo ... A logo for b-html.
b-html/html2bhtml ... HTML to b-html converter.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Simple Example

Installation

with CLI

with gulp

with browserify

Syntax Reference

Doctypes

API

signature

no options

with format option

formatter signature

Related Projects

Badges

License

Author

with `format` option