• 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 » WordPress Plugins » 5 WordPress plugin giúp làm nổi bật code và syntax
hosting-tot-nhat-danh-cho-wordpress

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

Cập nhật: 18/03/2018 Trung Hiếu 20 Bình luận

Mục lục Hiện
  • 1. Những plugin làm nổi bật code và syntax tốt nhất
    • 1.1. 1. Developer Formatter – Download
    • 1.2. 2. FV Code Highlighter – Download
    • 1.3. 3. Google Syntax Highlighter for WordPress – Download
    • 1.4. 4. CodeColorer – Download
    • 1.5. 5. Code Markup – Download

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:

  • Sử dụng colored boxes, color buttons và highlight menu
  • Lựa chọn và chia sẻ một đoạn văn bản bất kỳ trong bài viết

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. :)

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

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?

Chuyên mục: WordPress Plugins

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 « 5 Lời khuyên hữu ích giúp giảm thời gian tải blog WordPress
Bài viết sau Tùy biến breadcrumbs trong Genesis Framework và child theme »

Reader Interactions

Bình luận

    Để 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!

  1. Tùng 9 bình luậnviết

    20/04/2022 lúc 07:53

    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
    • Trung Hiếu Quản lýviết

      20/04/2022 lúc 07:55

      Ảnh bị lỗi 404 rồi bạn. Mình không xem được. :)

      Bình luận
      • Tùng 9 bình luậnviết

        20/04/2022 lúc 08:18

        Ô, mình chuyển sang Imgur cho dễ dùng: https://imgur.com/a/WgHgKrx Ý mình là tạo ra hộp có khung viền, chèn trong bài post. Bạn xem giúp mình

        Bình luận
        • Trung Hiếu Quản lýviết

          20/04/2022 lúc 08:28

          Cái này giống tính năng colored boxes của theme Paradise. Nó có thể tạo bằng CSS và HTML (tham khảo) hoặc bằng plugin (tham khảo).

          Bình luận
          • Tùng 9 bình luậnviết

            20/04/2022 lúc 08:36

            Cảm ơn bạn! Mình cũng dùng plugin này nhưng không làm được giống vậy. Liệu có plugin nào khác không nhỉ? Chỉ cần tạo 1 hộp có nội dung tách riêng khỏi nội dung của bài viết ấy.

          • Trung Hiếu Quản lýviết

            20/04/2022 lúc 08:46

            Bạn soạn thảo bài viết bằng Classic Editor hay bằng Block Editor (Gutenberg) nhỉ?

          • Trung Hiếu Quản lýviết

            20/04/2022 lúc 08:51

            Nếu bạn dùng Classic Editor thì có thể tham khảo bài viết này nhé. Còn Block Editor thì mình không dùng nên cũng không rõ lắm. Nhưng bạn thử tìm xem, chắc chắn là có (nếu WordPress không trang bị sẵn thì cũng sẽ có plugin).

  2. vinawebseo 1 bình luậnviết

    06/05/2016 lúc 12:26

    Hi, cám ơn bác, mình sẽ ghé thăm blog bác thường xuyên.

    Bình luận
  3. kiên 79 bình luậnviết

    22/03/2015 lúc 11:14

    Dùng mấy plugin này nặng dã man thôi ta chơi github cho khỏe

    Bình luận
    • Trung Hiếu Quản lýviết

      22/03/2015 lúc 11:17

      Mình cũng dùng GistHub. :D

      Bình luận
      • kiên 79 bình luậnviết

        22/03/2015 lúc 11:19

        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
      • vinawebseo 2 bình luậnviết

        06/05/2016 lúc 12:09

        Đ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
        • Trung Hiếu Quản lýviết

          06/05/2016 lúc 12:10

          Tất nhiên là sẽ bị ảnh hưởng rồi. Nhưng mình nghĩ code vẫn hiển thị, chỉ là không đẹp như trước mà thôi. :P

          Bình luận
          • vinawebseo 2 bình luậnviết

            06/05/2016 lúc 12:19

            Nhanh thật, mới đó mà bác trả lời rồi:)

          • Trung Hiếu Quản lýviết

            06/05/2016 lúc 12:20

            Mình check mail tự động mà. Có ai bình luận là biết ngay. :)

    • vuivui 1 bình luậnviết

      08/02/2023 lúc 23:34

      Dùng github chèn code vào web như nào cho đẹp bạn ơi

      Bình luận
      • Trung Hiếu Quản lýviết

        09/02/2023 lúc 07:21

        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
  4. Tung Nguyen Thanh 4 bình luậnviết

    22/03/2015 lúc 10:28

    Còn có Crayon Syntax Highlighter không thấy bác nhắc tới. Em đang dùng cái này :)

    Bình luận
    • Trung Hiếu Quản lýviết

      22/03/2015 lúc 11:04

      Tất nhiên vẫn còn nhiều plugin tốt, tuy nhiên mình không thể đề cập hết chúng trong bài viết được. :)

      Bình luận
      • harrykhang 10 bình luậnviết

        10/12/2017 lúc 10:16

        lúc trước Khang cũng dùng cái crayon mà thấy cài nhiều plugin quá nên gỡ ra, giờ xài free của github vừa đẹp vừa free

        Bình luậ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