Emmet: Convertir HTML a abreviatura

Creado en 13 oct. 2012  ·  25Comentarios  ·  Fuente: emmetio/emmet

Cree un convertidor que analizará el bloque HTML y lo convertirá en una expresión (contador- "Expandir abreviatura").

¿Quiere respaldar este problema? ¡Publique una recompensa por él! Aceptamos recompensas a través de Bountysource .

Enhancement

Comentario más útil

Envié un correo electrónico a los creadores, pero estoy volviendo a publicar aquí, solo para votar a favor de la solicitud:


Hola,

En primer lugar, gracias por tu gran trabajo, has hecho un gran trabajo, realmente admiro el resultado.

Un pensamiento que tuve sobre su programa:

¿Es posible hacer 'codificación inversa'?

es decir, toma el

<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>

y transformarlo en

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

??

¿Por qué? Bueno, en primer lugar, es más fácil trabajar con el segundo código y luego volver a la normalidad. Y, lo más importante, si es posible utilizar un javascript del lado del cliente, o incluso un código del lado del servidor por parte de voluntarios para escribir, _directamente_, en páginas html de código emmet.

Piense en el impacto que tendría.

Bueno, es solo un pensamiento :)

Gracias de nuevo,

Divertirse,
Giannis,
Atenas, Grecia, Europa, Mundo.


Entonces, eso es todo, votando a favor la idea: +1: y esperando verlo hecho :)

Todos 25 comentarios

Envié un correo electrónico a los creadores, pero estoy volviendo a publicar aquí, solo para votar a favor de la solicitud:


Hola,

En primer lugar, gracias por tu gran trabajo, has hecho un gran trabajo, realmente admiro el resultado.

Un pensamiento que tuve sobre su programa:

¿Es posible hacer 'codificación inversa'?

es decir, toma el

<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>

y transformarlo en

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

??

¿Por qué? Bueno, en primer lugar, es más fácil trabajar con el segundo código y luego volver a la normalidad. Y, lo más importante, si es posible utilizar un javascript del lado del cliente, o incluso un código del lado del servidor por parte de voluntarios para escribir, _directamente_, en páginas html de código emmet.

Piense en el impacto que tendría.

Bueno, es solo un pensamiento :)

Gracias de nuevo,

Divertirse,
Giannis,
Atenas, Grecia, Europa, Mundo.


Entonces, eso es todo, votando a favor la idea: +1: y esperando verlo hecho :)

¡Ten mi voto a favor! Imagínese si podemos codificar las páginas en HTML, traducirlo a emmet y luego escribir código php que incluye el código emmet que se expande en HTML de forma dinámica.

: mano: Mi drive-by dos centavos:

@ icb931023 Primero pensé que lo que dijiste suena genial, pero en realidad, ¿cuál sería el beneficio? Su PHP tendrá que lidiar con una cadena más corta que representa su HTML, pero luego tendrá que trabajar más con ella.

Supongo que no tendría que preocuparse tanto por los errores tipográficos (como una barra oblicua faltante en una etiqueta de cierre, por ejemplo) ya que todas las etiquetas se generarán para usted, pero supongo que está trabajando con HTML expandido (aunque comenzando con el sintaxis concisa), por lo que tampoco estoy seguro de si ese es un argumento sólido. O tal vez me equivoque al suponer que no funcionaría completamente en la sintaxis concisa / colapsada.

Quiero querer esto. Simplemente no puedo ver un caso de uso convincente. No es tan obviamente beneficioso como el preprocesamiento de CSS, por ejemplo.

Sería una historia diferente si los navegadores / motores de plantillas entendieran la sintaxis de Emmet. ¡Eso puede ser interesante!

Mmm, es bastante interesante crear una biblioteca JS para traducirlo;)

He aquí un comienzo desde la perspectiva del cliente; Bigote de Emmet . Siéntete libre de contribuir.

@vabatta :)

¿alguna actualización?

Me encantaría esto también. Utilizo una página de guía de estilo donde almaceno todos mis elementos, para administrar esto tengo un archivo JSON gigante que usa cadenas de Emmet para representar los elementos y he creado una herramienta de JavaScript para escupirlos en una página. Pero ahora mismo tengo que convertirlos todos a mano para mantener este archivo actualizado cada vez que se crea algo nuevo. Me encantaría una forma de convertir HTML a una cadena Emmet.

_protuberancia_

Me encantaría poder convertir HTML a emmet. Sería muy útil para hacer una hoja de referencia de los bloques de código que uso con frecuencia.

¿Cualquier cambio?

@Kcko sin actualizaciones. Esta función tiene la prioridad más baja para mí

sería una buena característica. las jerarquías son fáciles de leer en la sintaxis emmet / zen y, a veces, es útil tener una especie de borrador en la abreviatura cuando se itera un diseño de fragmento HTML.

¡Sería una gran característica!
Imagínese crear varios bloques con la función * n y descubrir más tarde que necesita cambiar el bloque. Ahora debe eliminar los bloques y volver a escribir el código emmet. ¡Regresar, modificar solo una parte y luego dejar que se genere nuevamente sería mucho más rápido!

