Sử dụng SyntaxHighlighter 3.0.83 trong Blogspot

Cài đặt

Các bước cơ bản

Để SyntaxHighlighter làm việc trên trang web, bạn cần thực hiện các bước sau:

1. Thêm tệp tin cơ sở vào trang web: shCore.js and shCore.css
2. Thêm các dạng ngôn ngữ (brushes) mà bạn muốn (ví dụ như: shBrushJScript.js cho JavaScript, dưới đây là danh sách tất cả các ngôn ngữ available brushes)
3. Thêm shCore.css và shThemeDefault.css
4. Tạo đoạn trích mã nguồn với phương thức <pre /> hoặc <script /> (xem bên dưới)
5. Gọi phương thức JavaScript SyntaxHighlighter.all() JavaScript.

Sử dụng phương thức  <pre />

Ưu điểm: Làm việc ở mọi nơi, dễ dàng chuyển lại mã nguồn nếu script gặp vấn đề, thể hiện trên mọi trình đọc tin RSS đơn giản <pre />
Nhược điểm: Vấn đề lớn nhất với phương thức này là tất cả  dấu ngoặc móc phải đều phải được kết thúc đúng theo quy tắc HTML, ví dụ tất cả dấu "<" phải được thay thế bằng &lt; Như thế mới đảm bảo việc hiển thị đúng mã nguồn.
SyntaxHighlighter sẽ tìm kiếm tag <pre /> có thuộc tính được định dạng đặc biệt. Định dạng của thuộc tính giống với thuộc tính kiểu CSS. Tham số yêu cầu duy nhất là đường nét (xem định dạng), có thể sử dụng một trong số các tên brush.
Đây là một ví dụ:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<!-- Include required JS files --> <script type="text/javascript" src="js/shCore.js"></script> <!--     At least one brush, here we choose JS. You need to include a brush for every     language you want to highlight --> <script type="text/javascript" src="css/shBrushJScript.js"></script> <!-- Include *at least* the core style and default theme --> <link href="css/shCore.css" rel="stylesheet" type="text/css" /> <link href="css/shThemeDefault.css" rel="stylesheet" type="text/css" /> <!-- You also need to add some content to highlight, but that is covered elsewhere. --> <pre class="brush: js"> function foo() { } </pre> <!-- Finally, to actually run the highlighter, you need to include this JS on your page --> <script type="text/javascript">      SyntaxHighlighter.all() </script>

Sẽ được hiển thị:

?

1 2 3 4 5 6 7 8 9 10 11

<pre class="brush: js">     /**      * SyntaxHighlighter      */     function foo()     {         if (counter <= 10)             return;         // it works!     } </pre>

Sử dụng phương thức <script />

Lợi ích của phương thức này là có thể đặt bất cứ cái gì bên trong CDATA mà không cần phải thoát* bất cứ cái gì. Vì vậy nó cho phép thực hiện cắt và chèn trực tiếp từ trình soạn thảo yêu thích của bạn.
Ưu điểm: Không yêu cầu thoát các dấu móc nhọn phải*.
Nhược điểm:

1. Không thể trả lại, tag <script/> bị loại bỏ khỏi hầu hết các trình đọc tin RSS, vì vậy nếu bạn sử dụng SyntaxHighlighter trong Blog, tốt hơn hết là nên sử dụng phương thức <pre />.
2. Nếu bạn thêm vào một tag script đóng như </script>, thậm chí bên trong khối CDATA, hầu hết trình duyệt sẽ vội vàng đóng nhầm tag <script type="syntaxhighlighter">.