Emmet: Convertir HTML en abréviation

Créé le 13 oct. 2012  ·  25Commentaires  ·  Source: emmetio/emmet

Créez un convertisseur qui analysera le bloc HTML et le convertira en expression (contre-« Développer l'abréviation »).

Voulez-vous soutenir ce problème ? Publiez une prime dessus ! Nous acceptons les primes via Bountysource .

Enhancement

Commentaire le plus utile

J'ai envoyé un e-mail au(x) créateur(s) mais je reposte ici, juste pour voter pour la demande :


Salut,

Tout d'abord, merci pour votre excellent travail, vous avez fait un super travail, j'admire vraiment le résultat.

Une pensée que j'ai eue à propos de votre programme:

Est-il possible de faire du « reverse coding » ?

c'est-à-dire prendre le

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

et le transformer en

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

??

Pourquoi? eh bien, tout d'abord, il est plus facile de travailler avec le deuxième code, puis de le ramener à la normale. Et, le plus important, si possible d'utiliser un javascript côté client - ou même un code côté serveur par des volontaires pour écrire, _directement_, dans les pages html de code emmet.

Pensez à l'impact que cela aurait.

Eh bien, c'est juste une pensée :)

Merci encore,

S'amuser,
Giannis,
Athènes, Grèce, Europe, Monde.


Alors, c'est ça, en votant pour l'idée :+1: et en espérant la voir se faire :)

Tous les 25 commentaires

J'ai envoyé un e-mail au(x) créateur(s) mais je reposte ici, juste pour voter pour la demande :


Salut,

Tout d'abord, merci pour votre excellent travail, vous avez fait un super travail, j'admire vraiment le résultat.

Une pensée que j'ai eue à propos de votre programme:

Est-il possible de faire du « reverse coding » ?

c'est-à-dire prendre le

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

et le transformer en

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

??

Pourquoi? eh bien, tout d'abord, il est plus facile de travailler avec le deuxième code, puis de le ramener à la normale. Et, le plus important, si possible d'utiliser un javascript côté client - ou même un code côté serveur par des volontaires pour écrire, _directement_, dans les pages html de code emmet.

Pensez à l'impact que cela aurait.

Eh bien, c'est juste une pensée :)

Merci encore,

S'amuser,
Giannis,
Athènes, Grèce, Europe, Monde.


Alors, c'est ça, en votant pour l'idée :+1: et en espérant la voir se faire :)

Ayez mon vote positif ! Imaginez si nous pouvons coder les pages en HTML, les traduire en emmet, puis écrire du code php qui inclut le code emmet qui est développé dynamiquement en HTML.

:hand: Mon drive-by deux cents :

@icb931023 Tout d'abord, j'ai pensé que ce que vous avez dit avait l'air cool, mais vraiment, quel serait l'avantage ? Votre PHP devra gérer une chaîne plus courte représentant votre code HTML, mais il devra alors faire plus de travail avec.

Je suppose que je n'aurais pas autant à vous soucier des fautes de frappe (comme une barre oblique manquante dans une balise de fermeture par exemple) puisque toutes les balises seront générées pour vous, mais vous travaillez avec du HTML étendu, je suppose (bien que commençant par le syntaxe concise) donc je ne suis pas sûr que ce soit un argument solide pour cela non plus. Ou peut-être que je me trompe en supposant que vous ne travailleriez pas entièrement dans la syntaxe concise / réduite.

Je veux vouloir ça. Je ne vois tout simplement pas de cas d'utilisation convaincant. Ce n'est évidemment pas aussi bénéfique que le prétraitement CSS par exemple.

Ce serait une autre histoire si les navigateurs / moteurs de modèles comprenaient la syntaxe Emmet. Ce serait intéressant !

Mmm, c'est assez intéressant de créer une librairie JS pour le traduire ;)

Voici un point de départ du point de vue du client ; La moustache d'Emmet . N'hésitez pas à contribuer.

@vabatta :)

les mises à jour?

J'adorerais ça aussi. J'utilise une page de guide de style où je stocke tous mes éléments, pour gérer cela, j'ai un fichier JSON géant utilisant des chaînes Emmet pour représenter les éléments et j'ai créé un outil JavaScript pour les cracher sur une page. Mais pour le moment, je dois tous les convertir à la main pour garder ce fichier à jour à chaque fois que quelque chose de nouveau est créé. J'adorerais un moyen de convertir le HTML en une chaîne Emmet.

_cogner_

J'aimerais pouvoir convertir HTML en emmet. Ce serait super utile pour créer une feuille de triche de blocs de code que j'utilise fréquemment.

Tout changement?

@Kcko aucune mise à jour. Cette fonctionnalité a la priorité la plus basse pour moi

ce serait une fonctionnalité intéressante. les hiérarchies sont faciles à lire dans la syntaxe emmet/zen et il est parfois utile d'avoir une sorte de brouillon dans l'abréviation lors de l'itération d'une conception de fragment HTML.

Ce serait une excellente fonctionnalité !
Imaginez créer plusieurs blocs avec la fonction *n et découvrir plus tard que vous devez changer le bloc. Vous devez maintenant supprimer les blocs et réécrire à nouveau le code emmet. Revenir en arrière, modifier juste une pièce puis la laisser générer à nouveau serait beaucoup plus rapide !

