Cài đặt Syntax Highlighter do Alex Gorbatchev phát triển giúp bạn hiển thị code đẹp hơn trong bài viết của bạn, hầu hết các script đều cho phép bạn dùng trên các template khác nhau của Blogspot.
Vài nét về Syntax Highlighter và các Script cùng dạng
Script mà Tungcoder đang dùng có tên là Syntax Highlighter do Alex Gorbatchev phát triển. Nếu bạn chịu khó Google, bạn sẽ thấy ngoài script này, còn có hàng loạt các script khác cũng giúp bạn hiển thị code đẹp như Highlightjs, GeSHI, Google Code Prettify, ... Từ khóa cho mấy cái này các bạn có thể thử "Syntax Highlighter", "Code beautifier", ...
Sở dĩ mà tôi chọn SyntaxHighlighter cho Tùngcoder Blog là vì nó rất nổi tiếng và được dùng bởi nhiều blogger chuyên nghiệp (trên Google nó toàn nằm thứ nhất hoặc thứ 2). Cho nên có thể tạm nói nó đảm bảo chất lượng và hoạt động ổn định. Về mặt thẩm mỹ, hầu hết các script đều cho phép bạn dùng các template khác nhau, nên nói cái nào đẹp hơn thì cũng không thuyết phục. Các tính năng thì chúng cũng gần na ná như nhau, vì vậy sự lựa chọn phần lớn là dựa trên kinh nghiệm đã dùng và nghe ngóng tình hình "khuyên dùng" của các blogger lớn mà thôi. Nếu các bạn không thích dùng SyntaxHighlighter, có thể thử các script khác cho đến khi vừa ý.
Cài đặt SyntaxHighlighter
1 Vào Blogger > Template > Backup template của bạn lại
2 Vào Template (Mẫu) > Click Edit HTML
3 Khung chỉnh sửa code hiện ra bạn click vào nó sau đó nhấn tổ hợp phím Ctrl + F > gõ vào ô tìm kiếm </body> rồi Enter (bạn làm các bước theo như hình bên dưới).
4 Copy đoạn code sau đây paste vào trước thẻ </body> vừa tìm được
<!-- Blogger Shortcode Plugin Dynamic JS File --> <script src='https://googledrive.com/host/0B-0Cl8129apgeHVoSHhCbk03elU' type='text/javascript'></script>
5 Tiếp theo bạn tìm đến thẻ </head> (làm tương tự như hình Bước 3 để tìm đến thẻ </head>)
6 Bạn copy đoạn code CSS sau đây và paste vào trước thẻ </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script> <link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
7 Save template của bạn lại thế là xong.
* Trên đây tôi vừa hướng dẫn các bạn cài đặt Syntax Highlighter làm đẹp code cho bài viết của Blogspot sau đây là cách sử dụng của nó.
* Read: Hướng dẫn cách sử dụng Syntax Highlighter cho Blogspot
