Cách sử dụng tiện ích Làm nổi bật – Code Highlight

1. Các tiện ích Widgets trong Elementor

Widgets hay các tiện ích trong ngữ cảnh của Elementor (và rộng hơn là WordPress) là các khối nội dung có thể tái sử dụng, được thiết kế để thực hiện một chức năng hoặc hiển thị một loại thông tin cụ thể.

Khi bạn nhấp vào một widget trong khu vực chỉnh sửa chính, các tùy chọn chỉnh sửa cho widget đó sẽ xuất hiện trong Bảng điều khiển (Panel) bên trái. Mỗi widget thường có 3 tab chính:

• Content (Nội dung): Tùy chỉnh nội dung của widget (ví dụ: văn bản của tiêu đề, nguồn ảnh, URL nút bấm, v.v.).
• Style (Kiểu hiển thị): Tùy chỉnh giao diện (ví dụ: màu sắc, phông chữ, kích thước, căn chỉnh, border, shadow, v.v.).
• Advanced (Nâng cao): Các tùy chọn nâng cao như:
  • Margin & Padding: Khoảng cách bên ngoài và bên trong phần tử.
  • Z-index: Thứ tự hiển thị của các lớp phần tử.
  • CSS ID & CSS Classes: Dùng để tùy chỉnh CSS bổ sung.
  • Motion Effects (Hiệu ứng chuyển động): Ví dụ: hiệu ứng cuộn (scroll effects), hiệu ứng vào (entrance animation).
  • Background: Màu nền, hình ảnh nền, gradient.
  • Border: Đường viền.
  • Positioning: Vị trí của phần tử (mặc định, tương đối, tuyệt đối, cố định).
  • Responsive: Ẩn/hiện phần tử trên các thiết bị khác nhau.
  • Custom CSS (Elementor Pro): Viết CSS tùy chỉnh.

2. Tiện ích Code Highlight là gì ?

Tiện ích Code Highlight trong Elementor là một công cụ hữu ích cho phép bạn hiển thị các đoạn mã lập trình trên trang web của mình một cách rõ ràng và dễ đọc, với tính năng tô sáng cú pháp theo ngôn ngữ đã chọn. Điều này rất hữu ích cho các blog công nghệ, tài liệu hướng dẫn, hoặc bất kỳ trang web nào cần chia sẻ mã.

3. Các bước sử dụng tiện ích Code Highlight

I. Nội dung (Content)

Đây là nơi bạn nhập mã của mình và cấu hình ngôn ngữ, số dòng và các tùy chọn hiển thị cơ bản.

A. Code Highlight (Làm nổi bật code)

• Language (Ngôn ngữ): Chọn ngôn ngữ lập trình của đoạn mã bạn muốn hiển thị (ví dụ: JavaScript, HTML, CSS, Python, PHP). Việc này giúp tiện ích áp dụng cú pháp tô sáng chính xác.
• Code (Mã): Đây là ô văn bản nơi bạn sẽ dán đoạn mã lập trình của mình vào.
  • Trong hình ảnh, bạn thấy ví dụ: console.log(“Code is Poetry”);
• Line Numbers (Số dòng): Bật/tắt hiển thị số thứ tự dòng bên cạnh đoạn mã.
  • (Bạn thấy nút gạt “BẬT” trong hình)
• Copy to Clipboard (Sao chép vào khay nhớ tạm): Bật/tắt nút cho phép người dùng nhấp để sao chép đoạn mã vào khay nhớ tạm của họ.
  • (Bạn thấy nút gạt “BẬT” trong hình)
• Highlight Lines (Tô sáng dòng): Nhập các số dòng cụ thể mà bạn muốn tô sáng (ví dụ: 1, 3-5, 8). Các dòng này sẽ nổi bật hơn so với các dòng khác.
• Word Wrap (Ngắt dòng): Bật/tắt tính năng ngắt dòng tự động cho các dòng mã dài. Điều này giúp mã không bị tràn ra ngoài khung hiển thị.
• Theme (Giao diện): Chọn giao diện màu sắc cho trình tô sáng mã (ví dụ: Solid, Dark, Light). Các chủ đề này sẽ xác định màu nền, màu chữ và màu của các thành phần cú pháp khác nhau.
• Chiều cao (Height): Đặt chiều cao cố định cho khung chứa mã.
• Kích thước phông chữ (Font Size): Điều chỉnh kích thước phông chữ của mã.

II. Kiểu hiển thị (Style)

Tiện ích Code Highlight thường không có tab “Kiểu hiển thị” riêng biệt cho các tùy chỉnh sâu về màu sắc và phông chữ của mã, vì các tùy chọn này đã được tích hợp trong phần Nội dung (như Theme và Font Size). Tuy nhiên, bạn có thể tìm thấy các tùy chỉnh chung cho vùng chứa tiện ích trong tab Nâng cao.

III. Nâng cao (Advanced)

Tab này cung cấp các tùy chọn nâng cao hơn để kiểm soát bố cục, hiệu ứng và khả năng đáp ứng của toàn bộ tiện ích Code Highlight.

1. Bố cục (Layout):

• Margin (Lề): Khoảng cách bên ngoài tiện ích Code Highlight với các phần tử khác xung quanh.
• Padding (Khoảng đệm): Khoảng đệm bên trong tiện ích.
• Width (Chiều rộng): Đặt chiều rộng của toàn bộ tiện ích Code Highlight.
• Position (Vị trí): Mặc định, Relative, Absolute, Fixed (các tùy chọn định vị nâng cao).
• Z-index: Xác định thứ tự xếp lớp của tiện ích nếu nó chồng lên các phần tử khác.

2. CSS ID & CSS Classes:

• Cho phép bạn thêm ID hoặc class CSS tùy chỉnh để tác động đến tiện ích bằng mã CSS riêng.

3. Hiệu ứng chuyển động (Motion Effects):

• Entrance Animation (Hoạt ảnh khi vào): Chọn hiệu ứng xuất hiện cho toàn bộ tiện ích Code Highlight khi trang được tải.
• Hover Animation (Hoạt ảnh di chuột qua): Hiệu ứng chuyển động cho toàn bộ tiện ích khi di chuột qua.
• Scrolling Effects (Hiệu ứng cuộn): Tạo các hiệu ứng khi người dùng cuộn trang.
• Mouse Effects (Hiệu ứng chuột): Tạo các hiệu ứng khi di chuột qua tiện ích.

4. Nền (Background):

• Bạn có thể thêm màu nền, hình nền hoặc gradient cho toàn bộ vùng chứa tiện ích Code Highlight.

5. Đường viền (Border):

• Tùy chỉnh kiểu đường viền, độ dày, màu sắc và bán kính bo tròn cho toàn bộ vùng chứa tiện ích.

6. Mặt nạ (Mask):

• Áp dụng một hình dạng mặt nạ để tạo hiệu ứng đặc biệt cho tiện ích.

7. Khả năng đáp ứng (Responsive):

• Ẩn trên máy tính để bàn (Hide On Desktop), Ẩn trên máy tính bảng (Hide On Tablet), Ẩn trên thiết bị di động (Hide On Mobile): Cho phép bạn ẩn tiện ích Code Highlight trên các loại thiết bị khác nhau nếu cần.

8. Thuộc tính (Attributes):

• Cho phép bạn thêm các thuộc tính HTML tùy chỉnh cho thẻ tiện ích.

9. CSS tùy chỉnh (Custom CSS) (chỉ có trong Elementor Pro):

• Cho phép bạn viết mã CSS trực tiếp để tùy chỉnh giao diện và hành vi của tiện ích một cách nâng cao.