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

renatorib picture renatorib  ·  26Kommentare

nicothin picture nicothin  ·  18Kommentare

MarvinXu picture MarvinXu  ·  10Kommentare

DanielRuf picture DanielRuf  ·  5Kommentare

corysimmons picture corysimmons  ·  5Kommentare