Gesucht: Befehlszeile HTML5 Verschönerer [geschlossen]

75

Gesucht

Ein Befehlszeilen-HTML5-Verschönerer, der unter Linux ausgeführt wird.

Eingang

Verstümmelter, hässlicher HTML5-Code. Möglicherweise das Ergebnis mehrerer Vorlagen. Du liebst es nicht, es liebt dich nicht.

Ausgabe

Pure Schönheit. Der Code ist schön eingerückt, hat genügend Zeilenumbrüche und kümmert sich um Leerzeichen. Anstatt es in einem Webbrowser anzuzeigen, möchten Sie den Code direkt auf Ihrer Website anzeigen.

Verdächtige

  • ordentlich macht zu viel (zum Teufel, es ändert meinen Doctype!), und es funktioniert nicht gut mit HTML5. Vielleicht gibt es eine Möglichkeit , es zusammenarbeiten und nicht Alter zu machen alles ?
  • vim macht zu wenig. Es werden nur Einrückungen vorgenommen. Ich möchte, dass das Programm Zeilenumbrüche hinzufügt und entfernt und mit dem Leerzeichen in Tags spielt.

TOT ODER LEBENDIG!

html command-line indentation pretty-print blinry
quelle
Sollte dies nicht eine Superuser-Frage sein?
Jonno_FTW
16
Ich würde sagen, Sie haben die richtige Seite dafür. Ich bin mir nicht sicher, wie viele Leute in SU tatsächlich HTML verwenden, geschweige denn HTML5.
Tim Post
1
Ich hatte das gleiche Problem und schrieb schließlich eine neue Ruby-Bibliothek, in der keine Utils von Drittanbietern kompiliert werden mussten (ich hatte Probleme, Tidy mit Rails zum Laufen zu bringen) und die sich nur auf HTML5 konzentrierte, nicht auf XML, XHTML oder HTML 4. Es ist noch nicht perfekt, hat aber in allen Projekten, die ich verwendet habe, gut funktioniert. Bitte werfen Sie einen Blick auf jarijokinen.com/html5-beautifier
Jari Jokinen
2
Verwenden Sie XHTML5 und Sie könnenxmllint --format
Janus Troelsen
Sie können auch polyglotte HTML5-Dokumente monkeypatchen : 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. Dies sollte mit Eingabedokumenten mit Doctype in Zeile 1, aber ohne XML-Prolog funktionieren. Ausgaben im gleichen Stil.
Janus Troelsen

Antworten:

27

HTML Tidy wurde vom w3c gegabelt und unterstützt jetzt die HTML5-Validierung.

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

mhansen
quelle
3
Ab Juli 2014 scheint dieses Projekt für zwei Jahre ins Stocken geraten zu sein
Eradman
2
Ab April 2015 scheint es zu leben. Obwohl Sie immer noch Binärdateien aus dem Quellcode selbst erstellen müssen, indem Sie das Git-Repo ziehen.
Parthian Shot
2
Ab Juni 2016 können Sie mit Homebrew unter OSX installieren.
HellaMad
1
Ab Juli 2017 können Sie apt-get install tidyauf Debian
Djangonaut
19

Ich vermute, dass aufgeräumt werden kann, um mit den richtigen Befehlszeilenparametern zu arbeiten.

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

Sie können einen beliebigen Doctype angeben, neue Block-, Inline- und leere Tags hinzufügen und viele Reinigungsoptionen für das Aufräumen ein- und ausschalten.

Je nachdem, was Sie "verschönern" möchten, können Sie wahrscheinlich anständige Ergebnisse erzielen. Es wird wahrscheinlich nicht in der Lage sein, einige der fortgeschritteneren Dinge wie das Umschreiben des HTML-Inhalts zu tun, um falsche Elemente zu beseitigen oder sie zu kombinieren, wenn es sie nicht erkennt.

Mr. Shiny und New 安 宇
quelle
14
Wie wäre es mit 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 (Haftungsausschluss - ich habe kein HTML5 verwendet und nur ein paar neue Tags von w3schools.com/html5/html5_reference.asp in die Liste kopiert, indem ich erraten habe, welche block / inline waren, also bitte nach Bedarf anpassen.)
Stobor
Dies scheint die beste Option zu sein. Ein großes Lob auch an Stobor!
Blinry
Dies ist ein guter Anfang, aber es braucht noch viel mehr. ZB neue Eingabeelementattribute / -werte (Typ = "Datum").
Dave1010
2
Ich hatte Probleme mit 2 der Optionen hier. --doctype "<!DOCTYPE HTML>"und --sort-attributes alphawürde aus irgendeinem Grund nicht funktionieren
Ankur
Ich hatte auch Mühe, ordentlich zu arbeiten. Meine resultierenden Optionen auf Ubuntu 14.10 waren: Aufräumen - Aufräumen-Markieren Keine -Einrückung --Einrückungszeichen 4 -Wrap 0 --New-Blocklevel-Tags 'Artikel, Kopfzeile, Fußzeile' --New-Inline-Tags 'Video, Audio, Leinwand, Rubin, RT, RP '- Break-Before-Br Ja - Sortierattribute Alpha - Vertical-Space Ja
aaaaaa
9

Von einer Live-Website kopiert Ich habe HTML5 verwendet, das dank dieses Snippets auf allen Seiten als korrektes HTML5 validiert ist (in diesem Fall PHP, aber die Optionen und die Logik sind für jede verwendete Sprache gleich):

    $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);
Philipp
quelle
Um mit <audio>Tags zu arbeiten, die leere <source>Tags verwenden, benötigen Sie außerdem diese Konfigurationsoption:'new-empty-tags' => 'source'
Wes Cossick
1
Danke, @WesC, ich habe meine Antwort entsprechend bearbeitet.
Philipp
2

Wenn Sie Haml als Nanoc-Filter verwenden, wird Ihr HTML-Code automatisch hübsch gedruckt. Sie können die HTML5-Ausgabe als Option festlegen.

Dan Brendstrup
quelle