b-html
v0.9.0 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
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
- 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.