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
hosting-tot-nhat-danh-cho-wordpress

5 WordPress plugin giúp làm nổi bật code và syntax

Trung Hiếu 20 Bình luận

Mục lục Hiện

Top 5 plugin giúp làm nổi bật code và syntax trong WordPress tốt nhất.

5-wordpress-plugin-giup-lam-noi-bat-code-va-syntax-tot-nhat

Bạn là một blogger chuyên chia sẻ về thủ thuật và lập trình? Bạn thường xuyên phải chèn các đoạn code vào bài viết hướng dẫn để giải thích cho việc làm thế nào một vấn đề nhất định có thể được giải quyết bằng ngôn ngữ lập trình? Mã nguồn nói chung không dễ để đọc và nó thường chứa nhiều ký tự đặc biệt, không thể hiển thị chính xác trong nội dung bài viết, trừ khi người viết biết cách để xử lý nó. Để làm cho mã nguồn hiển thị nổi bật trên blog/ website, bạn cần phải thêm màu sắc, phân tách và đánh số dòng cho chúng.

Tham khảo thêm:

Nếu đang sử dụng WordPress, bạn có rất nhiều giải pháp tuyệt vời để trình bày các đoạn code của mình một cách chuyên nghiệp mà không tốn thời gian và công sức. Một số plugin miễn phí có thể giúp bạn làm nổi bật code và syntax một cách hiệu quả, giống như cách mà hầu hết các trình biên tập code trên máy tính thường làm. Ngay sau đây là 5 plugin tốt nhất.

Những plugin làm nổi bật code và syntax tốt nhất

1. Developer Formatter – Download

plugin-developer-formatter

Bằng cách sử dụng plugin này, bạn có thể làm cho các đoạn code của mình trông chuyên nghiệp và thu hút người đọc hơn. Nó được tạo ra nhờ việc sử dụng GeSHi (Generic Syntax Highlighter). GeSHi hỗ trợ một số lượng lớn các ngôn ngữ lập trình như: HTML, JavaScript, CSS, PHP, ASP, C, C++... Nó cũng sử dụng các thẻ HTML <pre> để định dạng các đoạn code.

2. FV Code Highlighter – Download

plugin-fv-code-highlighter

FV Code Highlighter có thể được sử dụng để làm nổi bật code của nhiều ngôn ngữ lập trình khác nhau, chẳng hạn như: HTML, CSS, PHP, XML… Bạn có thể tùy chỉnh màu sắc cho các syntax giống như các từ khoá với plugin này. Nó sử dụng các màu sắc chuẩn theo mặc định và được công nhận bởi hầu hết các trình biên tập như Adobe Dreamweaver và Macromedia Dreamweaver.

3. Google Syntax Highlighter for WordPress – Download

plugin-google-syntax-highlighter-for-wordpress

Plugin này được phát triển bởi Alex Gorbatchev, giúp bạn dễ dàng nhúng Google syntax highlighter vào mã nguồn WordPress. Nó hỗ trợ nhiều ngôn ngữ lập trình như PHP, XML, HTML, CSS, JavaScript, C, C++… và có thể hiển thị hoàn hảo trong hầu hết các trình duyệt web. Đặc biệt là nó rất nhẹ.

4. CodeColorer – Download

plugin-code-colorer

CodeColorer là plugin có thể giúp bạn làm nổi bật code và syntax một cách hoàn hảo. Nó có thể được chèn vào bất kỳ bài viết nào với giao diện hấp dẫn, gồm nhiều màu sắc. Nó cũng có thể được sử dụng để làm nổi bật syntax trong phần bình luận ​​và cả trong RSS Feed. CodeColorer hỗ trợ các tông màu sắc khác nhau, chẳng hạn như: blackboard, dawn, slush & poppies, twilight, vibrant ink và rails casts. Plugin này cũng sử dụng GeSHi cho việc hiển thị code.

5. Code Markup – Download

Code Markup là một plugin rất hữu ích, giúp bạn đính kèm bất kỳ code hoặc syntax nào vào trong bài viết của mình. Hơn nữa, plugin này còn hỗ trợ các thẻ HTML trong code. Nó cũng có thể phân biệt các code chương trình và thẻ HTML, do đó bạn không cần phải bận tâm về chúng.

Bạn đang dùng plugin nào để làm nổi bật code và syntax trên blog/ website của mình? Đừng quên chia sẻ nó với chúng tôi trong khung bình luận bên dưới.

Nếu bạn thích bài viết này, hãy subscribe 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 qua email nhé. Cảm ơn rất nhiều. :)

Bài viết liên quan

Top 5 plugin tạo vòng quay may mắn cho website WordPress
Top 5 plugin tạo vòng quay may mắn cho website WordPress
Những plugin không nên cài cho website WordPress
Những plugin không nên cài cho website WordPress
Google Site Kit có thực sự cần thiết cho website của bạn?
Google Site Kit có thực sự cần thiết cho website của bạn?

Reader Interactions

Bình luận

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

    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!

  1. Mình muốn tạo ra 1 hộp nội dung như hình trong ảnh https://photos.google.com/photo/AF1QipPXOGVst-j3tbcG1dMIj1Loe6KWdW1vfJGW0WGZ thì cần dùng plugin gì nhỉ?

    Bình luận

      • bác chèn thêm link vào bài github của bác nữa được link dofollow pr 8 hay pr 6 không nhớ nữa tại gỡ cái kiểm tra pr rồi :D

        Bình luận

      • Đang định cài Crayon Syntax Highlighter mà nghe bác @kiên bảo nặng….
        Thôi cài thử có gì gở ra sau. mà không biết nếu gỡ thì mấy bài dùng nó để hiển thị code có bị ảnh hưởng không nhỉ.

        Bình luận

      • Bạn chèn code sau đây vào file functions.php của theme hoặc child theme đang sử dụng:

        //* oEmbed Gist
class Gists_oEmbed {
	public function __construct(){
		add_action( 'init', array( $this, 'setup_handler' ) );
	}
	public function gist_result( $url ){
		$url = $url[0];
		if( !preg_match( '#\.js$#i', $url ) )
			$url .= '.js';
		return '<script src="' . $url . '"></script>';
	}
	public function setup_handler(){
		wp_embed_register_handler( 'gist', '#https?://gist.github.com/.*#i', array( $this, 'gist_result' ) );
	}
}
$gists_oembed = new Gists_oEmbed();

        Sau đó cứ copy link gist.github.com (ví dụ https://gist.github.com/Kaiderella/23a8b117752509fbdf24af676c1abf39) và paste vào bài viết là nó sẽ hiện lên thôi.

        Bình luận

Footer

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

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

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