Trình định dạng HTML - Làm đẹp và thu nhỏ HTML trực tuyến miễn phí

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 — trình định dạng nhận diện các khối script và style, rồi định dạng nội dung theo quy tắc JS hoặc CSS phù hợp, nhờ đó script nội tuyến vẫn hợp lệ và stylesheet vẫn dễ đọc. Thẻ tự đóng, phần tử rỗng và thuộc tính có không gian tên (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ó thao tác tải lên. Trình định dạng chạy hoàn toàn trong trình duyệt, nên bạn có thể dán an toàn mẫu trang nội bộ, bản nháp email hoặc HTML chứa dữ liệu riêng tư mà không có nội dung nào rời khỏi thiết bị.

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.

Không — HTML Prettify chạy hoàn toàn trong trình duyệt của bạn, vì vậy những gì bạn dán sẽ không bao giờ rời khỏi máy bạn đang sử dụng. Điều đó quan trọng nếu bạn đang kiểm tra thứ gì đó có chứa mã thông báo, khóa hoặc dữ liệu khách hàng. Đóng tab là đủ để xóa nó.

Lỗi chỉ ra vị trí đầu tiên không thể phân tích được, lỗi này thường xảy ra ngay sau lỗi thực sự chứ không phải lỗi đó - thiếu dấu phẩy, dấu ngoặc kép hoặc dấu ngoặc không đóng hoặc dấu ngoặc kép thông minh được dán từ tài liệu thay vì dấu ngoặc thẳng. Trước tiên hãy kiểm tra dòng phía trên vị trí được báo cáo.

Không cho cả hai. HTML Prettify là miễn phí, bản tải xuống của bạn không có hình mờ và cuối cùng không có yêu cầu gì — không có lý do gì để bạn hoàn thành công việc và sau đó phát hiện ra rằng nó phải tốn tiền.

Không — HTML Prettify chạy trong trình duyệt trên máy tính để bàn và điện thoại. Không cần cài đặt gì, không cần dùng thử để bắt đầu và không cần mua giấy phép trước khi bạn có thể xem liệu nó có đáp ứng được những gì bạn cần hay không. Hãy thử nó trên tập tin mà bạn thực sự đang gặp khó khăn thay vì một tập tin mẫu.