Tích hợp Syntax Highligher vào Blogger, Blogspot

Hôm nay tôi sẽ giới thiệu cách tích hợp Syntax Highlighter vào Blogger, Blogspot.

Đầu tiên thì chúng ta phải biết Syntax Highlighter là gì?
Syntax Highlighter là thành phần javascript làm nổi bật cú pháp hiển thị đoạn code hỗ trợ nhiều ngôn ngữ lập trình (hình 1). Đối với những blogger thường hay viết những bài tut lập trình thì đây là trợ thủ đắc lực, không thể thiếu được.

Hình 1- Làm nổi bật code C# với Syntax Highlighter

Để tích hợp Syntax Highlighter vào Blogger, Blogspot, ta làm như sau:

Bước 1: Nhấn nút Mẫu trong trang quản trị Blog, sau đó nhấn nút Chỉnh sửa HTML trong phần Trực tiếp trên Blog (hình 2).

Hình 2

Bước 2: Nhúng đoạn code dưới đây vào trong thẻ head:

<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"></link>
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css"></link>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript">
<!-- add brushes here -->
<script type='text/javascript'>
   SyntaxHighlighter.config.bloggerMode = true;
   SyntaxHighlighter.all();
</script>

<!-- add brushes here -->
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript">

Giải thích code:
- Đoạn

<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"></link>
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css"></link>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript">
<!-- add brushes here -->
<script type='text/javascript'>
   SyntaxHighlighter.config.bloggerMode = true;
   SyntaxHighlighter.all();
</script>

Đoạn code này để nhúng thành phần javascript SyntaxHighlighter vào Blogger của bạn

- Đoạn

<!-- add brushes here -->
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript">

Đoạn này để nhúng mẫu nổi bật (brush) của ngôn ngữ lập trình cụ thể nào đó, vì dụ ở đoạn code trên là brush của ngôn ngữ javascript. Để nhúng brush khác thay chữ in đậm trong đoạn http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js thành tên File Name khác theo hình 3 tùy theo bạn muốn nhúng brush của ngôn ngữ lập trình nào

Hình 3 - Bảng Brushes của SyntaxHighlighter

Như trang Blog của tôi thì nhúng như sau (hình 4):

Hình 4 - Code nhúng SyntaxHighlighter trong Blog của tôi

Bước 3: Dùng SyntaxHighlighter trong bài viết blog

Vào bài viết và nhấn nút HTML (hình 5) và đặt trỏ chuột vào chỗ cần dán code, gõ code <pre class="brush:language"> ... </pre>, bạn thay chữ language trong brush:language với tên ngôn ngữ lập cần nhúng theo brush aliases trong hình 3 và paste đoạn code thay thế ... trong thẻ pre