Trải nghiệm Code Editor Live Preview trên ARTRU

Giới thiệu Code Editor

Vì hay lượn lờ trên các group về UI/UX, HTML, CSS, JS tôi thấy có nhiều bạn ở đây muốn sửa lỗi code, hay chia sẻ một vài đoạn code hay cho mọi người đều phải chụp màn hình hoặc upload lên github, codepen,...

Lấy cảm hứng từ Fox Theme, tôi đã tạo một Code Editor có tính năng tương tự và thêm thắt một vài thứ.

Bạn nghĩ tôi tự viết Code Editor này ư? không, toàn bộ tình năng này tôi đều tham khảo từ Chat-AI (Bard, Bing, ChatGPT).

Link trải nghiệm ARTRU Code Editor.

Các tính năng

Real-time Preview

Cửa sổ Preview sẽ tự động update mỗi khi nội dung code thay đổi. Hoặc nhấn vào nút Run để refresh lại phần Preview.

Copy Code

Nhấn vào nút Copy Code để lưu code vào Clipboard.

Beautify Code

Giúp căn chỉnh, format lại code cho ngay hàng thẳng lối.

F1

Nhấn F1 trên bàn phím hoặc button trên thanh công cụ để mở hộp công cụ Command.

Ctrl + ,

Nhấn Ctrl + , trên bàn phím hoặc button trên thanh công cụ để mở Settings Menu.

Create Link Code

Đây có lẻ là tính năng tôi thích nhất.

Giờ đây, bạn có thể sử dụng tính năng này để tạo Link chia sẻ ngay lập tức mà không cần phải tạo tài khoản như github, codepen để lưu nữa.

Nhược điểm, là không thể tạo Link nếu code quá dài.