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!

— 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

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