@MarcoWilli Emmet a suffisamment de méthodes pour modifier rapidement le code existant :

  • (Envelopper avec abréviation)[http://docs.emmet.io/actions/wrap-with-abbreviation/]
  • (Mettre à jour la balise)[http://emmet.io/blog/beta-v1-1/]

Vous devez également noter que si vos éléments répétés contiennent un contenu différent (comme vous l'avez décrit comme « modifier ultérieurement »), la chaîne d'abréviation inversée ne sera pas la même que celle que vous avez utilisée pour générer le code

Vote positif de ma part. Nouveau pour Emmet et ce serait un moyen fantastique d'améliorer mes compétences.

J'avais vraiment besoin de cette fonctionnalité, voici mon cas :

Je reçois des blocs comme
<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>

Je veux donc générer plus d'enregistrements en utilisant le premier, alors maintenant j'essaie de reproduire l'abréviation pour obtenir l'abréviation de l'enregistrement, puis je tape quelque chose comme (record...)*10

Merci

@chermed ... ou vous pouvez simplement copier-coller l'extrait de code. Veuillez noter que le code que vous avez fourni est un cas d'utilisation très simple mais très rare. Dans la plupart des cas, vous vous retrouverez avec quelque chose comme l'abréviation record>field[name=name1]{text1}+field[name=name2]{text2}+field[name=name3]{text3}+... , ce qui n'est pas très utile

Nous avons un microservice qui restitue une chaîne HTML à partir d'un modèle + objet JSON avec des données et répond aux requêtes POST avec la chaîne html rendue. Devoir envoyer une énorme chaîne HTML dans la réponse HTTP introduit un goulot d'étranglement dans notre flux d'application.

S'il existe un moyen de prendre ce HTML rendu et de le convertir en une abréviation Emmet qui est envoyée comme réponse à la place, cela supprimerait notre goulot d'étranglement car la taille de nos données de réponse prend un plus petit nombre d'octets. Le microservice qui reçoit la réponse peut alors emmet-développer l'abréviation pour le rendu côté client.

@kizzlebot, cela semble être un cas d'utilisation viable, mais vous devriez considérer ce qui suit :

  • La conversion d'un énorme HTML en Emmet peut également être un goulot d'étranglement, mais du côté du processeur dans ce cas
  • La sortie gzipping résout-elle le problème ?
  • L'extension d'Emmet côté client signifie qu'elle nécessite un runtime spécial pour le rendu. Ainsi, il semble que votre microservice ne soit pas du tout nécessaire car vous pouvez envoyer votre propre modèle et vos données JSON directement au client et les rendre à l'aide de votre propre environnement d'exécution.

@kizzlebot pourquoi pas Messagepack et/ou Apache Avro ?

@sergeche pour être plus précis, "rendre" peut être un mauvais mot à utiliser. nous utilisons le html pour créer un document PDF via un microservice qui ne reçoit que des charges utiles html et le convertit en PDF. Par conséquent, s'il était possible de passer du HTML à l'abréviation Emmet, le client recevant l'abréviation Emmet devrait pouvoir simplement l'étendre à l'aide du module npm Emmet actuel. Nous n'aurions pas besoin d'un runtime pour le rendu car le code HTML n'est jamais rendu côté client. Nous avons juste besoin d'une charge utile compacte pour passer sur le fil.

J'aimerais créer des exemples de sites et les reconvertir en extraits emmet pour accélérer la saisie de la présentation (et c'est la démo du processus emmet).

Probablement possible en utilisant Hyperscript / JSX et l'AST.

Cela a beaucoup de potentiel.
L'autre jour, j'ai joué avec des frameworks HTML comme Jade et HAML et j'ai pensé qu'ils étaient de bons remplaçants pour la syntaxe HTML peu claire. Mais je ne pouvais pas y accéder pour mes projets car cela nécessitait juste cette installation et cette conversion supplémentaires. J'ai toujours utilisé Emmet qui était presque aussi bon (il ne supporte qu'un peu moins et ne nécessite pas d'installation).
Mais aujourd'hui, alors que je construisais un modèle de site, j'ai décidé d'utiliser l'indentation lors de l'écriture dans Emmet et j'ai trouvé ceci :

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

C'est beaucoup plus lisible que le HTML.
Et après l'avoir regardé, je me suis dit que ce ne serait pas génial si Emmet soutenait l'indentation.
Et après cela, j'ai pensé, et s'il y avait un outil de conversion qui convertit Emmet en HTML avec indentation. De cette façon, c'est beaucoup plus amusant d'écrire et de lire en HTML.
Je veux dire que XML a eu JSON.
Il est temps que le HTML passe à autre chose...

Vous voulez dire composants Web, hyperscript, JSX et carlin ? Eh bien, à mon humble avis, ce n'est pas très facile à lire.

Emmet est principalement utilisé pour le prototypage rapide et l'achèvement / l'échafaudage de commandes, par exemple dans les projets PhpStorm. Ainsi, la syntaxe Emmet n'est normalement stockée dans aucun projet, juste le code HTML final.

Cette page vous a été utile?
0 / 5 - 0 notes

Questions connexes

DanielRuf picture DanielRuf  ·  5Commentaires

corysimmons picture corysimmons  ·  5Commentaires

MarvinXu picture MarvinXu  ·  10Commentaires

renatorib picture renatorib  ·  26Commentaires

fversepuy picture fversepuy  ·  5Commentaires