Πώς λειτουργεί η ομορφοποίηση HTML
Το εργαλείο ομορφοποίησης διαβάζει τη σήμανσή σας ετικέτα προς ετικέτα, παρακολουθεί πόσο βαθιά είναι ένθετο κάθε στοιχείο και το αναπαράγει με συνεπή εσοχή.
- Ανάλυση ετικετών. Η βιβλιοθήκη σαρώνει την είσοδό σας σε μια ροή tokens: ετικέτες ανοίγματος, κλεισίματος, περιεχόμενο κειμένου, σχόλια και περιεχόμενο μπλοκ script και style.
- Παρακολούθηση ένθεσης. Καθώς διατρέχει τη ροή tokens, το εργαλείο διατηρεί ένα τρέχον επίπεδο εσοχής. Κάθε ετικέτα ανοίγματος ωθεί το επίπεδο βαθύτερα.
- Εφαρμογή επιλογών. Η επιλογή εσοχής σας ορίζει το πλάτος ενός επιπέδου. Η αναδίπλωση στη στήλη σπάει μεγάλες γραμμές.
- Αναπαραγωγή σήμανσης. Τέλος, ο μορφοποιητής εκτυπώνει ξανά τις ετικέτες με την εσοχή και τις αλλαγές γραμμής που έχει υπολογίσει.
Γιατί να ομορφοποιήσετε HTML
- Ανάγνωση συμπιεσμένων σελίδων. Το HTML παραγωγής αποστέλλεται χωρίς αλλαγές γραμμής. Η ομορφοποίηση επαναφέρει τη δομή.
- Τακτοποίηση ασυνεπών προτύπων. Η σήμανση που έχει επεξεργαστεί πολλά άτομα αποκτά μικτή εσοχή. Η ομορφοποίηση κανονικοποιεί το αρχείο.
- Δεν επιβραδύνει τη σελίδα σας. Φορτώνει το js-beautify μόνο όταν κάνετε κλικ στο Ομορφοποίηση ή ενεργοποιείτε τη Ζωντανή λειτουργία.
- Τίποτα δεν εγκαταλείπει το πρόγραμμα περιήγησής σας. Το εργαλείο λειτουργεί εξ ολοκλήρου στη συσκευή σας. Η σήμανσή σας δεν μεταφορτώνεται ποτέ σε διακομιστή.
Κοινές εφαρμογές
Η ομορφοποίηση HTML χρειάζεται όποτε κάποιος πρέπει να διαβάσει σήμανση που δεν γράφτηκε για να διαβαστεί.
- Επιθεώρηση ζωντανής σελίδας: επικολλήστε τον συμπιεσμένο κώδικα από το View Source.
- Καθαρισμός εξόδου CMS: αναμορφώστε ένα πρότυπο που εξήχθη σε μία γραμμή.
- Αναθεωρήσεις προσβασιμότητας και SEO: επεκτείνετε το έγγραφο για έλεγχο δομής.
Ένα παράδειγμα
Πάρτε ένα συμπιεσμένο απόσπασμα: <div><p>hi</p><span>x</span></div>. Επικολλήστε το παραπάνω με εσοχή 2 κενών και κάντε κλικ στο Ομορφοποίηση.
FAQ
Αυτό λειτουργεί στο πρόγραμμα περιήγησής μου;
Ναι. Η βιβλιοθήκη js-beautify φορτώνεται την πρώτη φορά που κάνετε κλικ στο Ομορφοποίηση.
Θα αλλάξει η ομορφοποίηση την απόδοση της σελίδας μου;
Όχι. Ο μορφοποιητής προσθέτει και αφαιρεί μόνο κενά και αλλαγές γραμμής μεταξύ ετικετών.
Τι κάνει η εναλλαγή inline CSS και JS;
Αν ενεργοποιηθεί, το CSS και το JavaScript μέσα σε μπλοκ style και script μορφοποιούνται επίσης.
Τι σημαίνει «αναδίπλωση στη στήλη»;
Ορίζει το μήκος γραμμής στο οποίο μια ετικέτα με πολλές ιδιότητες σπάει σε πολλές γραμμές.
Η ομορφοποίηση HTML από την πλευρά του προγράμματος περιήγησης σας δίνει αναγνώσιμη σήμανση.