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

planetoftheweb picture planetoftheweb  ¬∑  3Commentaires

fversepuy picture fversepuy  ¬∑  5Commentaires

renatorib picture renatorib  ¬∑  26Commentaires

HeikoMamerow picture HeikoMamerow  ¬∑  16Commentaires

midgethoen picture midgethoen  ¬∑  8Commentaires