generate HTML (or XML) using CSS-like selectors in erlang
Erlang
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
examples
src
test
.gitignore
README.rest
rebar

README.rest

emel - generate HTML with CSS-like selectors

emel is an erlang module that allows to generate complex HTML (or XML) using a syntax that is similar to CSS selectors.

emel is inspired by zen-coding: https://code.google.com/p/zen-coding/

get it

git clone https://github.com/marianoguerra/emel

build it

cd emel
./rebar compile

test it

./rebar eunit

use it

1> emel:gen("span[type=\"text\"]#asd.foo.bar.baz").
{ok,"<span id=\"asd\" class=\"foo bar baz\" type=\"text\"/>"}

2> {ok, S} = emel:gen("span[type=\"text\"]#asd.foo.bar.baz").
{ok,"<span id=\"asd\" class=\"foo bar baz\" type=\"text\"/>"}

3> io:format("~s~n", [S]).
<span id="asd" class="foo bar baz" type="text"/>
ok

try it interactively

run the following command:

erl -run emel shell -run init stop -noshell -pa ebin

play with an interactive console:

emel console Ctrl + d to exit

>>> p
{ok,[{node,1,p,[],[],[]}],[]}

<p/>

>>> p{hi}
{ok,[{node,1,p,[],[],"hi"}],[]}

<p>hi</p>

>>> li*3
{ok,[{times,1,{node,1,li,[],[],[]},3}],[]}

<li/><li/><li/>

author

Mariano Guerra

license

BSD (+ optional beer to the author)

examples

input:

p

output:

<p/>

input:

p#id

output:

<p id="id"/>

input:

p.class

output:

<p class="class"/>

input:

p#id.class

output:

<p id="id" class="class"/>

input:

p#foo.bar.baz

output:

<p id="foo" class="bar baz"/>

input:

p#id-$ * 3

output:

<p id="id-1"/><p id="id-2"/><p id="id-3"/>

input:

{hello}

output:

hello

input:

p{hello}

output:

<p>hello</p>

input:

h1#title.important {hi}

output:

<h1 id="title" class="important">hi</h1>

input:

ul > li * 3

output:

<ul><li/><li/><li/></ul>

input:

ul.list > li#item-$.list-item * 3

output:

<ul class="list"><li id="item-1" class="list-item"/><li id="item-2" class="list-item"/><li id="item-3" class="list-item"/></ul>

input:

.username > (span.first-name{Mariano} + { } + span.last-name{Guerra})

output:

<div class="username"><span class="first-name">Mariano</span> <span class="last-name">Guerra</span></div>

input:

p * 3 > a{asd}

output:

<p><a>asd</a></p><p><a>asd</a></p><p><a>asd</a></p>

input:

p > ({Click } + a{here} + { to continue})

output:

<p>Click <a>here</a> to continue</p>