Tích hợp SyntaxHighlighter cho các code snippet

Trang chủ : http://alexgorbatchev.com/SyntaxHighlighter/
Version hiện tại là 3.0.38, nhưng ở đây tôi sử dụng version 2.1.364 theo link tham khảo dưới đây
http://geektalkin.blogspot.com/2009/11/embed-code-syntax-highlighting-in-blog.html

Đặc điểm nổi bật SyntaxHighlighter :

• Cho phép highlight nhiều ngôn ngữ lập trình khác nhau, cụ thể các language đã được support theo list  http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/.
  Để biết highlight theo ngôn ngữ nào ta chỉ việc thay đổi brush tương ứng.
   (eg ngôn ngữ là javascript : class="brush: js" , ngôn ngữ là java  class="brush: java" )
• Hỗ trợ theme, có nhiều theme cho ta lựa chọn, cụ thể : http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/
  Việc thay đổi theme đơn gian là việc thay đổi các css file tương ứng: 

Note : SyntaxHighlighter  có sử dụng một file flash để xử lý copy button ("copy to clipboard"),ta nên check xem link file flash này còn ok ko nhé.

Cấu hình cơ bản để sử dụng SyntaxHighlighter

Các bước để tích hợp và sử dụng SyntaxHighlighter cơ bản gồm :

1. Khai báo hai file shCore.js and shCore.css
2. Khai báo các Brushes muốn  sử dụng ( chính là việc khao báo tương ứng cho các language muốn dùng ).
3. Khai báo theme muốn dùng : eg shThemeDefault.css
4. Tạo các code snippet với một trong hai cách sử dụng : <pre> tag , và <script> tag 
5. Thiết lập các options config và Call SyntaxHighlighter.all() JavaScript method để SyntaxHighlighter apply vào các code snippet trên trang.

Eg :  Với blogspot ta copy và past đoạn mã dưới đây ngay trước thẻ </head> của mã HTML của blog ( phần Template --> Edit HTML trong "Live on Blog" ). 

Ví dụ sử dụng <pre >Tag  với mã java trong các post

public class NewClass {
 
 public static void main(String[] args) {
  System.out.println("Hello !");
 }

}

Kết quả của đoạn mã trên:

public class NewClass {
 
 public static void main(String[] args) {
  System.out.println("Hello !");
 }

}

Tương tự các sử dụng <script /> tag:

Lưu ý : ta phải chuyển chế độ HTML thay vì Compose vì đây là mã HTML cần render chứ ko phải content view.

Đặc điểm hai cách dùng <pre> và <script> :

1. Không thể nồng hai tag <script>, <pre> có thể nồng, <pre> cỏ thể bao <script>.
2. Nội dung bên trong <pre></pre> phải là   HTML escaped. Ví dụ  toàn bộ các dấu nhỏ hơn "<" phải được chuyển sang dạng "&lt;" để đảm bảo render chính xác.Ta có thể tham khảo site dưới đây để biết từ Html source code được render thành các html tag trên trình duyệt nó sẽ biến đổi như thế nào :http://accessify.com/tools-and-wizards/developer-tools/quick-escape/default.php
3. Cách dùng <script> thì toàn bộ nội dung đặt bên trong CDATA block nên không cần escape. Điều này thích hợp khi ta copy/past các snippet để đưa vào blog.Nhược điểm là ko thể nồng hai hay nhiều các <script>.

Tùy từng trường hợp, yêu cầu mà ta có thể lựa chọn cho phù hợp.

Tham khảo thêm : 

install step 

http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html

SyntaxHighlighter.config

http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/