Thứ Hai, 27 tháng 12, 2010

Hiển thị code với SyntaxHighlighter

Ghi lại kẻo quên =)) cái này thì không mới, chẳng qua ngại sau này gg nên post lại vào blog đọc cho nó tiện :">

Blogger mặc định không có thẻ code nên mình phải tự làm thêm, SyntaxHighlighter sẽ giúp hiển thị đoạn code của bạn giống như trên các trình edit code vậy, sau đây là cách cài.

Đầu tiên bạn down SyntaxHighlighter tại đây. Down về giải nén ra và up lên host của bạn các file sau: SyntaxHighlighter.css, shCore.js, shBrushCpp.js hay code nào mà bạn hay sử dụng trên blog, nếu không có host riêng thì nên sử dụng google site.

Bạn vào Design >> Edit HTML, nhớ backup Template của bạn nhớ. gõ ctrl + f tìm đến dòng sau </body>, chèn đoạn code này lên trên nó.
<link href='YOUR_GOOGLE_PAGES/SyntaxHighlighter.css' rel='stylesheet'
type='text/css'/>
<script language='javascript' src='YOUR_GOOGLE_PAGES/shCore.js'/>
<script language='javascript' src='YOUR_GOOGLE_PAGES/shBrushCpp.js'/>
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
Bây giờ vào bài viết của bạn, vào tab Edit Htm chèn code sau:
<pre name="code" class="Cpp">
 ...insert your code here...
</pre>
Cpp kia thay bằng code của bạn nếu như bạn dùng cái khác (như Css, Ruby, ...).
Chú ý là code thì chèn code đã mã hóa, cách mã hóa nhanh nhất là chèn ở chế độ viết (write hay editor gì đó, tại mình xài tiếng việt nên không rõ) sau đó chuyển qua tab edit html và thêm code trên.
Đầu trang