Với dân lập trình, Codepen là một khái niệm không còn xa lạ, thậm chí là được sử dụng như một trình soạn thảo code được yêu thích nhất. Nếu như bạn là người mới bắt đầu làm quen với ngôn ngữ code và muốn thử sức với Codepen thì một số thủ thuật hay ho trong bài viết sẽ hữu ích dành cho các bạn.
Để sử dụng Codepen được hiệu quả nhất, các bạn nên bỏ túi một số kinh nghiệm sử dụng Codepen sau đây:
1. Run Button
Thủ thuật sử dụng Codepen
Sẽ rất bất tiện nếu như đoạn code của bạn tự động refresh khi bạn đang code bởi điều này rất khó để bạn có thể lấy lại đoạn code cũ. Vì vậy, các bạn có thể bỏ phần này tại “Auto Update Preview”, khi đó, các bạn sẽ thấy nút Run thay thế. Chỉ cần click vào nút này, các bạn sẽ thấy kết quả hiển thị trước.
2. Number Increment/Decrement – Số tăng và giảm dần
Bạn hoàn toàn có thể tăng hoặc giảm số code mà không cần phải gõ lại số mới bằng cách bôi đen số code cần thay đổi và sử dụng phím Ctrl/Cmd và mũi tên lên, xuống.
3. Multiple Cursors
Chỉ cần giữ phím Ctrl/Cmd để đặt con trỏ tại nhiều vị trí code và chỉnh sửa đồng thời các điểm đó cùng một lúc. Đây sẽ là thao tác phù hợp để các bạn thay đổi code số lượng lớn.
4. Different Colored Console Messages – Tin nhắn Bảng điều khiển màu khác nhau
Giao diện Codepen cho phép các bạn có thể điều khiển console mà không cần phải sử dụng đến các công cụ khác, công việc của bạn đó là nhấp vào nút console trên thanh taskbar.
5. Export – Xuất dữ liệu
Khi đã lưu đoạn code, các bạn có thể xuất đoạn code ra file ZIP bằng cách nhấp vào nút export dưới màn hình, file này sẽ chứa toàn bộ đoạn code HTML, CSS và Javascript.
6. Find & Replace – Tìm & Thay thế
Cũng giống như dùng Word, các bạn có thể tìm kiếm đoạn code bằng tổ hợp phím Ctrl /Cmd + F. Hoặc có thể thay thế hàng loạt đoạn code bằng tổ hợp phím Ctrl/Cmd + Shift + F.
7. Emmet Tab Trigger – Kích hoạt Emmet Tab
Thủ thuật với Codepen thông dụng
Để sử dụng công cụ mở rộng Emmet Tab, bạn chỉ cần nhanh chóng gõ tên viết tắt vào trình soạn thảo code, nhấn Tab chính, các mã hoàn chỉnh sẽ xuất hiện cùng một lúc.
8. Get Individual Code Files – Nhận mã số tập tin cá nhân
Bạn sử dụng Export và có được cả 3 tập tin là HTML, CSS và Java nhưng nếu bạn chỉ quan tâm đến một hay hai tập tin, các bạn có thể nhấp vào nút Change View ở góc trên phía bên phải và kéo xuống, các bạn sẽ thấy liên kết tải riêng lẻ các file.
Qua bài viết, các bạn đã biết thêm được trình soạn code thông dụng – Codepen là gì và một số thủ thuật hay được vận dụng nhiều trong quá trình sử dụng.