Emmet: Converter HTML em abreviatura

Criado em 13 out. 2012  ·  25Comentários  ·  Fonte: emmetio/emmet

Crie um conversor que analisará o bloco HTML e o converterá em expressão (contador- “Expandir abreviação”).

Quer apoiar este problema? Publique uma recompensa por isso! Aceitamos recompensas via Bountysource .

Enhancement

Comentários muito úteis

Enviei um e-mail para o (s) criador (es), mas estou postando novamente aqui, apenas para votar a favor da solicitação:


Oi,

Em primeiro lugar, obrigado pelo seu ótimo trabalho, você fez um ótimo trabalho, eu realmente admiro o resultado.

Uma ideia que tive sobre o seu programa:

É possível fazer 'codificação reversa'?

ou seja, pegue o

<div id="container">
    <div class="header"></div>
    <div class="body">
        <div class="title">Title</div>
        <div class="text">Text</div>
    </div>
    <div class="footer"></div>
</div>

e transformá-lo em

container> .header + .body> .title {Title} +. text {Text} ^. footer

??

Por quê? bem, em primeiro lugar, é mais fácil trabalhar com o segundo código e depois voltar ao normal. E, mais importante, se possível usar um javascript do lado do cliente - ou mesmo um código do lado do servidor por voluntários para escrever, _diretamente_, em páginas de código HTML emmet.

Pense no impacto que isso causaria.

Bem, é apenas uma ideia :)

Obrigado novamente,

Divirta-se,
Giannis,
Atenas, Grécia, Europa, Mundo.


Então, é isso, aprovando a ideia: +1: e esperando ver isso feito :)

Todos 25 comentários

Enviei um e-mail para o (s) criador (es), mas estou postando novamente aqui, apenas para votar a favor da solicitação:


Oi,

Em primeiro lugar, obrigado pelo seu ótimo trabalho, você fez um ótimo trabalho, eu realmente admiro o resultado.

Uma ideia que tive sobre o seu programa:

É possível fazer 'codificação reversa'?

ou seja, pegue o

<div id="container">
    <div class="header"></div>
    <div class="body">
        <div class="title">Title</div>
        <div class="text">Text</div>
    </div>
    <div class="footer"></div>
</div>

e transformá-lo em

container> .header + .body> .title {Title} +. text {Text} ^. footer

??

Por quê? bem, em primeiro lugar, é mais fácil trabalhar com o segundo código e depois voltar ao normal. E, mais importante, se possível usar um javascript do lado do cliente - ou mesmo um código do lado do servidor por voluntários para escrever, _diretamente_, em páginas de código HTML emmet.

Pense no impacto que isso causaria.

Bem, é apenas uma ideia :)

Obrigado novamente,

Divirta-se,
Giannis,
Atenas, Grécia, Europa, Mundo.


Então, é isso, aprovando a ideia: +1: e esperando ver isso feito :)

Tenha meu voto positivo! Imagine se pudéssemos codificar as páginas em HTML, traduzi-lo para emmet e, em seguida, escrever o código php que inclui o código emmet que é expandido para HTML dinamicamente.

: hand: Meu drive-by dois centavos:

@ icb931023 Primeiro, achei que o que você disse parecia legal, mas, sério, qual seria o benefício? Seu PHP terá que lidar com uma string mais curta representando seu HTML, mas então terá que trabalhar mais com ela.

Eu acho que não teria que se preocupar tanto com erros de digitação (como uma barra ausente em uma tag de fechamento, por exemplo), uma vez que todas as tags serão geradas para você, mas você está trabalhando com HTML expandido, suponho (embora começando com o sintaxe concisa), portanto, não tenho certeza se esse é um argumento forte para isso. Ou talvez eu esteja errado em supor que você não trabalharia inteiramente na sintaxe concisa / reduzida.

Eu quero querer isso. Simplesmente não consigo ver um caso de uso convincente. Não é tão obviamente benéfico quanto o pré-processamento de CSS, por exemplo.

Seria uma história diferente se os navegadores / motores de modelagem entendessem a sintaxe Emmet. Isso seria interessante!

Mmm, é bastante interessante criar uma biblioteca JS para traduzi-la;)

Aqui está um ponto de partida da perspectiva do cliente; Bigode de Emmet . Sinta-se à vontade para contribuir.

@vabatta :)

alguma atualização?

Adoraria isso também. Eu uso uma página de guia de estilo onde armazeno todos os meus elementos, para gerenciar isso eu tenho um arquivo JSON gigante usando strings Emmet para representar os elementos e criei uma ferramenta JavaScript para cuspi-los em uma página. Mas agora eu tenho que convertê-los todos manualmente para manter este arquivo atualizado sempre que algo novo é criado. Adoraria uma maneira de converter HTML em uma string de Emmet.

_ressalto_

Eu adoraria ser capaz de converter HTML em emmet. Seria muito útil para fazer uma folha de dicas de blocos de código que uso com frequência.

Qualquer mudança?

@Kcko sem atualizações. Este recurso tem a prioridade mais baixa para mim

seria um bom recurso. hierarquias são fáceis de ler na sintaxe emmet / zen e às vezes é útil ter uma espécie de rascunho na abreviação ao iterar um design de fragmento de HTML.

