Syntax Highlighter giúp bạn tô điểm, định dạng code của bạn và hiển thị nó trong 1 danh sách có đánh số dòng rõ ràng, chữ màu và đẹp mắt hơn. Hầu hết người dùng Blogspot thường chia sẽ code HTML, CSS hay JavaScript với mọi người bằng cách sử dụng Blockquotes nhưng với Syntax Highlighter này bạn có thể trình bày code của bạn 1 cách tốt hơn trên các trang web. Plugin này hiển thị 1 cách gọn gàng các code web như HTML, CSS, JavaScript, Php, Python, Sql, xml , v.v...
code được hiển thị theo dòng và được đánh số thứ tự, chữ màu đẹp mắt. Nó cung cấp cho người dùng các tùy chọn để in code, copy it to clip board hoặc xem source code. Với Syntax Highlighter bạn không chỉ có thể thêm code vào bên trong bài viết hoặc sidebar widgets mà còn có thể chèn nó vào bên trong Blogger comments.
A. Cài đặt Plugin Syntax Highlighter vào Blogspot
Để có thể sử dụng Syntax Highlighter đầu tiên bạn phải cài đặt vào Blog của bạn trước theo các bước như sau:
Đọc bài: Hướng dẫn cài đặt Plugin Syntax Highlighter cho Blogspot
B. Add SyntaxHighlighter Brushes and Styles for Blogspot
1 Vào Blogger > Template > Backup template của bạn
2 Vào Template (Mẫu) > Click Edit HTML
3 Dán đoạn code bên dưới vào trước </head>
<!--SYNTAX HIGHLIGHTER BY MBT STARTS--> <link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css' rel='stylesheet' type='text/css'/> <link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shCore.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCpp.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCSharp.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCss.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJScript.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPhp.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPython.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushRuby.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushSql.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushVb.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushXml.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPerl.js' type='text/javascript'/> <script language='javascript'> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf'; SyntaxHighlighter.all(); </script> <!--SYNTAX HIGHLIGHTER BY MBT ENDS-->
4 Save template của bạn lại thế là xong.
Hướng dẫn sử dụng
Sau khi cài đặt hoàn tất các bước trên, để sử dụng Syntax Highlighter trong bài viết, bạn cần viết đoạn code của bạn theo mẫu sau:
<pre class="brush: xml"> // đoạn code bạn cần hiển thị </pre>
Trong đó:
- Lưu ý đoạn class="brush: xml", nó nhằm thông báo cho SyntaxHighlighter biết bạn muốn hiển thị đoạn code này theo ngôn ngữ XML (HTML, XHTML). Nếu bạn muốn hiển thị code theo ngôn ngữ khác thì cần sửa brush này theo mẫu sau:
class="brush:php": cho PHP
class="brush:js": cho JavaScript (bạn cũng có thể dùng "javascript", "jscript" thay thế)
class="brush:css": cho CSS
class="brush:xml": cho XML, HTML, XHTML (có thể dùng "html", "xhtml" cũng được)
class="brush:bash": cho Bash
Ở trang chủ của SyntaxHighlighter có liệt kê danh sách đầy đủ các brush hiện có. - Đoạn code bạn muốn hiển thị phải không được mã hóa các ký tự < >. Bạn có thể sử dụng công cụ Code Converter của Tùng coder Blog để làm điều này.
<script type="syntaxhighlighter" class="brush: js"><![CDATA[
function foo()
{
if (counter <= 10)
return;
// it works!
}
]]></script>Nếu sử dụng phương pháp này, đoạn code của bạn không cần phải mã hóa các ký tự < >.
Phương pháp thứ nhất (chèn bằng thẻ pre) có ưu điểm là nó sử dụng semantic code (tạm hiểu là code đúng theo ngữ nghĩa của các thẻ), còn phương pháp thứ hai có ưu điểm là không phải mã hóa các ký tự HTML. Ưu điểm của cái này là nhược điểm của cái kia, và lựa chọn phương pháp sử dụng nào là tùy bạn. Tại Tùng coder Blog, tôi dùng cách đầu tiên.
Chi tiết thêm về các cách sử dụng, hãy tham khảo tài liệu tại trang chủ của SyntaxHighlighter.
Bạn hiện có dùng script nào để làm đẹp code trong blog của mình không? Nếu có, hãy chia sẻ suy nghĩ của bạn dưới comments cùng Tùng coder Blog!
