O ZenCoding permite escrever código html de forma rápida, criando várias linhas de código, com tags html, digitando apenas alguns comandos chave.
O Sparkup é uma ferramenta escrita em python que é semelhante ao ZenCoding e trás algumas melhorias, como poder retornar ao elemento pai com o comando <.
Para instalar, utilizei o sistema operacional Debian 7.
Acesse o endereço
https://github.com/rstacruz/sparkup
Para quem tem o git instalado, digite o comando abaixo:
git clone https://github.com/rstacruz/sparkup.git
Quem não tem, baixe o arquivo zip e descompacte com o unzip.
Feito isso, acesse a pasta sparkup e digite os comandos abaixo:
cp sparkup.py ~/.vim/
cd vim
cp -R ftplugin ~/.vim/
O próximo passo é configurar o editor vim para aceitar o plugin do sparkup
Acesse o arquivo de configuração do editor vim através do comando
vim /etc/vim/vimrc
Encontre e descomente as linhas abaixo, apagando as aspas do começo de cada linha, se houver
" if has("autocmd")
" filetype plugin indent on
" end if
Salve o arquivo
O sparkup está instalado e configurado e já pode ser utilizado.
Para testar, digite html5 no modo de inserção e aperte as teclas CTRL+e
Será gerada a saída abaixo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
No endereço abaixo há uma lista com alguns comandos úteis que podem ser utilizados no dia a dia:
http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn
Abaixo alguns comando que tirei do próprio arquivo sparkup.py e que pode ser consultado no endereço:
https://github.com/rstacruz/sparkup/blob/master/sparkup.py#L268
|
| cc:ie | | | | |
| Saída: <!--[if IE]> |
| <![endif]--> | | |
| cc:ie8 |
| Saída: <!--[if lte IE 8]> |
| <![endif]--> |
| cc:ie9 |
| Saída: <!--[if lte IE 9]> |
| <![endif]--> |
| cc:noie |
| Saída: <!--[if !IE]><!--> |
| <!--<![endif]--> |
| php:t |
| Saída: |
| <?php |
| ?> |
|
| html:4t |
| Saída: |
|
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| <html lang="en"> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> |
| <title></title> |
| </head> |
| <body> |
|
| </body> |
| </html> |
| html:4s |
| Saída: |
|
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| <html lang="en"> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> |
| <title></title> |
| </head> |
| <body> |
|
| </body> |
| </html> |
| html:xt |
| Saída: |
|
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> |
| <title></title> |
| </head> |
| <body> |
|
| </body> |
| </html> |
| html:xs |
| Saída: |
|
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> |
| <title></title> |
| </head> |
| <body> |
|
| </body> |
| </html> |
| html:xxs |
| Saída: |
|
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> |
| <title></title> |
| </head> |
| <body> |
|
| </body> |
| </html> |
| html:5 |
| Saída: |
|
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title></title> |
| </head> |
| <body> |
|
| </body> |
| </html> |
| input:button |
|
|
|
| input:password |
|
|
|
| input:radio |
|
|
|
| input:checkbox |
|
|
|
| input:file |
|
|
|
| input:text |
|
|
|
| input:submit |
|
|
|
| input:hidden |
|
|
|
| script:src |
|
|
|
| script:jquery |
|
|
|
| script:jquery2 |
|
|
|
| script:jsapi |
|
|
|
| script:jsapix |
|
|
|
| link:css |
|
|
|
| link:print |
|
|
|
| link:favicon |
|
|
|
| link:touch |
|
|
|
| link:rss |
|
|
|
| link:atom |
|
|
|
| meta:ieedge |
|
|
|
| form:get |
|
|
|
| form:g |
|
|
|
| form:post |
|
|
|
| form:p |
|
|
|
|
| Sinônimos: |
| 'php': 'php:t', |
| 'checkbox': 'input:checkbox', |
| 'check': 'input:checkbox', |
| 'input:c': 'input:checkbox', |
| 'input:b': 'input:button', |
| 'input:h': 'input:hidden', |
| 'hidden': 'input:hidden', |
| 'submit': 'input:submit', |
| 'input:s': 'input:submit', |
| 'radio': 'input:radio', |
| 'input:r': 'input:radio', |
| 'text': 'input:text', |
| 'pass': 'input:password', |
| 'passwd': 'input:password', |
| 'password': 'input:password', |
| 'pw': 'input:password', |
| 'input': 'input:text', |
| 'input:t': 'input:text', |
| 'linkcss': 'link:css', |
| 'scriptsrc': 'script:src', |
| 'jquery': 'script:jquery', |
| 'jsapi': 'script:jsapi', |
| 'html5': 'html:5', |
| 'html4': 'html:4s', |
| 'html4s': 'html:4s', |
| 'html4t': 'html:4t', |
| 'xhtml': 'html:xxs', |
| 'xhtmlt': 'html:xt', |
| 'xhtmls': 'html:xs', |
| 'xhtml11': 'html:xxs', |
| 'opt': 'option', |
| 'st': 'strong', |
| 'css': 'style', |
| 'csss': 'link:css', |
| 'css:src': 'link:css', |
| 'csssrc': 'link:css', |
| 'js': 'script', |
| 'jss': 'script:src', |
| 'js:src': 'script:src', |
| 'jssrc': 'script:src', |
|
