Top 5 plugin giúp làm nổi bật code và syntax trong WordPress tốt nhất.
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
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
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 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
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. :)
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ỉ?
Ảnh bị lỗi 404 rồi bạn. Mình không xem được. :)
Ô, 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
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).
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.
Bạn soạn thảo bài viết bằng Classic Editor hay bằng Block Editor (Gutenberg) nhỉ?
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).
Hi, cám ơn bác, mình sẽ ghé thăm blog bác thường xuyên.
Dùng mấy plugin này nặng dã man thôi ta chơi github cho khỏe
Mình cũng dùng GistHub. :D
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
Đ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ỉ.
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
Nhanh thật, mới đó mà bác trả lời rồi:)
Mình check mail tự động mà. Có ai bình luận là biết ngay. :)
Dùng github chèn code vào web như nào cho đẹp bạn ơi
Bạn chèn code sau đây vào file functions.php của theme hoặc child theme đang sử dụng:
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.
Còn có Crayon Syntax Highlighter không thấy bác nhắc tới. Em đang dùng cái này :)
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. :)
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