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)
Twitter hashtag is #bhtml.
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)
$ npm install b-html
See also: #api
$ npm install -g b-html-cli
See also: b-html/b-html-cli
$ npm install gulp-b-html
See also: b-html/gulp-b-html
$ npm install b-htmlify
See also: b-html/b-htmlify
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)
<!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 ...->
bHtml(source: string): stringbHtml(source: string, options: { format: any }): any
params:
- source ... b-html source string.
- options.format ... formatter function. see also: #formatter signature
See the following examples.
import assert from 'assert';
import bHtml from 'b-html';
assert(bHtml('<p') === '<p></p>');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>');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
- 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.