Cách dùng Trình soạn thảo HTML online
- Viết markup trong HTML, kiểu dáng trong CSS và script trong JavaScript.
- Bản xem trước sẽ cập nhật khi bạn gõ (tắt Tự động chạy nếu script nặng và nhấn Chạy hoặc Ctrl+Enter).
- Kiểm tra output
console.logvà lỗi ở phía dưới bản xem trước. - Nhấn Tải về .html để lưu toàn bộ thành một file.
Sân chơi HTML nhanh gọn
Đôi khi bạn chỉ cần thử nhanh một đoạn code: kiểm tra một thuộc tính CSS hoạt động thế nào, gỡ lỗi bố cục, làm mẫu một thành phần hoặc chạy thử code từ một bài hướng dẫn. Trình soạn thảo này cung cấp ba khung soạn thảo quen thuộc và bản xem trước trực tiếp mà không cần tài khoản, dự án hay bước build. Công việc của bạn được lưu trong trình duyệt (local storage), nên vẫn còn đó khi bạn quay lại.
Cách bản xem trước được cô lập
Kết quả chạy trong một <iframe sandbox> không có quyền allow-same-origin. Nhờ vậy, trang có một origin riêng biệt: script vẫn chạy được, dùng alert và form, nhưng không thể đọc cookie hay storage của trang này. Đây cũng là cách tiếp cận mà CodePen và JSFiddle sử dụng.
Mẹo sử dụng
- Tab sẽ chèn hai khoảng trắng thay vì chuyển focus khỏi trình soạn thảo.
- Tải thư viện từ CDN bằng thẻ thông thường trong khung HTML, ví dụ
<script src="https://cdn.jsdelivr.net/npm/…"></script>. - Lỗi runtime và promise bị reject sẽ hiện trong bảng console kèm số dòng.
- File tải về chứa HTML, CSS và JS của bạn trong một tài liệu duy nhất, sẵn sàng mở cục bộ hoặc tải lên máy chủ.
Ngoài sân chơi
Làm gọn code với HTML formatter, CSS formatter và JavaScript formatter, hoặc rút gọn cho môi trường production bằng HTML minifier và JavaScript minifier.
Cũng được tìm dưới tên: html editor online, xem trước html online, chạy code html online, preview html css js, trình chạy html css js, công cụ thử code html, test code html online, jsfiddle thay thế.
Các công cụ dùng kèm tốt với Trình soạn thảo HTML online
- Markdown sang HTML — Viết hoặc dán Markdown để nhận HTML sạch ngay lập tức, kèm bản xem trước đã được làm sạch, bảng GitHub-flavored, danh sách việc cần làm và khối code có rào chắn.
- Nén CSS — Dán stylesheet vào để thu nhỏ ngay lập tức.
- Định dạng SQL — Dán một truy vấn hoặc cả một file migration để nhận SQL dễ đọc: mỗi mệnh đề một dòng, các join được căn thẳng hàng và kiểu chữ từ khóa nhất quán, theo đúng cú pháp của cơ sở dữ liệu bạn dùng.
- Kiểm tra Regex — Nhập mẫu và xem các kết quả khớp được tô sáng ngay trong văn bản thử nghiệm.
Câu hỏi thường gặp
Code của tôi có được lưu không?
Tôi có thể dùng thư viện bên ngoài không?
<script> hoặc <link> trỏ đến CDN trong khung HTML.