Emmet: HTML in Abk√ľrzung umwandeln

Erstellt am 13. Okt. 2012  ¬∑  25Kommentare  ¬∑  Quelle: emmetio/emmet

Erstellen Sie einen Konverter, der den HTML-Block analysiert und in einen Ausdruck umwandelt (Gegen-‚ÄěAbk√ľrzung erweitern‚Äú).

M√∂chten Sie dieses Problem unterst√ľtzen? Setzen Sie ein Kopfgeld darauf! Wir akzeptieren Pr√§mien √ľber Bountysource .

Enhancement

Hilfreichster Kommentar

Ich habe eine E-Mail an den/die Ersteller gesendet, aber ich poste hier erneut, um die Anfrage zu bestätigen:


Hallo,

Erstmal danke f√ľr deine tolle Arbeit, du hast einen super Job gemacht, ich bewundere das Ergebnis wirklich.

Ein Gedanke, den ich zu Ihrem Programm hatte:

Ist es möglich "umgekehrt zu codieren"?

dh nimm die

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

und verwandle es in

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

??

Wieso den? Nun, zunächst ist es einfacher, mit dem zweiten Code zu arbeiten und ihn dann wieder normal zu machen. Und, am wichtigsten, wenn möglich, ein clientseitiges Javascript zu verwenden - oder sogar einen serverseitigen Code von Freiwilligen, um _direkt_ in HTML-Seiten mit Emmet-Code zu schreiben.

Denken Sie an die Auswirkungen, die das haben w√ľrde.

Naja, ist nur ein Gedanke :)

Danke noch einmal,

Habe Spaß,
Giannis,
Athen, Griechenland, Europa, Welt.


Also, das war's, die Idee positiv bewerten :+1: und hoffen, dass sie fertig wird :)

Alle 25 Kommentare

Ich habe eine E-Mail an den/die Ersteller gesendet, aber ich poste hier erneut, um die Anfrage zu bestätigen:


Hallo,

Erstmal danke f√ľr deine tolle Arbeit, du hast einen super Job gemacht, ich bewundere das Ergebnis wirklich.

Ein Gedanke, den ich zu Ihrem Programm hatte:

Ist es möglich "umgekehrt zu codieren"?

dh nimm die

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

und verwandle es in

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

??

Wieso den? Nun, zunächst ist es einfacher, mit dem zweiten Code zu arbeiten und ihn dann wieder normal zu machen. Und, am wichtigsten, wenn möglich, ein clientseitiges Javascript zu verwenden - oder sogar einen serverseitigen Code von Freiwilligen, um _direkt_ in HTML-Seiten mit Emmet-Code zu schreiben.

Denken Sie an die Auswirkungen, die das haben w√ľrde.

Naja, ist nur ein Gedanke :)

Danke noch einmal,

Habe Spaß,
Giannis,
Athen, Griechenland, Europa, Welt.


Also, das war's, die Idee positiv bewerten :+1: und hoffen, dass sie fertig wird :)

Habe mein Upvote! Stellen Sie sich vor, wir k√∂nnten die Seiten in HTML codieren, in Emmet √ľbersetzen und dann PHP-Code schreiben, der den Emmet-Code enth√§lt, der dynamisch in HTML erweitert wird.

:hand: Mein Drive-by zwei Cent:

@icb931023 Zuerst dachte ich, was du gesagt hast, klingt cool, aber was w√§re der Vorteil wirklich? Ihr PHP muss mit einem k√ľrzeren String umgehen, der Ihren HTML-Code repr√§sentiert, aber es muss dann mehr damit arbeiten.

Ich denke, Sie m√ľssen sich nicht so viele Gedanken √ľber Tippfehler machen (wie zum Beispiel einen fehlenden Schr√§gstrich in einem schlie√üenden Tag), da alle Tags f√ľr Sie generiert werden, aber Sie arbeiten mit erweitertem HTML, nehme ich an (wenn auch mit dem pr√§gnante Syntax), daher bin ich mir nicht sicher, ob dies auch ein starkes Argument daf√ľr ist. Oder vielleicht liege ich falsch, wenn ich annehme, dass Sie nicht vollst√§ndig in der pr√§gnanten / zusammengeklappten Syntax arbeiten w√ľrden.

