Untangle messy HTML into clean, indented markup

Dán bất kỳ HTML nào — kể cả kết quả rút gọn một dòng từ quy trình build — và công cụ sẽ định dạng lại với thụt lề đúng chuẩn, mỗi thẻ một dòng và khoảng trắng nhất quán. Chọn thụt lề 2, 4 hoặc 8 khoảng trắng. Kết quả sẵn sàng để dán vào trình chỉnh sửa của bạn hoặc vào bình luận review code.

Prettify mở rộng HTML để dễ đọc: mỗi thẻ trên một dòng riêng, các phần tử con lồng nhau được thụt lề, các dòng trống giữa các phần được giữ nguyên. Minify loại bỏ chú thích, gộp các chuỗi khoảng trắng và xóa dấu xuống dòng để tệp nhỏ gọn hơn. Dùng prettify để chỉnh sửa và rà soát, dùng minify để triển khai sản phẩm.

Không — js-beautify (công cụ vận hành bên trong) phát hiện các khối script và style rồi định dạng nội dung của chúng theo đúng quy tắc JS hoặc CSS, nên các script inline vẫn hợp lệ và stylesheet vẫn dễ đọc. Các thẻ tự đóng, phần tử rỗng và thuộc tính có namespace (svg:xmlns, xlink:href) đều được xử lý chính xác.

Công cụ xử lý tốt HTML thuần và các mẫu giống HTML, nhưng JSX thuần túy (biểu thức trong dấu ngoặc nhọn, fragment, thẻ component viết hoa) sẽ được phân tích như HTML và có thể gặp một vài lỗi hình thức nhỏ. Đối với mã đặc thù theo framework, chúng tôi khuyên dùng Prettier được cấu hình cho dialect của bạn; còn với HTML thô, tệp .htm và tệp mẫu thì công cụ của chúng tôi là hoàn hảo.

Không có quá trình tải lên nào. Trình định dạng chạy hoàn toàn trong trình duyệt của bạn bằng js-beautify, nên bạn có thể yên tâm dán các mẫu trang nội bộ, email nháp hoặc HTML chứa dữ liệu riêng tư mà không có gì rời khỏi thiết bị của bạn.

Nén gọn loại bỏ chú thích HTML, gộp mọi khoảng trắng giữa các thẻ thành một dấu cách và xóa các dấu xuống dòng. Kết quả là HTML hiển thị y hệt từng byte nhưng thường nhỏ hơn 10-30%. Kết hợp với gzip trên máy chủ, cách này giảm đáng kể dung lượng trang ban đầu trên các trang nhiều nội dung.

Có — nhấp Tải xuống để lưu kết quả đã làm đẹp thành output.html hoặc kết quả đã thu gọn thành output.min.html. Tệp được mã hóa UTF-8 nên hoạt động tốt như nhau với nội dung tiếng Anh, Kirin, CJK và ngôn ngữ viết từ phải sang trái.

Đây là một tiện ích nhỏ chỉ chạy trên trình duyệt — không tốn chi phí lưu trữ — nên chúng tôi cung cấp miễn phí như một phần trong bộ công cụ dành cho nhà phát triển. Không quảng cáo, không theo dõi đầu ra, không giới hạn dung lượng tệp ngoài mức bộ nhớ mà trình duyệt của bạn có thể chứa.

Chế độ Làm đẹp cho phép bạn chọn thụt lề 2, 4 hoặc 8 dấu cách. Chọn độ rộng mà trình chỉnh sửa hoặc phong cách mã của bạn dùng, rồi sao chép kết quả hoặc tải về dưới dạng output.html để định dạng được đưa thẳng vào dự án của bạn.

Bộ chọn thụt lề (2, 4 hoặc 8 khoảng trắng) chỉ áp dụng trong chế độ Prettify, vì Minify vốn được thiết kế để loại bỏ mọi khoảng trắng và ngắt dòng — không còn gì để thụt lề. Chuyển lại về Prettify để thấy độ rộng thụt lề có hiệu lực trở lại.

Khi bạn dán hoặc chỉnh sửa, công cụ tự động chạy kiểm tra cấu trúc và liệt kê mọi thẻ chưa đóng, không khớp hoặc thẻ đóng thừa ngay dưới bảng kết quả — không cần nút riêng. Thông báo màu xanh "No structural issues found" xác nhận mã đã đúng cấu trúc.

Dùng chế độ Làm đẹp với thụt lề 2 khoảng trắng — đây là quy ước phổ biến nhất và giữ cho diff gọn gàng — rồi kiểm tra bảng vấn đề cấu trúc để xác nhận không còn thẻ nào chưa đóng. Sau khi rà soát, chuyển sang chế độ Nén trước khi đưa lên production để loại bỏ khoảng trắng thừa.

Có — kéo tệp .html, .htm hoặc .xhtml vào vùng tải lên, hoặc nhấp để duyệt, và nội dung của nó tải thẳng vào hộp nhập đúng như thể bạn đã dán vào. Từ đó, Prettify, Minify, độ rộng thụt lề và trình kiểm tra cấu trúc đều hoạt động y hệt dù mã đến từ một tệp hay từ thao tác dán.

Có — khi có đầu ra, một nút Copy xuất hiện bên cạnh bảng đầu ra và khu vực thao tác chính. Nhấp vào nó sẽ sao chép kết quả Prettify hoặc Minify hiện tại vào bảng nhớ tạm ngay lập tức (nó hiển thị ngắn gọn 'Copied!' để xác nhận), để bạn có thể dán trực tiếp vào trình chỉnh sửa của mình hoặc một bình luận đánh giá mã mà không cần lưu một tệp .html trung gian.