Cách làm đẹp HTML hoạt động
Trình làm đẹp đọc markup của bạn từng thẻ một, theo dõi mức độ lồng nhau của mỗi phần tử và phát lại với thụt lề nhất quán. Nó không bao giờ thay đổi những gì trang render — chỉ thay đổi cách mã nguồn được trình bày.
- Phân tích các thẻ. Thư viện quét đầu vào của bạn thành một luồng token: thẻ mở, thẻ đóng, nội dung văn bản, chú thích, và nội dung của các khối script và style. Các giá trị thuộc tính có dấu nháy kép và phần thân của các phần tử pre và textarea được xử lý như các đơn vị đơn, vì vậy khoảng trắng bên trong chúng không bị đụng đến.
- Theo dõi lồng nhau. Khi đi qua luồng token, trình làm đẹp duy trì mức thụt lề hiện tại. Mỗi thẻ mở không tự đóng làm sâu thêm mức một bước; mỗi thẻ đóng tương ứng đưa nó về. Độ sâu đó quyết định bao nhiêu đơn vị thụt lề đứng trước mỗi dòng bạn nhận lại.
- Áp dụng tùy chọn của bạn. Lựa chọn thụt lề của bạn (2 dấu cách, 4 dấu cách hoặc tab) đặt độ rộng của một mức. Giá trị ngắt-tại-cột phá vỡ các dòng dài của thuộc tính hoặc văn bản khi chúng vượt quá cột bạn chọn. Giới hạn dòng trống thu gọn các chuỗi dài dòng trống xuống giới hạn bạn đặt.
- Phát lại markup. Cuối cùng trình định dạng in các thẻ trở lại với thụt lề và xuống dòng đã tính toán. Nếu định dạng nội tuyến được bật, nội dung của mỗi khối style chạy qua trình định dạng CSS và mỗi khối script qua trình định dạng JS, vì vậy code được nhúng thẳng hàng với markup xung quanh nó.
Tại sao làm đẹp HTML
- Đọc các trang đã rút gọn. HTML production được gửi không có line break để tiết kiệm byte. Làm đẹp khôi phục cấu trúc để bạn có thể tìm phần bạn cần, phát hiện thẻ đóng bị thiếu và theo dõi cách tài liệu thực sự lồng nhau.
- Dọn dẹp các template không nhất quán. Markup do nhiều người chỉnh sửa bị lẫn lộn thụt lề và vị trí thẻ. Một lần qua trình làm đẹp chuẩn hóa toàn bộ file, vì vậy commit tiếp theo hiển thị thay đổi bạn thực hiện chứ không phải một bức tường whitespace được định dạng lại.
- Công cụ này không làm chậm trang của bạn. Hầu hết các trình định dạng trực tuyến tải toàn bộ thư viện ngay khi bạn mở trang. Công cụ này lazy-load js-beautify chỉ khi bạn nhấp Làm đẹp hoặc bật Chế độ trực tiếp, vì vậy mở trang chỉ tốn vài kilobyte thay vì vài trăm, và trang vẫn nhanh.
- Không có gì rời khỏi trình duyệt của bạn. Mọi thứ chạy trên thiết bị của bạn. Markup của bạn không bao giờ được tải lên server, điều này quan trọng khi trang thuộc về khách hàng, chứa các URL nội bộ, hoặc thuộc phạm vi thỏa thuận bảo mật bạn đã ký.
Ứng dụng phổ biến
Làm đẹp HTML xuất hiện bất cứ khi nào ai đó cần đọc markup không được viết để đọc.
- Kiểm tra trang live: dán source đã rút gọn từ View Source để tìm markup đằng sau một lỗi layout mà bạn không thể tái tạo ở local.
- Dọn dẹp output CMS: định dạng lại template mà một page builder đã xuất trên một dòng trước khi bạn commit lại vào repository.
- Kiểm tra khả năng tiếp cận và SEO: mở rộng tài liệu để kiểm tra thứ tự heading, cấu trúc landmark và các thuộc tính alt so với DOM thực.
Một ví dụ thực tế
Lấy một snippet đã rút gọn: <div><p>hi</p><span>x</span></div>. Dán vào trên với thụt lề đặt là 2 dấu cách, sau đó nhấp Làm đẹp. Bạn nhận lại một khối dễ đọc: <div> trên dòng riêng, <p>hi</p> và <span>x</span> mỗi cái thụt lề một mức bên dưới, và </div> tương ứng thẳng hàng bên dưới. Chuyển thụt lề thành Tab và mỗi mức chuyển từ hai dấu cách sang ký tự tab. Thêm khối <style>a{color:red}</style>, bật "Cũng định dạng CSS & JS nội tuyến," và quy tắc mở rộng ra các dòng riêng được thụt lề thay vì giữ nguyên trên một dòng.
FAQ
Công cụ này chạy trong trình duyệt của tôi không?
Có. Thư viện js-beautify được lazy-load lần đầu tiên bạn nhấp Làm đẹp hoặc bật Chế độ trực tiếp, sau đó được cache. Markup của bạn không bao giờ rời khỏi trang — không có round-trip đến server và không có upload.
Làm đẹp có thay đổi cách trang của tôi render không?
Không. Trình làm đẹp chỉ thêm và xóa khoảng trắng và xuống dòng giữa các thẻ. Trình duyệt bỏ qua khoảng trắng đó khi xây dựng trang, vì vậy kết quả render là giống hệt. Điều cần lưu ý là nội dung nhạy cảm với khoảng trắng bên trong pre, textarea hoặc các phần tử inline, mà formatter cố ý để không đụng đến.
Toggle CSS và JS nội tuyến làm gì?
Khi tắt, nội dung của các khối style và script được giữ nguyên chính xác như bạn đã dán. Bật nó lên và CSS bên trong mỗi khối style chạy qua CSS formatter và JavaScript bên trong mỗi khối script qua JS formatter, vì vậy code được nhúng được thụt lề để khớp với markup xung quanh nó.
"Ngắt tại cột" làm gì?
Nó đặt độ dài dòng mà ở đó một thẻ có nhiều thuộc tính, hoặc một chuỗi văn bản dài, bị ngắt thành nhiều dòng. Để 0 để giữ mỗi phần tử trên một dòng dù dài bao nhiêu. Đặt thành 80 hoặc 120 và formatter sẽ ngắt bất cứ thứ gì vượt quá cột đó, giúp các phần tử rộng dễ đọc trong một editor hẹp.
Làm đẹp HTML phía trình duyệt cho bạn markup dễ đọc mà không cần bước build hay upload. Dán trang đã rút gọn hoặc lộn xộn, chọn thụt lề và độ rộng ngắt dòng, quyết định có định dạng lại CSS và JS nội tuyến không, rồi sao chép hoặc tải về kết quả. Không có gì rời khỏi thiết bị của bạn, không có tài khoản và thư viện chỉ tải khi bạn yêu cầu — vì vậy mở trang này chỉ tốn vài kilobyte, không phải một megabyte.