Seria um ótimo recurso!
Imagine criar vários blocos com o recurso * n e descobrir mais tarde que você precisa mudar o bloco. Agora você tem que deletar os blocos e reescrever o código do emmet novamente. Voltar, modificar apenas uma parte e depois deixá-la gerar novamente seria muito mais rápido!

@MarcoWilli Emmet tem métodos suficientes para modificar rapidamente o código existente:

  • (Envolva com abreviatura) [http://docs.emmet.io/actions/wrap-with-abbreviation/]
  • (Atualizar tag) [http://emmet.io/blog/beta-v1-1/]

Você também deve observar que se seus elementos repetidos contiverem conteúdo diferente (como você descreveu como "modificar mais tarde"), a sequência de abreviação reversa não será a mesma que você usou para gerar o código

Voto positivo de mim. Novo para Emmet e seria uma maneira fantástica de melhorar minhas habilidades.

Realmente precisava desse recurso, aqui está o meu caso:

Eu recebo alguns blocos como
<record class="main1 text"> <field name id="1">1</field> <field name id="2">2</field> <field name id="3">3</field> <field name id="4">4</field> </record>

Quero gerar mais registros usando o primeiro, agora tento reproduzir a abreviatura para obter a abreviatura do registro e digito algo como (record...)*10

Obrigado

@chermed ... ou você pode simplesmente copiar e colar o trecho de código. Observe que o código que você forneceu é um caso de uso muito simples, mas muito raro. Na maioria dos casos, você acabará com algo como a abreviatura record>field[name=name1]{text1}+field[name=name2]{text2}+field[name=name3]{text3}+... , que não é muito útil

Temos um microsserviço que renderiza uma string Html a partir de um template + objeto JSON com dados e responde às solicitações POST com a string html renderizada. Ter que enviar uma grande string HTML na resposta HTTP introduz um gargalo em nosso fluxo de aplicativo.

Se houver uma maneira de pegar esse HTML renderizado e convertê-lo em uma abreviação de Emmet que é enviada como resposta, isso removeria nosso gargalo, pois o tamanho dos dados de resposta leva um número menor de bytes. O microsserviço que recebe a resposta pode então emmet-expandir a abreviatura para renderizar o lado do cliente.

@kizzlebot , parece um caso de uso viável, mas você deve considerar o seguinte:

  • Converter HTML enorme em Emmet também pode ser um gargalo, mas no lado da CPU, neste caso
  • O gzip de saída resolve o problema?
  • Expandir o Emmet no lado do cliente significa que ele requer um tempo de execução especial para renderização. Portanto, parece que não há necessidade de seu microsserviço, porque você pode enviar seu próprio modelo e dados JSON diretamente para o cliente e renderizá-los usando seu próprio tempo de execução

@kizzlebot porque não Messagepack e / ou Apache Avro?

@sergeche para ser mais específico, "render" pode ser a palavra errada a ser usada. usamos o html para criar um documento PDF por meio de um microsserviço que apenas recebe cargas úteis html e as converte em PDF. Portanto, se fosse possível ir de html para a abreviatura Emmet, o cliente que recebe a abreviatura emmet deve ser capaz de simplesmente expandi-la usando o módulo NPM atual do Emmet. Não precisaríamos de um runtime para renderizar porque o html nunca é renderizado no lado do cliente. Precisamos apenas de uma carga compacta para passar pelo fio.

Gostaria de construir sites de amostra e convertê-los de volta em trechos de emmet para tornar a digitação da apresentação mais rápida (e isso o processo de demonstração emmet).

Provavelmente possível usando Hyperscript / JSX e o AST.

Isso tem muito potencial.
Outro dia, eu estava mexendo com frameworks HTML como Jade e HAML e achei que eram ótimos substitutos para a sintaxe HTML pouco clara. Mas eu não pude entrar neles para meus projetos porque exigia apenas uma instalação extra e conversão. Sempre usei o Emmet, que era quase tão bom (suporta apenas um pouco menos e não requer instalação).
Mas hoje, quando estava construindo um modelo de site, decidi usar recuo enquanto escrevia em Emmet e pensei nisso:

.navbar>
  .logo+
  ul.menu_v>
    li.menu_itm*2+
    li.menu_item.dropd
  ^
  ul.menu_v>
    li.item_dd

É muito mais legível do que HTML.
E depois de olhar para isso, pensei, não seria ótimo se Emmet apoiasse o recuo.
E depois disso eu pensei, e se houver uma ferramenta de conversão que converte Emmet em HTML com indentação. Dessa forma, é muito mais divertido escrever e ler em HTML.
Quero dizer, XML tinha JSON acontecendo com ele.
É hora de o HTML seguir em frente ...

Você quer dizer webcomponents, hyperscript, JSX e pug? Bem, imho, isso não é muito fácil de ler.

Emmet é usado principalmente para prototipagem rápida e conclusão de comando / andaime, por exemplo, em projetos PhpStorm. Portanto, a sintaxe do Emmet normalmente não é armazenada em nenhum projeto, apenas no html final.

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

MarvinXu picture MarvinXu  ·  10Comentários

corysimmons picture corysimmons  ·  5Comentários

nicothin picture nicothin  ·  18Comentários

DanielRuf picture DanielRuf  ·  5Comentários

planetoftheweb picture planetoftheweb  ·  3Comentários