Ich m√∂chte das wollen. Ich kann einfach keinen √ľberzeugenden Anwendungsfall sehen. Es ist nicht so offensichtlich vorteilhaft wie beispielsweise die CSS-Vorverarbeitung.

Es w√§re eine andere Geschichte, wenn Browser / Templating-Engines die Emmet-Syntax verstehen w√ľrden. Das w√§re interessant!

Mmm, ist ziemlich interessant, eine JS-Bibliothek zu erstellen, um sie zu √ľbersetzen ;)

Hier ist ein Anfang aus der Sicht des Kunden; Emmets Schnurrbart . F√ľhlen Sie sich frei, einen Beitrag zu leisten.

@vabatta :)

irgendwelche Updates?

W√ľrde das auch lieben. Ich verwende eine Styleguide-Seite, auf der ich alle meine Elemente speichere. Um dies zu verwalten, habe ich eine riesige JSON-Datei mit Emmet-Strings, um die Elemente darzustellen, und ich habe ein JavaScript-Tool erstellt, um sie auf einer Seite auszuspucken. Aber im Moment muss ich sie alle von Hand konvertieren, um diese Datei jedes Mal auf dem neuesten Stand zu halten, wenn etwas Neues erstellt wird. W√ľrde gerne eine M√∂glichkeit haben, HTML in einen Emmet-String zu konvertieren.

_stoßen_

Ich w√ľrde gerne in der Lage sein, HTML in Emmet zu konvertieren. Es w√§re sehr n√ľtzlich, um einen Spickzettel mit Codebl√∂cken zu erstellen, die ich h√§ufig verwende.

Jede √Ąnderung?

@Kcko keine Updates. Diese Funktion hat f√ľr mich die niedrigste Priorit√§t

das w√§re ein nettes Feature. Hierarchien sind in der Emmet/Zen-Syntax leicht zu lesen und manchmal ist es hilfreich, eine Art Grobentwurf in der Abk√ľrzung zu haben, wenn ein HTML-Fragment-Design iteriert wird.

Wäre ein tolles Feature!
Stellen Sie sich vor, Sie erstellen mehrere Bl√∂cke mit der Funktion *n und stellen sp√§ter fest, dass Sie den Block √§ndern m√ľssen. Jetzt m√ľssen Sie die Bl√∂cke l√∂schen und den Emmet-Code erneut schreiben. Zur√ľckzugehen, nur einen Teil zu modifizieren und ihn dann erneut generieren zu lassen, w√§re viel schneller!

