• Trang chủ
  • WordPress
    • Thủ thuật WordPress
    • WordPress Plugins
    • WordPress Themes
  • Hosting và Domain
  • Kiếm tiền
  • Đánh giá
  • Khuyến mãi
  • Thông báo
  • Giới thiệu
  • Liên hệ

WP Căn bản

Kiến thức căn bản cho người dùng WordPress

paradise-child-theme-wordpress-theme-tot-nhat
  • Dịch vụ WordPress Hosting
  • Dịch vụ tối ưu WordPress
  • Dịch vụ quét mã độc WordPress
  • Mua Paradise child theme
Trang chủ » WordPress » Thủ thuật WordPress » Hiển thị code trong bài viết của WordPress
hosting-tot-nhat-danh-cho-wordpress

Hiển thị code trong bài viết của WordPress

Cập nhật: 07/06/2025 Trung Hiếu 0 Bình luận

Mục lục Hiện
  • 1. Syntax highlighter là gì?
  • 2. Tại sao nên sử dụng syntax highlighter?
  • 3. Tại sao bạn nên chọn WPCB Syntax Highlighter?
  • 4. Hiển thị code trong bài viết với WPCB Syntax Highlighter

Hiển thị code (HTML, CSS, JS, PHP…) rõ ràng và chuyên nghiệp trong bài viết của WordPress.

hien-thi-code-trong-bai-viet-cua-wordpress

Đối với các lập trình viên, blogger công nghệ hay bất kỳ ai thường xuyên chia sẻ các đoạn mã (code snippet) trên website WordPress của mình thì việc trình bày mã một cách rõ ràng và chuyên nghiệp là vô cùng quan trọng. Một khối mã thuần văn bản không chỉ khó đọc mà còn làm giảm tính thẩm mỹ của bài viết. Đây chính là lúc syntax highlighter (trình tô sáng cú pháp) phát huy tác dụng. Suốt một thời gian dài trước đây, tôi đã từng sử dụng plugin SyntaxHighlighter Evolved để hiển thị code trong bài viết. Tuy nhiên, nó được tích hợp quá nhiều tính năng mà blog của tôi không cần đến.

Tham khảo thêm:

  • 5 WordPress plugin giúp làm nổi bật code và syntax
  • Chèn code PHP vào WordPress với plugin Code Snippets

Syntax highlighter là gì?

Syntax highlighter là một tính năng hoặc công cụ có khả năng hiển thị mã nguồn bằng cách sử dụng màu sắc và định dạng font chữ khác nhau cho các thành phần cú pháp như từ khóa, biến, chuỗi, bình luận… Thay vì một “bức tường văn bản” đơn điệu, mã nguồn của bạn sẽ được trình bày một cách trực quan, gần giống như khi bạn xem nó trong một trình soạn thảo mã (IDE) chuyên nghiệp như Visual Studio Code hay Sublime Text.

Tại sao nên sử dụng syntax highlighter?

  • Cải thiện tính dễ đọc: màu sắc giúp mắt người đọc dễ dàng phân biệt các thành phần khác nhau của mã, từ đó hiểu logic nhanh hơn.
  • Tăng tính thẩm mỹ: các đoạn mã được tô sáng trông chuyên nghiệp và hấp dẫn hơn, nâng cao chất lượng tổng thể của website.
  • Giảm thiểu lỗi: khi người đọc sao chép mã, việc trình bày rõ ràng giúp họ dễ dàng phát hiện các lỗi cú pháp hoặc ký tự bị thiếu.
  • Nâng cao trải nghiệm người dùng: một bài viết kỹ thuật với các đoạn mã được trình bày tốt sẽ giữ chân người đọc lâu hơn và được đánh giá cao hơn.

Tại sao bạn nên chọn WPCB Syntax Highlighter?

WPCB Syntax Highlighter là một plugin WordPress được viết bởi WP Căn bản với mục tiêu cung cấp một giải pháp tô sáng cú pháp đơn giản, gọn nhẹ và hiệu quả. Plugin sử dụng thư viện JavaScript Prism.js, một trong những thư viện tô sáng cú pháp phổ biến, nhẹ và có khả năng mở rộng cao. WPCB Syntax Highlighter có một số ưu điểm như:

  • Nhẹ và nhanh: plugin được thiết kế để có hiệu suất cao, tập trung vào chức năng cốt lõi là tô sáng cú pháp mà không thêm vào các tính năng không cần thiết.
  • Tài nguyên tự host: các file prism.css và prism.js được lưu trữ ngay trong thư mục của plugin. Điều này có nghĩa là website của bạn không phụ thuộc vào CDN bên ngoài, giúp tăng tốc độ tải trang, đảm bảo tính riêng tư và hoạt động ổn định ngay cả khi các dịch vụ bên thứ ba gặp sự cố.
  • Tải tài nguyên có điều kiện: đây là một trong những điểm tối ưu nhất của plugin. Nó chỉ tải các file CSS và JS cần thiết khi phát hiện có shortcode tô sáng cú pháp ([ php ], [ css ]…) trong nội dung bài viết hoặc khi trang bài viết có mở bình luận. Điều này giúp tối ưu hiệu suất, tránh tải tài nguyên thừa trên các trang không chứa mã.
  • Sử dụng đơn giản với shortcode: bạn có thể dễ dàng tô sáng các đoạn mã bằng cách bọc chúng trong các shortcode trực quan như [ php ], [ css ], [ js ], [ html ] và [ text ].
  • Hỗ trợ cập nhật tự động: plugin được tích hợp tính năng cập nhật tự động, cho phép nhận các bản cập nhật trực tiếp từ nhà phát triển, đảm bảo bạn luôn có phiên bản mới nhất.

