Chào mừng quý bạn và các vị đã quay trở lại với CunghocWP, tôi là tiendatdinh ^^~
Bạn đang làm 1 website chia sẻ về công nghệ thông tin và muốn hiển thị một số đoạn CODE trong nội dung bài viết? Nếu viết thông thường, đoạn code có thể sẽ không hiển thị đúng.
Đối với WordPress, khi bạn lưu một bài viết, nó sẽ tự động chạy 1 số bộ lọc dọn dẹp lại. các bộ lọc này đảm bảo rằng không có ai chèn thêm những mã độc vào website để hack trang web của bạn.
Ở bài viết này, CunghocWP sẽ hướng dẫn bạn những cách thích hợp để hiển thị đoạn CODE trên website WordPres. Chúng tôi sẽ chỉ cho bạn nhiều cách khác nhau, bạn có thể lựa chọn cho mình cách phù hợp nhất bên dưới nhé.
Cách 1: Hiển thị code bằng trình chỉnh sửa bài đăng mặc định
Cách này được khuyến nghị cho người mới tìm hiểu WordPress và cho những người không thường xuyên chèn các đoạn code vào bài viết của mình.
Chỉ cần chỉnh sửa bài đăng trên website nơi bạn muốn hiển thị đoạn Code. Trên màn hình chỉnh sửa, hãy thêm 1 khối văn bản mới và lựa chọn CODE.
Giờ bạn chỉ cần dán đoạn code vào trong khối vừa chọn.
Bây giờ, hãy lưu bài đăng đó lại và quay trở lại website để xem thành quả nhé.
Tùy vào theme bạn đang sử dụng mã đoạn code có thể trông khác nhau nha.
Cách 2: Sử dụng plugin
Với cách này, bạn sẽ hiển thị code trên website bằng plugin, chúng tôi khuyến nghị dùng cách này cho những website thường xuyên phải chèn code vào nội dung bài viết.
Bạn sẽ có những lợi thế sau so với cách chèn code thông thường:
- Cho phép bạn hiển thị bất cứ ngôn ngữ lập trình nào
- Tô sáng các dòng và cú pháp của đoạn code
- Người dùng dễ dàng sao chép và nghiên cứu đoạn code bạn chia sẻ.
Đầu tiên, hãy cài đặt plugin SyntaxHighlighter Evolved. Nếu chưa biết cách thực hiện, bạn có thể xem hướng dẫn của chúng tôi về cách cài đặt và kích hoạt plugin trong WordPress.
Sau khi kích hoạt, bạn có thể sửa bài đăng trên website và thêm 1 block mới với tên “SyntaxHighlighter Code”.
Giờ đây, chúng ta sẽ thấy block code như hình minh họa bên dưới, sau khi thêm code, bạn hãy chọn lại những cài đặt tương ứng ở cột bên phải nha.
Đầu tiên là chọn ngôn ngữ của đoạn code. Sau đó chúng ta có thể tắt số dòng, đánh số dòng, đánh dấu 1 dòng bất kỳ hay bật tính năng có thể nhấp vào liên kết.
Khi đã hoàn thành, bạn có thể bấm vào xem trước để xem cách chúng hiển thị.
Plugin này đi kèm với một số phối màu cho các theme, chỉ cần vào Settings > SyntaxHighlighter để lựa chọn màu cho nó.
Bạn có thể xem trước bảng phối màu ở cuối trang khi cấu hình SyntaxHighlighter.
Sử dụng SyntaxHighlighter với Classic Editor
Nếu bạn đang dùng trình soạn thảo Classic Editor của WordPress, đây là cách bạn có thể sử dụng plugin SyntaxHighlighter.
Chỉ cần chèn thêm đoạn shortcode xung quanh đoạn code của bạn. Ví dụ bạn muốn chèn 1 đoạn code PHP thì làm như sau:
[php]
<?php
private function get_time_tags() {
$time = get_the_time('d M, Y');
return $time;
}
?>
[/php]
Tương tự với mã HTML
[html] <a href="example.com">A sample link</a> [/html]
Cách 3: Hiển thị một cách thủ công mà không cần plugin
Cách này dành cho những người đã có kiến thức về lập trình và nó đôi khi cũng không thực sự hoạt động hoàn hảo.
Nó phù hợp cho người dùng đang sử dụng những trình soạn thảo cũ không hỗ trợ plugin.
Đầu tiên, hãy chuyển trình soạn thảo của bạn qua Text. Sau đó, hãy chuyển đoạn code của mình qua công cụ mã hóa HTML trực tuyến. Nó sẽ thay đổi đoạn mã code thành HTML để WordPress có thể hiển thị được chúng.
Giờ, hãy sao chép đoạn code mời của bạn vào khung soạn thảo và nhớ bao quanh nó bằng thẻ <pre>và<code>
Đoạn code của bạn sẽ nhìn như sau:
<pre><code> <p><a href="/home.html">This is a sample link</a></p> </pre></code>
Bây giờ chỉ cần lưu bài viết lại và xem thử đoạn code hiển thị như thế nào. Bạn sẽ thấy đoạn code tương tự như thế này trên trình duyệt.
Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách dễ dàng hiển thị mã trên trang web WordPress của bạn. Bạn cũng có thể muốn xem danh sách cuối cùng của chúng tôi về các mẹo, thủ thuật và hack được WordPress muốn nhất .
Nếu thích bài viết này, hãy đăng ký Kênh YouTube của chúng tôi để xem video hướng dẫn nhé. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook để cập nhật các thông tin mới nhất từ CunghocWP.
Chúc các bạn thành công!