§

Options

Beautify options
§

Επικόλληση HTML

§

Ομορφοποιημένο HTML

html

Προγραμματιστές front-end στις ΗΠΑ και το Ηνωμένο Βασίλειο χρησιμοποιούν ένα εργαλείο ομορφοποίησης HTML όταν ανοίγουν τον πηγαίο κώδικα μιας σελίδας και βρίσκουν τα πάντα συμπιεσμένα σε δύο γραμμές.

Πώς λειτουργεί η ομορφοποίηση HTML

Το εργαλείο ομορφοποίησης διαβάζει τη σήμανσή σας ετικέτα προς ετικέτα, παρακολουθεί πόσο βαθιά είναι ένθετο κάθε στοιχείο και το αναπαράγει με συνεπή εσοχή.

  1. Ανάλυση ετικετών. Η βιβλιοθήκη σαρώνει την είσοδό σας σε μια ροή tokens: ετικέτες ανοίγματος, κλεισίματος, περιεχόμενο κειμένου, σχόλια και περιεχόμενο μπλοκ script και style.
  2. Παρακολούθηση ένθεσης. Καθώς διατρέχει τη ροή tokens, το εργαλείο διατηρεί ένα τρέχον επίπεδο εσοχής. Κάθε ετικέτα ανοίγματος ωθεί το επίπεδο βαθύτερα.
  3. Εφαρμογή επιλογών. Η επιλογή εσοχής σας ορίζει το πλάτος ενός επιπέδου. Η αναδίπλωση στη στήλη σπάει μεγάλες γραμμές.
  4. Αναπαραγωγή σήμανσης. Τέλος, ο μορφοποιητής εκτυπώνει ξανά τις ετικέτες με την εσοχή και τις αλλαγές γραμμής που έχει υπολογίσει.

Γιατί να ομορφοποιήσετε 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 από την πλευρά του προγράμματος περιήγησης σας δίνει αναγνώσιμη σήμανση.