@MarcoWilli Emmet tiene suficientes métodos para modificar rápidamente el código existente:

  • (Ajustar con abreviatura) [http://docs.emmet.io/actions/wrap-with-abbreviation/]
  • (Etiqueta de actualización) [http://emmet.io/blog/beta-v1-1/]

También debe tener en cuenta que si sus elementos repetidos contienen contenido diferente (como describió como "modificar más tarde"), la cadena de abreviatura inversa no será la misma que utilizó para generar código

Voto a favor de mí. Nuevo en Emmet y sería una forma fantástica de mejorar mis habilidades.

Realmente necesitaba esta característica, aquí está mi caso:

Recibo algunos bloques 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>

Entonces quiero generar más registros usando el primero, así que ahora trato de reproducir la abreviatura para obtener la abreviatura del registro y luego escribo algo como (record...)*10

Gracias

@chermed ... o simplemente puede copiar y pegar el fragmento de código. Tenga en cuenta que el código que ha proporcionado es un caso de uso muy simple pero muy poco común. En la mayoría de los casos, terminará con algo como record>field[name=name1]{text1}+field[name=name2]{text2}+field[name=name3]{text3}+... abreviatura, que no es muy útil

Tenemos un microservicio que procesa una cadena Html a partir de una plantilla + objeto JSON con datos y responde a las solicitudes POST con la cadena html renderizada. Tener que enviar una cadena HTML enorme en la respuesta HTTP introduce un cuello de botella en el flujo de nuestra aplicación.

Si hay una manera de tomar este HTML renderizado y convertirlo en una abreviatura de Emmet que se envía como respuesta, eliminaría nuestro cuello de botella ya que el tamaño de los datos de respuesta ocupa un número menor de bytes. El microservicio que recibe la respuesta puede luego emmet-expandir la abreviatura para renderizar el lado del cliente.

@kizzlebot parece un caso de uso viable, pero debe considerar lo siguiente:

  • La conversión de HTML enorme en Emmet también puede ser un cuello de botella, pero en este caso, en el lado de la CPU
  • ¿El gzip de salida resuelve el problema?
  • Expandir Emmet en el lado del cliente significa que requiere un tiempo de ejecución especial para renderizar. Por lo tanto, parece que su microservicio no necesita en absoluto porque puede enviar su propia plantilla y datos JSON directamente al cliente y renderizarlos usando su propio tiempo de ejecución.

@kizzlebot, ¿

@sergeche para ser más específico, "render" puede ser una palabra incorrecta. usamos html para crear un documento PDF a través de un microservicio que solo recibe cargas útiles html y lo convierte a PDF. Por lo tanto, si fuera posible pasar de html a la abreviatura de Emmet, el cliente que recibe la abreviatura de emmet debería poder simplemente expandirla utilizando el módulo npm actual de Emmet. No necesitaríamos un tiempo de ejecución para renderizar porque el html nunca se renderiza en el lado del cliente. Solo necesitamos una carga útil compacta para pasar por el cable.

Me gustaría crear sitios de muestra y convertirlos de nuevo en fragmentos de emmet para hacer que la escritura de la presentación sea más rápida (y la demostración del proceso emmet).

Probablemente sea posible usando Hyperscript / JSX y AST.

Esto tiene mucho potencial.
El otro día estaba jugando con marcos HTML como Jade y HAML y pensé que eran excelentes reemplazos para la sintaxis HTML poco clara. Pero no pude entrar en ellos para mis proyectos porque solo requería esa instalación y conversión adicionales. Siempre usé Emmet, que era casi tan bueno (solo admite un poco menos y no requiere instalación).
Pero hoy, cuando estaba creando una plantilla de sitio, decidí usar sangría mientras escribía en Emmet y se me ocurrió esto:

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

Esto es mucho más legible que HTML.
Y después de mirarlo, pensé, ¿no sería genial si Emmet apoyara la sangría?
Y después de eso pensé, ¿y si hubiera una herramienta de conversión que convierta Emmet a HTML con sangría? De esa manera, es mucho más divertido escribir y leer HTML.
Me refiero a que a XML le sucedió JSON.
Es hora de que HTML siga adelante ...

¿Te refieres a webcomponents, hyperscript, JSX y pug? Bueno, en mi humilde opinión, esto no es muy fácil de leer.

Emmet se usa principalmente para la creación rápida de prototipos y la finalización / andamiaje de comandos, por ejemplo, en proyectos PhpStorm. Por lo tanto, la sintaxis de Emmet normalmente no se almacena en ningún proyecto, solo en el html final.

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

DanielRuf picture DanielRuf  ·  5Comentarios

corysimmons picture corysimmons  ·  5Comentarios

deathmood picture deathmood  ·  15Comentarios

planetoftheweb picture planetoftheweb  ·  3Comentarios

HeikoMamerow picture HeikoMamerow  ·  16Comentarios