Cách thay đổi màu sắc cho khối mã lệnh trong WordPress – Nếu bạn thấy khối mã lệnh mặc định trong WordPress quá “buồn tẻ”, bạn có thể làm nổi bật cú pháp mã lệnh một cách dễ dàng mà không cần sử dụng Plugin.
Việc làm nổi bật cú pháp mã lệnh góp phần tạo nên tính thẩm mỹ tổng thể cho nội dung. Màu sắc hấp dẫn trực quan không chỉ làm cho mã lệnh của bạn nổi bật mà còn tạo ra diện mạo hấp dẫn hơn cho bài đăng và giúp thu hút sự chú ý của người đọc.
Ví dụ dưới đây minh họa cách hoạt động của tính năng thay đổi màu sắc cho khối mã lệnh trong WordPress.
Sau khi thay đổi
Ngoài việc nâng cao sự hấp dẫn về mặt hình ảnh, việc làm nổi bật cú pháp mã lệnh còn cải thiện khả năng hiểu mã, với cú pháp được đánh dấu, người đọc có thể nhanh chóng xác định các thành phần quan trọng và nắm bắt cấu trúc, logic và luồng của mã. Điều này đặc biệt có giá trị đối với các hướng dẫn, tài liệu kỹ thuật và nội dung giáo dục trong đó việc hiểu rõ mã lệnh là điều cần thiết, ngoài ra bạn có thể tham khảo cách thêm nút “sao chép mã” vào khối mã lệnh trong WordPress giúp nâng cao trải nghiệm người dùng.
Thay đổi màu sắc cho khối mã lệnh
Việc thay đổi màu sắc cho khối mã lệnh trong WordPress liên quan đến việc chọn lựa thư viện thay đổi màu sắc cho khối mã lệnh để tích hợp. Trong số các tùy chọn, có 2 lựa chọn đáng chú ý giúp bạn có thể thay đổi màu sắc cho khối mã lệnh được sử dụng rộng rãi nhất là thư viện Highlight.js và Prism.js.
Trong hướng dẫn này, chúng ta sẽ sử dụng thưu viện Highlight.js để thay đổi màu sắc cho cú pháp trong WordPress mà không cần cài đặt plugin bổ sung.
Tải và chạy tập lệnh đánh dấu cú pháp
Bắt đầu bằng cách đăng nhập vào bảng điều khiển quản trị viên WordPress, sau đó điều hướng đến Giao diện > Trình chỉnh sửa tệp chủ đề (Theme file Editor). Chọn file functions.php của giao diện đang sử dụng, sau đó thêm đoạn mã sau để tải và chạy thư viện Highlight.js trên trang web WordPress của bạn.
function wpp_highlight() {
wp_enqueue_style( 'highlightjs-css', 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/default.min.css' );
wp_enqueue_script( 'highlightjs', 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js', '', 'latest', true );
wp_add_inline_script( 'highlightjs', 'hljs.highlightAll();' );
}
add_action('wp_enqueue_scripts', 'wpp_highlight');
Ngoài ra, bạn có thể sử dụng plugin Code Snippets để thuận tiện cho việc thêm mã lệnh tùy chỉnh của mình. Với việc sử dụng Plugin này sẽ đảm bảo bạn không cần phải lo lắng về các vấn đề tiềm ẩn khi thay đổi các mã lệnh lên quan.
Khi bạn áp dụng mã lệnh Highlight.js sẽ tìm và đánh dấu mã bên trong khối mã WordPress. Bạn không cần phải làm gì cả? vì Highlight.js đã tích hợp sẵn tính năng phát hiện ngôn ngữ tự động.
Tùy chỉnh kiểu khối mã lệnh
Bạn muốn tùy chỉnh kiểu khối mã lệnh theo sở thích của mình? bạn có thể sao chép đoạn mã bên dưới và dán vào Trình chỉnh sửa CSS bổ sung của Giao diện.
pre.wp-block-code {
background-color: #FAFAFA;
padding: 8px;
border-radius: 10px 10px 10px 10px;
font-size: 14px;
}Đoạn mã CSS bên trên sẽ thêm màu nền nhạt hơn màu khối mã lệnh. Ngoài ra, nó còn kết hợp phần đệm bổ sung để thiết lập khung nền bên trong, có các góc hơi tròn. Hơn nữa, kích thước phông chữ mã sẽ được đặt ở mức “14px” bạn có thể điều chỉnh theo phong cách sở thích cá nhân của mình.
- Cách tích hợp tính năng hiển thị kết quả tìm kiếm tức thì trong WordPress
- Cách hiển thị độc giả bình luận nhiều nhất trong WordPress
- Cách tùy chỉnh Post meta cho giao diện Genesis chuyên nghiệp
- Cách tùy chỉnh nút đăng bài viết trượt theo màn hình WordPress
- Cách tích hợp nút xóa bài viết ra ngoài home page wordpress
Kết luận
Làm nổi bật cú pháp mã lệnh không chỉ tăng thêm sức hấp dẫn trực quan mà nó còn có giá trị đối với các hướng dẫn, tài liệu kỹ thuật và nội dung giáo dục, đồng thời giúp người mới bắt đầu cũng như người có kinh nghiệm nhanh chóng xác định các yếu tố chính, hiểu được cấu trúc và logic mã lệnh.
