Làm đẹp code trong blog với SyntaxHighlighter

Làm đẹp code trong blog với SyntaxHighlighter

Có một vài comment trên Hỗn tạp Blog hỏi về cách hiển thị code sao cho đẹp giống như Hỗn tạp Blog đang dùng. Hôm qua bạn ruabien cũng gửi email cho tôi và hỏi về vấn đề này. Thấy các bạn quan tâm như vậy, nên tôi viết bài hướng dẫn cách làm, hy vọng có thể giúp các bạn có 1 blog đẹp hơn.

Vài nét về SyntaxHighlighter và các script cùng dạng


Script mà Hỗn tạp Blog đang dùng có tên là SyntaxHighlighter do Alex Gorbatchev phát triển (nghe tên giống người Nga quá mà không biết có phải không:D). 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ư Highlight.js, 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 Hỗn tạp 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


SyntaxHighlighter bao gồm các thành phần sau đây:

(1) 1 file shCore.js làm nền tảng cho việc hiển thị code
(2) 1 file shCore.css quy định các style bắt buộc cho code
(3) các nhóm file js dùng để tùy biến việc hiển thị code tương ứng với các ngôn ngữ lập trình (javascript, php, css, html, ...) , mỗi file js tương ứng với 1 ngôn ngữ (nói ngôn ngữ lập trình cũng không hoàn toàn đúng, VD như CSS, nhưng thôi tạm hiểu như vậy nhé)
(4) file CSS dùng để tạo theme cho code. Mỗi theme có 1 phong cách màu sắc khác nhau

Để cài đặt SyntaxHighlighter, trước tiên bạn download script (bao gồm tất cả các file js và css cần thiết), sau đó giải nén chúng ra và upload lên 1 host nào có thể chứa được javascript và css.

Sau đó chúng ta cần phải chèn các file js và css cần thiết vào blog. Giả sử bạn cần highlight ngôn ngữ Javascript với theme mặc định thì các file bạn cần chèn bao gồm:
- shCore.js và shBrushYourBrush.js
- shCore.css và shThemeDefault.css

Mở template của bạn lên và chèn đoạn code sau vào ngay trước thẻ </head>:

<link href="css/shCore.css" rel="stylesheet" type="text/css" />
<link type="text/css" rel="Stylesheet" href="/styles/shThemeDefault.css"/>

(lưu ý là sửa lại URL đến các file cho đúng)

Sau đó chèn đoạn code sau vào ngay trước thẻ </body>

<script type="text/javascript" src="js/shCore.js"></script>
<script type="text/javascript" src="js/shBrushJScript.js"></script>

<script type="text/javascript">
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.all();
</script>

(cũng lưu ý sửa lại URL của các file js tương ứng)

Nếu như bạn muốn highlight cho nhiều ngôn ngữ khác nữa, bạn cần phải chèn thêm các file js tương ứng vào phần code trước thẻ </body> (chỉ cần file js, file css không cần nữa). Như vậy là bạn đã hoàn thành xong phần cài đặt.

Trang chủ của SyntaxHighlighter có hướng dẫn cài đặt đầy đủ bằng tiếng Anh, các bạn có thể tham khảo thêm nếu muốn.

Cài đặt tổng hợp với phiên bản của Hỗn tạp Blog


Nếu bạn tiến hành cài đặt theo phương pháp trên, bạn sẽ mất khá nhiều thời gian để: một là tìm host lưu trữ các file js và css, hai là phải chèn thủ công nhiều đoạn code tương ứng với các ngôn ngữ cần thiết. Nhằm giảm bớt công sức cho các bạn, tôi có "nối" các file js và css lại với nhau thành 2 file (1 file js và 1 file css) và up chúng lên Google Code lưu trữ sẵn. Trong 2 file này, tôi dùng theme mặc định (theme mà Hỗn tạp Blog đang dùng) và chứa sẵn phần hiển thị code cho các ngôn ngữ thường gặp, bao gồm: PHP, Javascript, CSS, HTML (XML) và Bash. Nếu như bạn chỉ dùng các ngôn ngữ này thì chỉ cần include 2 file này vào trong template như sau:

Chèn đoạn code sau vào ngay trước thẻ </head>:

<link type="text/css" href="http://rilwis.googlecode.com/svn/trunk/blogger/syntaxhighlighter.css"/>

Sau đó chèn đoạn code sau vào ngay trước thẻ </body>

<script type="text/javascript" src="http://rilwis.googlecode.com/svn/trunk/blogger/syntaxhighlighter.min.js"></script>

Việc làm này còn có 1 lợi ích nhỏ nữa là blog của bạn sẽ chỉ có gửi 1 request cho file css và 1 request cho file js, tức là giảm số request của bạn đi khá nhiều, điều này phần nào giúp bạn tăng tốc website và đạt điểm cao hơn trong YSlow.

Hướng dẫn sử dụng


Sau khi cài đặt hoàn tất, để sử dụng SyntaxHighlighter 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 đó có 2 chú ý:

- Thứ nhất: 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ó.

- Thứ hai: đ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 Hỗn tạp Blog để làm điều này.

Ngoài cách sử dụng như trên (cách truyền thống), thì SyntaxHighlighter cũng bổ sung 1 cách dùng mới sử dụng thẻ script. Mẫu chèn của nó có dạng sau:

<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 Hỗn tạp 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.

Sử dụng SyntaxHighlighter trong WordPress


Vì SyntaxHighlighter là một javascript đơn thuần, nên nó có thể tích hợp được vào bất kỳ website nào, bao gồm cả WordPress. Các hướng dẫn cài đặt và sử dụng ở trên đều có thể áp dụng được cho WordPress mà không cần sửa đổi gì.

Tuy vậy, việc cài đặt trên WordPress có thể tiến hành dễ dàng hơn rất nhiều bằng cách sử dụng Plugin. Hiện tại có rất nhiều plugin dùng để cài đặt một cái SyntaxHighlighter này, đơn cử như SyntaxHighlighter Evolved, SyntaxHighlighter2 hay Syntax Highlighter Wordpress Plugin. Bởi vì tất cả các plugin này đều sử dụng SyntaxHighlighter để làm đẹp code, nên việc chọn dùng cái nào phụ thuộc phần lớn vào tính tiện dụng của chúng (có plugin cung cấp shortcodes để dễ dàng soạn thảo hơn, có plugin thì không). Và tất nhiên nhớ đọc kỹ hướng dẫn sử dụng trước khi dùng.

Bạn hiện có dùng script nào để làm đẹp code trong blog không? Nếu có, hãy chia sẻ suy nghĩ của bạn dưới comments cùng Hỗn tạp Blog!

Không có nhận xét nào :

Đăng nhận xét