A command line tool to expand HTML code from very sintetic string (similar to Emmet - http://www.emmet.io/)
Emmet (http://www.emmet.io/) is distributed as an editor plugin. This is convenient, but on some systems is easier to use a command line tool, indipendent from the installed text editor.
In addition I wanted to see if it was possible to write the tool using only yacc/lex and gcc. Apparently I was able to code the essential features of Emmet using ~250 lines of code. A not so bad result considering that the Sublime Text version of Emmet is ~800 lines of code and the Emacs version is ~4000 lines of code.
Clearly I do not have a text editor to interface with, so it was a little easier for me to write a short program. Nevertheless the tool works, and it was a very good first project to learn yacc.
The syntax is a little different from Emmet. An example that (hopefully) illustrate most of it is the following (many spaces can be omitted, I added them for clarity):
.header > h1 { Title } < 2 * #holder > 3 * p { paragraph text } < .footer > a$href="index.php$name=foo"
The expanded HTML code is the following:
<div class="header">
<h1>Title</h1>
</div>
<div id="holder">
<p>paragraph text</p>
<p>paragraph text</p>
<p>paragraph text</p>
</div>
<div id="holder">
<p>paragraph text</p>
<p>paragraph text</p>
<p>paragraph text</p>
</div>
<div class="footer">
<a href="index.php" name="foo"></a>
</div>The emmet syntax is cleaner at the moment, but I plan to improve the tool in the future.
The main differences with emmet are:
- we use '>' instead of '^' to go up a level
- we use spaces instead of '+' to place tags on the same level
- we use '$attr1=value$attr2=value2$...' instead of '[attr1="value1" attr2="value2" ...]'
- to repeat a block several times we use a prefix 'num * block', instead of a suffix 'block * num'
To see what you miss using this tool see the emmet syntax documentation: http://docs.emmet.io/abbreviations/syntax/