Dev Faq
7
votes

Simple HTML jolie imprimé

http://jsfiddle.net/jameskyle/l4b8b/

Cela peut être un effort futile, mais je pense personnellement que c'est possible.

Je ne suis pas le meilleur de JavaScript ou JQuery, mais je pense que j'ai trouvé un moyen simple de faire une simple prettyprint pour HTML.

Il existe quatre types de code dans cette prettyprint:

  1. Texte simple
  2. ÉLÉMENTS
  3. Attributs
  4. valeurs

    Pour styliser cela, je veux envelopper éléments , attibutes et valeurs avec des couvre avec leurs propres cours.

    La première façon dont je dispose de cela est de stocker chaque type d'élément et d'attribut (présenté ci-dessous), puis de les envelopper avec les effondres correspondants xxx

    La deuxième façon dont j'ai pensé était de détecter éléments comme une quantité de texte entourée de deux <> ', puis détecter attributs comme texte à l'intérieur d'un élément qui est entouré de deux espaces ou a un = immédiatement après. xxx

    Comment l'une d'entre elles être codée, si possible

    Encore une fois, vous pouvez voir cela comme un jsfiddle ici: http://jsfiddle.net/jameskyle/l4b8b/

3 commentaires

Comment code réellement ceci

Pourquoi ne pas utiliser l'un des nombreux moteurs de modèles côté serveur déjà là-bas?

Parce que je n'ai absolument aucune idée de la façon dont ces travaillent, je suis un designer pas un développeur. Je pensais juste que ce serait une chose relativement facile à faire

3 Réponses :

-1
votes

Si vous faites ce côté client, et que vous avez déjà le DOM, il serait alors plus efficace de le sérialiser vous-même insérant les balises appropriées lorsque vous allez plutôt que de sérialiser le sous-arbre entier à la fois, puis essayez de répéter ça.

0 commentaires
1
votes

Personnellement, j'envelopperais HTML avec PRE et n'essayez pas de faire une jolie impression. Il existe des tonnes de bibliothèques pour effectuer le formatage du code juste google jolie imprimée. Il suffit d'envelopper HTML avec un pré-effectuer automatiquement le code «imprimé».

Pour JavaScript, vous pouvez utiliser JSON.Stringify pour recréer le code en passant dans un certain nombre d'espaces pour des structures imbriquées. P> 

JSON.stringify({ name: 'value' }, null, 2); //Change to four, for four spaces

0 commentaires
22
votes

Ne soyez pas si sûr que vous avez eu tout ce qu'il y a à imprimer de jolie html dans si peu de lignes. Il m'a fallu un peu plus d'un an et 2000 lignes pour vraiment clouer ce sujet. Vous pouvez simplement utiliser mon code directement ou le refroidir pour répondre à vos besoins:

https://github.com/prettydiff/prettydiff/blob/ maître / lib / markuppretty.js (et GitHub Project )

Vous pouvez la démonstration à http://prettydiff.com/?m=beautify&html

La raison pour laquelle il faut tellement de code est que les gens ne semblent vraiment pas comprendre ou valoriser l'importance des nœuds de texte. Si vous ajoutez de nouveaux nœuds de texte vides pendant l'embellissement, vous le faites mal et vous corrompre probablement votre contenu. De plus, il est également vraiment facile de le vêler l'inverse et de supprimer l'espace blanc de votre contenu. Vous devez faire attention à ce sujet ou vous détruirez complètement l'intégrité de votre document.

Aussi, que si votre document contient CSS ou JavaScript. Ceux-ci devraient également être assez imprimés, mais ont des exigences très différentes de HTML. Même HTML et XML ont des exigences différentes. S'il vous plaît, prenez ma parole que ce n'est pas une chose simple à comprendre. HTML Tidy a été à cela pendant plus d'une décennie et vissait toujours beaucoup de cas de bord.

Aussi loin que je connais mon application Markup_Beauty.js est la jolie imprimante la plus complète jamais écrite pour HTML / XML. Je sais que c'est une déclaration très audacieuse, et peut-être arrogante, mais elle n'a jamais été contestée. Regardez mon code et s'il y a quelque chose dont vous avez besoin de cela, cela ne fait pas s'il vous plaît faites le moi savoir et je vais me contenter de l'ajouter.

4 commentaires

Connaissez-vous de bonnes réductions de la manière d'utiliser cela, je concevons un site pour un guide facile à comprendre pour HTML et CSS (en quelque sorte comme W3Schools uniquement une recommandation valide WC3). Finalement guide vers JavaScript / JQuery, PHP et quelques autres. Cependant, la société veut une maquette pour cela très rapidement, alors j'ai juste besoin de leur montrer ce que j'ai. Toute aide est grandement appréciée!

L'application Markup_Beauty prend un seul argument, mentionné dans la demande en tant que "ARG". Cet argument est un objet littéral avec les propriétés spécifiées dans la section "Options" du commentaire en haut. Cela signifie que vous devrez écrire du code pour accepter l'entrée et l'emballage qui entrent dans le format approprié. Une fois que votre entrée est emballée, vous venez d'exécuter: var joly_code = markup_beauty (votre_Input_Object); La demande renvoie deux choses. Principalement, l'application renvoie uniquement le code beautifié, qui peut être attribué à une variable comme l'exemple de code dans ce commentaire. L'autre est ...

La deuxième sortie de l'application est fournie à la variable "Résumé". Cette variable n'est pas scopée à l'application, car elle est censée être utilisée dans la fermeture d'une portée plus élevée. Si vous ne souhaitez pas utiliser ceci, vous pouvez accélérer la vitesse de traitement sensiblement en supprimant simplement la dernière fonction commençant autour de la ligne 1714. Si vous souhaitez utiliser ce rapport, vous devrez déclarer une variable nommée «Résumé» en dehors de l'application Markup_Beauty . Ceci est nécessaire pour fournir un moyen d'accéder à l'extérieur des variables et des données privées à l'application.

Je mettrai à jour le commentaire dans le code pour afficher un exemple d'utilisation de l'exemple codé dans la prochaine mise à jour.

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO