[Syntaxhighligher] Làm đẹp code trong bài viết tốt nhất

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài [Syntaxhighligher] Làm đẹp code trong bài viết tốt nhất

Hi you! trong bài viết này mình sẽ chỉ dẫn bạn tích hợp tính năng make up cú pháp với syntaxhighligher cho mọi website. Tìm trên google có hàng đống thư viện giúp bạn làm điều này, nhưng thông dụng nhất vẫn là syntaxhighligher, nhiều blogs mình đều thấy họ cài thư viện này vào trong web. Trước tiên, bạn tải thư viện tại đây.

Cài đặt Syntaxhighlighter

Chèn các file của Syntaxhighlighter sau đây vào trong thẻ head.

   

Trong đó 2 file core là shCore.js shCore.css . Syntaxhighligher hỗ trợ nhiều theme khác nhau, mỗi theme được sử dụng bằng phương pháp thêm thư viện giao diện theme, tại đây mình thí dụ sử dụng theme mặc định shThemeDefault.css . Bạn thêm file này vào head.

Để tô cú pháp của ngôn ngữ cần thêm một file script nữa, với mỗi ngôn ngữ sẽ được tương ứng một thư viện js cho ngôn ngữ đó, ví dụ: shBrushJScript.js cho javascript.

   

Chèn nội dung code vào thẻ pre có tên class đặc biệt và syntaxhighligher sẽ nhận dạng ngôn ngữ bởi “class” để xác định và trang điểm cho cú pháp của ngôn ngữ.

   
  function foo() { }  

Cuối cùng chúng ta gọi hàm SyntaxHighlighter.all() để hiển thị nội dung code với mầu sắc được tổ điểm bằng css và html, giống như thế này.
làm đẹp code cho website với syntax highlighter

Xem tên brush và thư viện tương ứng của ngôn ngữ được syntaxhighligher hỗ trợ tại đây.

Bổ xung thêm tính năng cho bản 2.1, hỗ trợ make up nội dung code chứa trong thẻ script . Tính năng tô đậm áp dụng cho thẻ script có tính chất type="syntaxhighlighter" và tên class quy định bởi syntaxhighligher.

   

Thiết lập cấu hình chung

Bạn có thể thiết lập một vài cấu hình trước lúc gọi hàm SyntaxHighlighter.all()

SyntaxHighlighter.config

Đối tượng này chứa cấu hình chung, được áp dụng cho tất cả những thành phần trang điểm code có trên trang, nếu bạn muốn từng phần code hiển thị với nhiều mẫu mã không trùng lặp thì không thiết lập tính chất này.
Ví dụ, bật tính năng hỗ trợ highlight code trong blogger.com

 SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.all();  

Tham khảo các tính chất khác ở bảng dưới:

Name Value Description
bloggerMode false Tích hợp vào Blogger.com . Nếu bạn sử dụng thư viện này trên blogger.com, thì cần bật option này.
strings Object Cho phép bạn thay đổi các loại chữ mặc định, xem chi tiết tại đây
stripBrs false Nếu website của bạn tự động thêm thẻ
ở cuỗi mỗi dòng code thì option này sẽ bỏ qua ký tự đó.
tagName "pre" thay thế tag mặc định “pre” chứa code. Khai báo sử dụng thẻ html khác tại đây.

Xem thêm các cài đặt khác tại trang chủ: http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/

Syntaxhighligher trong wordpress

Nếu website của bạn sử dụng wordpress thì cài tính năng trang điểm code với syntaxhighligher rất đơn giản, bạn cài plugin mang tên “SyntaxHighlighter Evolved” là có thể sử dụng được ngay, tính năng này được hỗ trợ mặc định trên wordpress.com. Tải plugin SyntaxHighlighter Evolved tại đây.

Cài đặt plugin như bình thường, sau khi kích hoạt plugin bạn có thể sử dụng ngay được. Chèn nội dung code vào trong shortcode có tên lấy bằng tên của ngôn ngữ bạn muốn hiện trên Web sửa máy tính ITS: [language] Ví dụ:

 [ php ]code php here[ /php ] [ css ]code css here[ /css ]  

Nếu muốn đổi theme hay thiết lập một vài cài đặt mong muốn khác thì vào Settings -> Syntaxhighligher . Cách sử dụng shortcode và tham số được viết rõ rệt ở phía dưới, bạn xem ở đó nhé. Chúc thành công !

Nếu bạn thấy bài viết này hữu ích, hãy chia sẻ với bạn bè bằng cách nhấn nút chia sẻ ở bên dưới. Theo dõi chúng tôi trên Twitter và Facebook

Bài viết [Syntaxhighligher] Làm đẹp code trong bài viết tốt nhất được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang