Cách Hiển Thị Code Đẹp Trong Bài Viết Của WordPress

Cách Hiển Thị Code Đẹp Trong Bài Viết Của WordPress

Plugin Enlighter là công cụ tuyệt vời để làm nổi bật cú pháp code trong WordPress, giúp các đoạn mã trong bài viết trở nên dễ đọc và đẹp mắt. Bài viết này hướng dẫn chi tiết cách cài đặt và sử dụng plugin Enlighter để tối ưu hóa việc hiển thị code trong bài viết của bạn.

Tại Sao Nên Dùng Plugin Enlighter để Làm Nổi Bật Cú Pháp?

Plugin Enlighter hỗ trợ nhiều ngôn ngữ lập trình và cung cấp các tính năng tùy biến như đổi màu giao diện, hiển thị đánh số dòng, và thêm nút “Copy” để người dùng dễ dàng sao chép mã. Những lợi ích này làm cho Enlighter trở thành lựa chọn hàng đầu trong các plugin làm nổi bật cú pháp code, bao gồm cả SyntaxHighlighter Evolved và Code Prettify.

Bước 1: Cài Đặt Plugin Enlighter

Để bắt đầu, bạn cần cài đặt và kích hoạt plugin Enlighter trên WordPress. Thực hiện theo các bước sau:

  1. Truy cập Bảng điều khiển WordPress > Plugins > Add New.
  2. Gõ “Enlighter” vào ô tìm kiếm và chọn Install Now.
  3. Sau khi cài đặt, nhấn Activate để kích hoạt plugin.
Screenshot 2024 10 28 at 21.30.35

Khi đã cài đặt Enlighter, bạn sẽ thấy các tùy chọn bổ sung để quản lý và hiển thị code trên trang của mình.

Bước 2: Cách Chèn Mã Code vào Bài Viết với Plugin Enlighter

Enlighter tích hợp sẵn các khối (block) hỗ trợ trong trình soạn thảo Gutenberg, giúp việc chèn mã code vào bài viết trở nên đơn giản và hiệu quả.

  1. Trong trình soạn thảo bài viết, nhấn vào biểu tượng + để thêm khối mới.
    Screenshot 2024 10 28 at 21.35.45
  2. Gõ từ khóa “Enlighter Source Code” vào ô tìm kiếm block, sau đó chọn khối Enlighter Source Code từ danh sách.
    Screenshot 2024 10 28 at 21.41.14
  3. Dán Code Vào Khối Enlighter: Bạn dán đoạn mã cần hiển thị vào khối Enlighter. Bạn có thể chọn ngôn ngữ lập trình từ danh sách để Enlighter tự động tô màu cú pháp cho mã.
    Screenshot 2024 10 28 at 21.42.29
Bước 3: Tùy Chỉnh Giao Diện và Tính Năng Hiển Thị Của Enlighter

Plugin Enlighter cung cấp các tùy chọn giao diện và màu sắc phong phú. Bạn có thể điều chỉnh cài đặt của Enlighter để phù hợp với phong cách của website, bao gồm các tùy chọn sau:

  1. Truy cập Settings > Enlighter trong bảng điều khiển WordPress.
  2. Chọn Theme cho giao diện mã code (ví dụ: Classic, Modern, Solarized Dark…).
  3. Bật Số DòngNút Copy to Clipboard để người dùng dễ dàng sao chép mã code.
  4. Chọn Hiệu ứng Hover để làm nổi bật từng dòng khi người dùng di chuột qua đoạn code.

Các tùy chọn này giúp mã code của bạn không chỉ dễ nhìn mà còn tiện lợi hơn cho người dùng, đặc biệt là khi cần sao chép mã nhanh chóng.

Sau khi hoàn tất các tùy chỉnh, nhấn vào Preview để xem trước cách đoạn mã hiển thị trong bài viết. Khi đã hài lòng, bạn có thể nhấn Publish để xuất bản bài viết.

Sử dụng plugin Enlighter để làm nổi bật cú pháp code trên WordPress không chỉ giúp mã code trở nên dễ đọc mà còn mang lại trải nghiệm tốt hơn cho người đọc. Việc cài đặt đơn giản, khả năng tùy biến cao, và đặc biệt là tính năng “Copy to Clipboard” giúp Enlighter trở thành lựa chọn đáng cân nhắc cho mọi blogger và nhà phát triển web.

Chúc bạn thành công với việc sử dụng Enlighter để làm nổi bật cú pháp code trên trang WordPress của mình! Tải plugin Enlighter tại đây để bắt đầu trải nghiệm.

Comments

No comments yet. Why don’t you start the discussion?

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *