Wanted: ligne de Commande HTML5 formatage automatique de la requête

Voulais

D'une ligne de commande HTML5 formatage automatique de la requête fonctionnant sous Linux.

D'entrée

Tronqués, laid code HTML5. Peut-être le résultat de plusieurs modèles. Vous ne l'aimez pas, il ne vous aime pas.

De sortie

Pure beauté. Le code est bien en retrait, a assez de sauts de ligne, les soins pour les espaces. Plutôt que de l'afficher dans un navigateur web, vous souhaitez afficher le code sur votre site web directement.

Suspects

  • bien rangé en fait trop (oups, il modifie mon doctype!), et il ne fonctionne pas bien avec le HTML5. Peut-être il ya un moyen de faire coopérer et à ne pas modifier rien?
  • vim fait trop peu. Il ne tirets. Je veux que le programme pour ajouter et supprimer des sauts de ligne, et de jouer avec les espaces à l'intérieur des balises.

MORT OU VIVANT!

  • Ne devrait-ce pas être un superutilisateur question?
  • Je dirais que vous avez le bon site pour cela. Pas sûr de savoir comment beaucoup de gens sur SU réellement utiliser HTML, beaucoup moins HTML5.
  • J'ai eu le même problème et a terminé d'écrire une nouvelle bibliothèque Ruby qui ne nécessite pas de compilation d'un tiers utils (j'ai eu des problèmes pour obtenir Rangé avec Rails) et se concentre juste sur le HTML5, pas XML, XHTML ou HTML 4. Il n'est pas encore parfait, mais qui a bien fonctionné dans tous les projets que je l'ai utilisé. Veuillez prendre un coup d'oeil à jarijokinen.com/html5-beautifier
  • utiliser le XHTML5 et vous pouvez le faire xmllint --format
  • vous pouvez également monkeypatch HTML5 polyglotte documents: echo '<!doctype html>'; (echo "<?xml version='1.0' ?>"; tail -n +2 < index.html) | xmllint --format - | sed -re 's/(<script[^>]*)\/>/\1><\/script>/g' | tail -n+2. cela devrait aussi fonctionner avec les documents d'entrée avec doctype sur la ligne 1, mais pas de xml-prolog. sorties dans le même style.
InformationsquelleAutor blinry | 2010-04-17
  1. 26

    HTML Tidy a été forké par le w3c et a maintenant un support pour la validation HTML5.

    https://github.com/w3c/tidy-html5

    • En juillet 2014, ce projet semble avoir été bloqué pendant deux ans
    • En avril 2015, elle semble être en vie. Même si vous avez encore besoin de créer des binaires à partir de la source vous-même en tirant sur le repo git.
    • En juin 2016, vous pouvez installer à l'aide de Homebrew sur OSX.
    • En juillet 2017, vous pouvez apt-get install tidy sur Debian
    InformationsquelleAutor mhansen
  2. 19

    Je soupçonne bien rangé peut être fait pour travailler avec les bons paramètres de ligne de commande.

    http://tidy.sourceforge.net/docs/quickref.html

    Vous pouvez spécifier l'arbitraire d'un doctype et d'ajouter de nouveaux block, inline, et les balises vides, et les allumer et les éteindre beaucoup de ranger ses options de nettoyage.

    En fonction de ce que vous voulez à "embellir", vous pouvez probablement obtenir des résultats décents. Il ne sera probablement pas en mesure de faire certaines des choses plus avancées, comme la réécriture du contenu html à éliminer les parasites des éléments ou de les combiner, si elle ne les reconnaît pas.

    • Grosso modo, comment sur tidy -as-xhtml --input-xml --tidy-mark no -indent --indent-spaces 4 -wrap 0 --new-blocklevel-tags article,header,footer --new-inline-tags video,audio,canvas,ruby,rt,rp --doctype "<!DOCTYPE HTML>" --break-before-br yes --sort-attributes alpha --vertical-space yes (avertissement - je n'ai pas utilisé html5, et je ne l'ai copié quelques nouvelles balises de w3schools.com/html5/html5_reference.asp dans la liste en devinant qui étaient en bloc ou en ligne, de sorte s'il vous plaît ajuster selon le cas).
    • Cela semble être la meilleure option. Bravo à Stobor, trop!
    • C'est un bon début, mais il a besoin de beaucoup plus. E. g. la nouvelle entrée de l'élément attributs / valeurs (type="date").
    • j'ai eu du mal avec les 2 options ici. --doctype "<!DOCTYPE HTML>" et --sort-attributes alpha ne serait pas fonctionner pour une raison quelconque
    • J'ai aussi eu du mal à rentrer en ordre de travail. Mon découlant des options sur ubuntu 14.10 ont été: bien rangé --bien rangé marque de non -tiret --tiret-espace 4 -wrap 0 --nouvelle-blocklevel-tags 'article,en-tête,pied de page' --nouvelle-ligne-tags de la vidéo,de l'audio,de la toile,ruby,rt,rp' --break-before-br oui --sort-attributs alpha --verticale de l'espace-oui
    InformationsquelleAutor Mr. Shiny and New 安宇
  3. 9

    Copié à partir d'un site je l'ai fait à l'aide de HTML5 qui est validée comme bon HTML5 sur toutes les pages grâce à cet extrait de code (PHP, dans ce cas, mais les options et la logique est la même pour toutes les langues utilisées):

        $options = array(
        'hide-comments' => true,
        'tidy-mark' => false,
        'indent' => true,
        'indent-spaces' => 4,
        'new-blocklevel-tags' => 'article,header,footer,section,nav',
        'new-inline-tags' => 'video,audio,canvas,ruby,rt,rp',
        'new-empty-tags' => 'source',
        'doctype' => '<!DOCTYPE HTML>',
        'sort-attributes' => 'alpha',
        'vertical-space' => false,
        'output-xhtml' => true,
        'wrap' => 180,
        'wrap-attributes' => false,
        'break-before-br' => false,
    );

    $buffer = tidy_parse_string($buffer, $options, 'utf8');
    tidy_clean_repair($buffer);
    //Fix a tidy doctype bug
    $buffer = str_replace('<html lang="en" xmlns="http://www.w3.org/1999/xhtml">', '<!DOCTYPE HTML>', $buffer);
    • Travailler avec <audio> balises, qui utilisent vide <source> les balises, j'ai trouvé, vous aurez également besoin de cette option de configuration: 'new-empty-tags' => 'source'
    • Merci, @WesC, j'ai édité ma réponse en conséquence.
    InformationsquelleAutor Philipp
  4. 2

    Si vous utilisez Haml que votre nanoc-filtre, votre code html sera automatiquement joli imprimé. Vous pouvez définir la sortie html5 comme une option.

    InformationsquelleAutor Dan Brendstrup