Hiển Thị Code Trên Website WordPress Dễ Dàng
Tại Sao Cần Hiển Thị Code Trên WordPress?
Nếu bạn là một lập trình viên, nhà phát triển web, hoặc đơn giản là người yêu thích công nghệ, việc chia sẻ code trên website WordPress của bạn là điều cần thiết. Nó cho phép bạn:
- Hướng dẫn người khác học lập trình.
- Chia sẻ các đoạn mã hữu ích với cộng đồng.
- Trình bày code minh họa cho các bài viết kỹ thuật.
- Lưu trữ các snippets code cá nhân.
Tuy nhiên, WordPress không hỗ trợ hiển thị code trực tiếp một cách tự nhiên. Nếu bạn chỉ đơn giản dán code vào trình soạn thảo, nó sẽ hiển thị sai, hoặc tệ hơn, phá vỡ bố cục trang web của bạn. May mắn thay, có nhiều cách để khắc phục vấn đề này.
Các Phương Pháp Hiển Thị Code Trên WordPress
Dưới đây là một số phương pháp phổ biến để hiển thị code trên WordPress, từ đơn giản đến phức tạp:
1. Sử Dụng Thẻ <pre> và <code> (Phương Pháp Đơn Giản Nhất)
Đây là phương pháp đơn giản nhất, phù hợp cho các đoạn code ngắn và không cần định dạng phức tạp. Bạn chỉ cần bọc code của mình trong thẻ <pre> và <code> trong trình soạn thảo văn bản của WordPress (chuyển sang chế độ “Text” hoặc “Code”).
Ví dụ:
<p>Xin chào thế giới!</p>
Ưu điểm:
- Đơn giản, dễ thực hiện.
- Không cần cài đặt plugin.
Nhược điểm:
- Không có tô sáng cú pháp (syntax highlighting).
- Khó kiểm soát định dạng (font chữ, màu sắc…).
- Cần phải mã hóa các ký tự đặc biệt (<, >, &…).
2. Sử Dụng Plugin WordPress (Phương Pháp Phổ Biến)
Có rất nhiều plugin WordPress được thiết kế để hiển thị code một cách chuyên nghiệp, với tô sáng cú pháp, đánh số dòng, và nhiều tính năng khác. Một số plugin phổ biến bao gồm:
- SyntaxHighlighter Evolved: Plugin cổ điển và được sử dụng rộng rãi, hỗ trợ nhiều ngôn ngữ lập trình.
- Prism.js: Một thư viện JavaScript nhẹ và mạnh mẽ, có thể tích hợp vào WordPress thông qua plugin.
- Crayon Syntax Highlighter: Plugin mạnh mẽ với nhiều tùy chọn tùy chỉnh, bao gồm cả chủ đề và font chữ.
- Enlighter – Customizable Syntax Highlighter: Một plugin hiện đại và dễ sử dụng, tập trung vào khả năng tùy biến.
Cách sử dụng plugin (ví dụ: SyntaxHighlighter Evolved):
- Cài đặt và kích hoạt plugin SyntaxHighlighter Evolved.
- Sử dụng shortcode
[code language="your_language"]your code[/code]trong bài viết hoặc trang của bạn, thay “your_language” bằng tên ngôn ngữ lập trình bạn muốn hiển thị (ví dụ: javascript, php, html, css). - Ví dụ:
[code language="javascript"]console.log("Xin chào thế giới!");[/code]
Ưu điểm:
- Tô sáng cú pháp tự động, giúp code dễ đọc hơn.
- Hỗ trợ nhiều ngôn ngữ lập trình.
- Dễ dàng tùy chỉnh giao diện (chủ đề, font chữ…).
- Một số plugin cung cấp tính năng đánh số dòng, copy code…
Nhược điểm:
- Cần cài đặt và quản lý plugin.
- Một số plugin có thể làm chậm website của bạn.
3. Sử Dụng Dịch Vụ Lưu Trữ Code Bên Ngoài (Ví Dụ: Gist)
Bạn có thể sử dụng các dịch vụ lưu trữ code bên ngoài như GitHub Gist, Pastebin, hoặc CodePen để lưu trữ code của mình, sau đó nhúng nó vào website WordPress thông qua iframe hoặc shortcode.
Ví dụ (sử dụng GitHub Gist):
- Tạo một Gist mới trên GitHub.
- Sao chép URL nhúng (Embed URL) của Gist.
- Nhúng Gist vào WordPress bằng cách sử dụng mã sau (thay thế URL bằng URL của bạn):
<script src="your_gist_embed_url.js"></script>
Ưu điểm:
- Code được lưu trữ bên ngoài, giảm tải cho server WordPress.
- Dễ dàng quản lý và chỉnh sửa code trực tiếp trên dịch vụ lưu trữ.
- Thường có tô sáng cú pháp và nhiều tính năng khác.
Nhược điểm:
- Cần tài khoản trên dịch vụ lưu trữ code.
- Phụ thuộc vào dịch vụ bên ngoài.
4. Sử Dụng Trình Chỉnh Sửa Gutenberg (WordPress 5.0+) với Khối “Code”
Nếu bạn đang sử dụng WordPress phiên bản 5.0 trở lên và sử dụng trình chỉnh sửa Gutenberg, bạn có thể sử dụng khối “Code” để hiển thị code. Khối này cho phép bạn nhập code trực tiếp và nó sẽ được hiển thị với định dạng cơ bản.
Ưu điểm:
- Đơn giản và nhanh chóng, không cần cài đặt plugin.
- Tích hợp sẵn trong Gutenberg.
Nhược điểm:
- Không có tô sáng cú pháp.
- Khả năng tùy chỉnh hạn chế.
Mẹo Để Hiển Thị Code Tốt Nhất Trên WordPress
Dù bạn chọn phương pháp nào, hãy lưu ý những mẹo sau để đảm bảo code của bạn được hiển thị một cách tốt nhất:
- Chọn phương pháp phù hợp với nhu cầu của bạn: Nếu bạn chỉ cần hiển thị một vài đoạn code ngắn, phương pháp đơn giản nhất là đủ. Nếu bạn cần hiển thị nhiều code với tô sáng cú pháp, hãy sử dụng plugin hoặc dịch vụ lưu trữ code bên ngoài.
- Mã hóa các ký tự đặc biệt: Nếu bạn sử dụng phương pháp
<pre>và<code>, hãy đảm bảo mã hóa các ký tự<,>, và&để tránh gây lỗi hiển thị. - Chọn chủ đề và font chữ phù hợp: Chọn chủ đề và font chữ dễ đọc và phù hợp với thiết kế tổng thể của website của bạn.
- Kiểm tra trên nhiều thiết bị: Đảm bảo code của bạn hiển thị tốt trên cả máy tính và thiết bị di động.
- Sử dụng chú thích (comments) trong code: Giải thích code của bạn bằng chú thích để giúp người khác hiểu rõ hơn.
Kết Luận
Hiển thị code trên website WordPress không khó, nhưng cần chọn phương pháp phù hợp và tuân thủ một số nguyên tắc cơ bản. Bằng cách làm theo hướng dẫn trong bài viết này, bạn có thể dễ dàng chia sẻ code của mình với mọi người một cách chuyên nghiệp và hiệu quả.