Hiển thị code trong bài viết với WPCB Syntax Highlighter

1. Đầu tiên, bạn cần download plugin WPCB Syntax Highlighter. Vui lòng tham gia group WP Căn bản trên Facebook (chỉ dành riêng cho khách hàng) để lấy link download plugin.

2. Upload, cài đặt và kích hoạt plugin WPCB Syntax Highlighter.

cai-dat-va-kich-hoat-plugin-wpcb-syntax-highlighter

3. Mở trình soạn thảo bài viết ra, bọc 2 đầu đoạn code của bạn bằng các shortcode sau:

  • [ php ][/ php ]: đối với code PHP.
  • [ html ][/ html ]: đối với code HTML.
  • [ css ][/ css ]: đối với code CSS.
  • [ js ][/ js ]: đối với code JS.
  • [ text ][/ text ]: đối với các loại code khác, chẳng hạn như code trong file .htaccess.
Lưu ý quan trọng: nhớ xóa các khoảng trắng (dấu cách) trong shortcode. Ngoài ra, code phải không được chứa dòng trống (dòng trắng) và nên được chèn ở chế độ Code thay vì Visual.

4. Kết quả bạn nhận được sẽ tương tự như thế này:

  • Đối với code PHP:

wpcb-syntax-highlighter-php-code

  • Đối với code HTML:

wpcb-syntax-highlighter-html-code

  • Đối với code CSS:

wpcb-syntax-highlighter-css-code

  • Đối với code JS:

wpcb-syntax-highlighter-js-code

  • Đối với plain text:

wpcb-syntax-highlighter-plain-text

Thật tuyệt vời phải không nào? Chúc các bạn thành công!

Bạn có đang chia sẻ code trong các bài viết trên website của mình không? Bạn đã sử dụng plugin nào để làm điều đó? Hãy chia sẻ với chúng tôi giải pháp của bạn thông qua khung bình luận bên dưới.

Nếu bạn thích bài viết này, hãy theo dõi blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất nhé. Cảm ơn rất nhiều. :)

  • Chia sẻ lên Facebook
  • Chia sẻ lên Twitter
  • Chia sẻ lên LinkedIn

Bài viết liên quan

Xóa base slug của custom post type và taxonomy
Xóa base slug của custom post type và taxonomy
Plugin SMTP siêu nhẹ dành cho WordPress
Plugin SMTP siêu nhẹ dành cho WordPress
Plugin contact form siêu nhẹ cho WordPress
Plugin contact form siêu nhẹ cho WordPress

Chuyên mục: Thủ thuật WordPress

wpcanban-com-facebook-group

Nói về Trung Hiếu

Một người con của xứ Nghệ, hiện đang sinh sống tại Hà Nội. Tôi là người sáng lập và đứng sau mọi hoạt động của WP Căn bản. Tìm hiểu thêm về tôi tại đây.

Bài viết trước « Plugin SMTP siêu nhẹ dành cho WordPress
Bài viết sau Monarx Security được tích hợp vào dịch vụ WordPress Hosting »

Reader Interactions

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

Tất cả các bình luận đều sẽ được kiểm duyệt nghiêm ngặt. Mọi bình luận trái quy định sử dụng sẽ bị gỡ bỏ link hoặc xóa bỏ hoàn toàn. Vui lòng đọc kỹ quy định trước khi bình luận. Xin cảm ơn!

Sidebar chính

NHẬN BÀI VIẾT QUA EMAIL

Hãy đăng ký ngay để là người đầu tiên nhận được thông báo qua email mỗi khi chúng tôi có bài viết mới. Tặng miễn phí ebook "Bảo mật WordPress toàn tập" do WP Căn bản biên soạn!

Theo dõi qua mạng xã hội

Dịch vụ WordPress Hosting

dich-vu-wordpress-hosting-chat-luong-cao

Bạn đang tìm gì?

WordPress căn bản

Bảo mật WordPress

Tăng tốc WordPress

Thủ thuật CloudFlare

Sửa lỗi WordPress

Thủ thuật LiteSpeed

Thủ thuật Genesis

Thủ thuật SEO

Thủ thuật WooCommerce

Sử dụng theme Paradise

Dịch vụ tối ưu WordPress miễn phí

dich-vu-toi-uu-wordpress-mien-phi

Dịch vụ quét mã độc miễn phí

dich-vu-quet-ma-doc-wordpress-mien-phi

Footer

Bài viết mới nhất

  • Xóa base slug của custom post type và taxonomy 04/07/2025
  • Ra mắt plugin Hybrid Object Cache độc quyền tại WP Căn bản 30/06/2025
  • Monarx Security được tích hợp vào dịch vụ WordPress Hosting 15/06/2025
  • Hiển thị code trong bài viết của WordPress 07/06/2025

Bình luận mới nhất

  • Trung Hiếu trong Bật mí về các công nghệ mà WP Căn bản đang sử dụng
  • Tịnh Nguyễn trong Bật mí về các công nghệ mà WP Căn bản đang sử dụng
  • Trung Hiếu trong Hướng dẫn nâng cấp PHP 7.4 cho website WordPress
  • dự án vlasta hải phòng trong Hướng dẫn nâng cấp PHP 7.4 cho website WordPress

Thông tin hữu ích

  • Giới thiệu bản thân
  • Quy định sử dụng
  • Chính sách bảo mật
  • Bản quyền nội dung

Thống kê WP Căn bản

9 Chuyên mục - 1.007 Bài viết - 35.554 Bình luận

Bản quyền © 2014 - 2025 · WP Căn bản (tiền thân là eBooksvn.com) · Sử dụng Paradise child theme và dịch vụ WordPress Hosting