Cách in đẹp hoặc nén HTML, CSS và JavaScript
Thụt lề hoặc thu gọn markup, style và script tại chỗ — bộ định dạng, không phải bundler, linter hay máy chủ plugin Prettier.
Ba trang, cùng ý
Định dạng HTML tại /tools/html-formatter, Định dạng CSS tại /tools/css-formatter và Định dạng JS tại /tools/js-formatter đều in đẹp hoặc nén trên trình duyệt. In đẹp thêm thụt lề để thẻ, rule hoặc khối dễ đọc. Nén bỏ khoảng thừa cho bản dán nhỏ hơn. Đây không phải webpack, không phải ESLint, không phải parser HTML5 đầy đủ — thẻ void dùng danh sách nhỏ; markup gãy có thể thụt lệch.
Các bước
1) Mở bộ định dạng đúng ngôn ngữ (đừng chạy CSS qua trang JS). 2) Dán đoạn. 3) Chọn in đẹp hoặc nén. 4) Sao chép kết quả. JS sai hoặc dở dang vẫn có thể “định dạng” như chữ; đây không phải validator cú pháp kiểu Kiểm tra JSON. Định dạng SQL và Định dạng XML dành cho những ngôn ngữ đó.
Ví dụ làm việc
HTML: <div><p>Hi</p></div> in đẹp thành dòng lồng. CSS: a{color:red} in đẹp rule; nén lại một dòng. JS: function x(){return 1} thành thụt lề hoặc một dòng. Nén bundle production có thể phá source map bạn không có ở đây — dùng cho đoạn nhỏ, không phải xuất bản app đã minify.
Entity HTML so với định dạng HTML
Mã hóa HTML tại /tools/html-encode-decode đổi < thành < để chữ nằm trong markup. Đó không phải thụt lề. Markdown → HTML sinh HTML từ Markdown; định dạng kết quả ở đây nếu cần thụt. Định dạng JSON dành cho JSON, không phải object literal JS khóa không ngoặc.
Liên quan
Định dạng JSON, SQL, XML, Xem trước Markdown. Bộ tạo CSS (gradient, bóng, viền) phát CSS rồi bạn có thể định dạng. Đổi màu và Chọn màu cung cấp giá trị cho CSS đó.
Quyền riêng tư
Mã nguồn ở lại trình duyệt. Liên quan: /tools/css-formatter, /tools/js-formatter, /tools/html-encode-decode. Đừng dán mã độc quyền trên máy công cộng.