Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

generate HTML (or XML) using CSS-like selectors in erlang

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 examples
Octocat-spinner-32 src
Octocat-spinner-32 test
Octocat-spinner-32 .gitignore
Octocat-spinner-32 README.rest
Octocat-spinner-32 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>
Something went wrong with that request. Please try again.