Hiển thị code trên website WordPress dễ dàng

4 tháng ago, Hướng dẫn WordPress, 1 Views
Hiển thị code trên website WordPress dễ dàng

Giới thiệu: Tại sao cần hiển thị Code trên WordPress?

Khi bạn viết về lập trình, hướng dẫn kỹ thuật hoặc chia sẻ snippets code, việc hiển thị code một cách rõ ràng và dễ đọc là rất quan trọng. Mặc định, WordPress không hỗ trợ định dạng code một cách hiệu quả. Việc sao chép và dán code trực tiếp vào trình soạn thảo có thể dẫn đến các vấn đề về định dạng, mất thụt lề, và các ký tự đặc biệt có thể bị hiểu sai. Điều này gây khó khăn cho người đọc trong việc hiểu và sử dụng code của bạn.

Bài viết này sẽ hướng dẫn bạn các phương pháp khác nhau để hiển thị code một cách chuyên nghiệp và dễ dàng trên website WordPress của bạn, giúp cải thiện trải nghiệm người dùng và tăng tính chuyên nghiệp cho blog của bạn.

Sử dụng Block “Code” của WordPress Gutenberg

WordPress Gutenberg, trình soạn thảo mặc định, cung cấp một block “Code” đơn giản để hiển thị code. Đây là cách dễ nhất để bắt đầu, đặc biệt nếu bạn không muốn cài đặt thêm plugin.

  1. Trong trình soạn thảo Gutenberg, nhấn vào biểu tượng “+” để thêm một block.
  2. Tìm kiếm và chọn block “Code”.
  3. Dán code của bạn vào block “Code”.

Ưu điểm:

  • Đơn giản và dễ sử dụng.
  • Không cần cài đặt thêm plugin.

Nhược điểm:

  • Không có cú pháp tô sáng (syntax highlighting).
  • Định dạng hạn chế.

Ví dụ:


function helloWorld() {
    console.log("Hello, World!");
}

helloWorld();

Sử dụng Plugin Syntax Highlighting

Để hiển thị code với cú pháp tô sáng, bạn cần sử dụng plugin. Có rất nhiều plugin syntax highlighting miễn phí và trả phí có sẵn trên WordPress.org. Một số plugin phổ biến bao gồm:

  • SyntaxHighlighter Evolved
  • Prism.js
  • Enlighter – Customizable Syntax Highlighter

Cài đặt và Cấu hình Plugin Syntax Highlighter Evolved

  1. Vào “Plugins” -> “Add New” trong bảng điều khiển WordPress của bạn.
  2. Tìm kiếm “SyntaxHighlighter Evolved”.
  3. Cài đặt và kích hoạt plugin.
  4. Đi đến “Settings” -> “SyntaxHighlighter” để cấu hình plugin. Bạn có thể chọn theme, ngôn ngữ mặc định và các tùy chọn khác.

Cách sử dụng SyntaxHighlighter Evolved

Để sử dụng SyntaxHighlighter Evolved, bạn cần sử dụng shortcode. Shortcode là một đoạn code nhỏ được đặt trong dấu ngoặc vuông, cho phép bạn chèn nội dung động vào bài viết của mình.

Ví dụ:


[php]
function helloWorld() {
    echo "Hello, World!";
}

helloWorld();
[/php]

Trong ví dụ trên, [php] và [/php] là shortcode cho ngôn ngữ PHP. SyntaxHighlighter Evolved sẽ tự động tô sáng cú pháp code bên trong shortcode.

Sử dụng Prism.js

Prism.js là một thư viện syntax highlighting nhẹ và linh hoạt. Bạn có thể cài đặt nó bằng plugin hoặc thêm thủ công vào theme của bạn.

  1. Sử dụng Plugin: Tìm kiếm plugin “Prism.js” trên WordPress.org và cài đặt.
  2. Thêm thủ công: Tải xuống Prism.js từ trang web chính thức của Prism.js. Sao chép các file CSS và JavaScript vào theme của bạn. Thêm các dòng sau vào file header.php của theme: 
    
<link rel="stylesheet" href="path/to/prism.css">
<script src="path/to/prism.js"></script>

Để sử dụng Prism.js, bạn cần bao quanh code của bạn bằng thẻ <pre> và <code> và chỉ định ngôn ngữ cho code.

Ví dụ:


function helloWorld() {
    console.log("Hello, World!");
}

helloWorld();

Sử dụng dịch vụ Code Embedding bên ngoài

Ngoài việc sử dụng plugin, bạn cũng có thể sử dụng các dịch vụ code embedding bên ngoài như:

  • Gist (GitHub)
  • CodePen
  • JSFiddle

Nhúng Gist từ GitHub

Gist là một dịch vụ chia sẻ code snippets từ GitHub. Bạn có thể tạo một Gist và nhúng nó vào website WordPress của bạn.

  1. Tạo một Gist trên GitHub.
  2. Sao chép URL “Embed” của Gist.
  3. Dán URL vào trình soạn thảo WordPress. WordPress sẽ tự động chuyển đổi URL thành một đoạn code nhúng.

Ưu điểm:

  • Dễ dàng chia sẻ và quản lý code snippets.
  • Cú pháp tô sáng tự động.
  • Tích hợp tốt với GitHub.

Nhúng Code từ CodePen/JSFiddle

CodePen và JSFiddle là các trình soạn thảo code trực tuyến cho phép bạn tạo và chia sẻ code snippets. Bạn có thể nhúng code từ CodePen hoặc JSFiddle vào website WordPress của bạn bằng cách sao chép đoạn code nhúng và dán vào trình soạn thảo WordPress.

Mẹo và Thủ thuật để hiển thị Code tốt hơn

  • Chọn theme phù hợp: Chọn một theme syntax highlighting phù hợp với thiết kế của website của bạn.
  • Sử dụng thụt lề nhất quán: Đảm bảo code của bạn có thụt lề nhất quán để dễ đọc hơn.
  • Sử dụng chú thích: Chú thích code của bạn để giải thích cách code hoạt động.
  • Kiểm tra trên nhiều thiết bị: Kiểm tra xem code của bạn hiển thị đúng cách trên nhiều thiết bị khác nhau, bao gồm máy tính để bàn, máy tính bảng và điện thoại di động.

Kết luận

Hiển thị code trên website WordPress một cách chuyên nghiệp là rất quan trọng để cung cấp thông tin rõ ràng và dễ hiểu cho độc giả của bạn. Bằng cách sử dụng các phương pháp được trình bày trong bài viết này, bạn có thể dễ dàng hiển thị code với cú pháp tô sáng, thụt lề và định dạng phù hợp, giúp cải thiện trải nghiệm người dùng và tăng tính chuyên nghiệp cho blog của bạn. Hãy chọn phương pháp phù hợp nhất với nhu cầu và kỹ năng của bạn để bắt đầu hiển thị code một cách hiệu quả trên website WordPress của bạn ngay hôm nay!

Related Topics by Tag
, , , ,

..