@MarcoWilli Emmet hat gen√ľgend Methoden, um vorhandenen Code schnell zu √§ndern:

  • (Wrap with Abk√ľrzung)[http://docs.emmet.io/actions/wrap-with-abbreviation/]
  • (Tag aktualisieren)[http://emmet.io/blog/beta-v1-1/]

Beachten Sie auch, dass die umgekehrte Abk√ľrzungszeichenfolge nicht dieselbe ist, die Sie zum Generieren von Code verwendet haben, wenn Ihre wiederholten Elemente unterschiedlichen Inhalt enthalten (wie Sie es als ‚Äěsp√§ter √§ndern‚Äú beschrieben haben).

Upvote von mir. Neu bei Emmet und es wäre eine fantastische Möglichkeit, meine Fähigkeiten zu verbessern.

Ich brauchte diese Funktion wirklich, hier ist mein Fall:

Ich erhalte einige Blöcke wie
<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>

Also m√∂chte ich mit dem ersten mehr Datens√§tze generieren, also versuche ich jetzt, die Abk√ľrzung zu reproduzieren, um die Datensatzabk√ľrzung zu erhalten, und tippe dann etwas wie (record...)*10

Danke

@chermed ...oder Sie k√∂nnen den record>field[name=name1]{text1}+field[name=name2]{text2}+field[name=name3]{text3}+... , was nicht sehr n√ľtzlich ist

Wir haben einen Microservice, der einen HTML-String aus einer Vorlage + JSON-Objekt mit Daten rendert und auf POST-Anfragen mit dem gerenderten HTML-String antwortet. Das Senden eines riesigen HTML-Strings in der HTTP-Antwort f√ľhrt zu einem Engpass in unserem Anwendungsfluss.

Wenn es eine M√∂glichkeit gibt, diesen gerenderten HTML-Code zu verwenden und ihn in eine Emmet-Abk√ľrzung zu konvertieren, die stattdessen als Antwort gesendet wird, w√ľrde dies unseren Engpass beseitigen, da unsere Antwortdatengr√∂√üe eine geringere Anzahl von Bytes ben√∂tigt. Der Microservice, der die Antwort empf√§ngt, kann dann die Abk√ľrzung f√ľr clientseitiges Rendern emmet-expandieren.

@kizzlebot scheint ein praktikabler Anwendungsfall zu sein, aber Sie sollten Folgendes ber√ľcksichtigen:

  • Die Konvertierung von riesigem HTML in Emmet kann ebenfalls ein Flaschenhals sein, aber in diesem Fall auf der CPU-Seite
  • L√∂st das Ausgabe-Gzipping das Problem?
  • Das Erweitern von Emmet auf Client-Seite bedeutet, dass es eine spezielle Laufzeit zum Rendern erfordert. Ihr Microservice scheint also √ľberhaupt keinen Bedarf zu haben, da Sie Ihre eigene Vorlage und JSON-Daten direkt an den Client senden und mit Ihrer eigenen Laufzeit rendern k√∂nnen

@kizzlebot warum nicht Messagepack und / oder Apache Avro?

@sergeche um genauer zu sein, "rendern" ist m√∂glicherweise das falsche Wort. Wir verwenden HTML, um ein PDF-Dokument √ľber einen Microservice zu erstellen, der nur HTML-Nutzlasten empf√§ngt und in PDF konvertiert. Wenn es daher m√∂glich w√§re, von html zu einer Emmet-Abk√ľrzung zu wechseln, sollte der Client, der die Emmet-Abk√ľrzung erh√§lt, diese einfach mit dem aktuellen Emmet-npm-Modul erweitern k√∂nnen. Wir br√§uchten keine Laufzeit zum Rendern, da der HTML-Code nie auf der Clientseite gerendert wird. Wir brauchen nur eine kompakte Nutzlast, um √ľber den Draht zu gelangen.

Ich möchte Beispiel-Sites erstellen und sie wieder in Emmet-Snippets konvertieren, um das Tippen von Präsentationen schneller zu machen (und es ist die Prozessdemo-Emmet).

Wahrscheinlich möglich mit Hyperscript / JSX und dem AST.

Das hat viel Potenzial.
Neulich habe ich mich mit HTML-Frameworks wie Jade und HAML besch√§ftigt und dachte, sie w√§ren ein gro√üartiger Ersatz f√ľr die unklare HTML-Syntax. Aber ich konnte f√ľr meine Projekte nicht darauf zugreifen, weil es nur diese zus√§tzliche Installation und Konvertierung erforderte. Ich habe immer Emmet verwendet, was fast genauso gut war (es unterst√ľtzt nur etwas weniger und erfordert keine Installation).
Aber heute, als ich eine Site-Vorlage erstellt habe, habe ich mich entschieden, beim Schreiben in Emmet Einr√ľckungen zu verwenden, und mir ist Folgendes eingefallen:

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

Dies ist viel besser lesbar als HTML.
Und nachdem ich es mir angesehen hatte, dachte ich, w√§re es nicht gro√üartig, wenn Emmet Einr√ľckungen unterst√ľtzen w√ľrde.
Und danach dachte ich, was w√§re, wenn es ein Konvertierungstool g√§be, das Emmet mit Einr√ľckung in HTML umwandelt. Auf diese Weise macht es viel mehr Spa√ü, HTML zu schreiben und zu lesen.
Ich meine, XML hatte JSON passieren.
Es ist Zeit f√ľr HTML, weiterzumachen...

Du meinst Webkomponenten, Hyperscript, JSX und Pug? Nun, das ist imho nicht ganz einfach zu lesen.

Emmet wird haupts√§chlich f√ľr schnelles Prototyping und Befehlsvervollst√§ndigung / Ger√ľstbau zB in PhpStorm-Projekten verwendet. Daher wird die Emmet-Syntax normalerweise in keinem Projekt gespeichert, sondern nur das endg√ľltige HTML.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

DanielRuf picture DanielRuf  ¬∑  5Kommentare

fversepuy picture fversepuy  ¬∑  5Kommentare

planetoftheweb picture planetoftheweb  ¬∑  3Kommentare

nicothin picture nicothin  ¬∑  18Kommentare

renatorib picture renatorib  ¬∑  26Kommentare