[Blogger] Hiển thị source code trong Blogger

Bài viết này sẽ hướng dẫn các bạn hiển thị source code hightlight trong blogger

Bước 1: Copy source CSS

 Vào trang địa chỉ  http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css và copy tất cả code CSS trong trang đó.

Bước 2: Dán code CSS vào template

Mở chế độ chỉnh sửa HTML (Từ trang chủ click  Thiết kế ở góc trên bên phải click vào button Chỉnh sửa HTML )
Dán code Css vừa copy vào ngay trước dòng ]]--></b:skin>

Bước 3: trỏ đường link tới file javascript

Copy toàn bộ nội dung sau 

 <!-- Add-in CSS for syntax highlighting -->  
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>  
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>  
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>  
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>  
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>  
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>  
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>  
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>  
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>  
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>  
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>  
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>  
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>  

và Paste vào trước thẻ </head>

Bước 4: Copy và past đoạn code sau vào trước thẻ </body>

    <!-- Add-in Script for syntax highlighting -->  
    <script language='javascript'>  
    dp.SyntaxHighlighter.BloggerMode();  
    dp.SyntaxHighlighter.HighlightAll('code');  
    </script>  

Bước 5. Click "Xem trước" để kiểm tra xem liệu trang blog của bạn có bị hỏng bố cục hay không.

Bước 6: Sử dụng

Khi soạn thảo code , bạn vào chế độ soạn thảo HTML 

    
  
    ...Your html-escaped code goes here...  
    

Để hiển thị đúng thì các bạn phải dùng một chương trình để encode sourcode
ví dụ http://www.opinionatedgeek.com/dotnet/tools/htmlencode/encode.aspx
để encode của bạn về HTML rồi mới past vào (khi đang ở trong chế độ HTML)

Tips: Để đơn giản, các bạn paste code vào trang soạn thảo ở chế độ bình thường và chuyển qua chế độ HTML rồi thêm 2 tag mở và đóng ở đầu và cuối đoạn code là được


Để hiển thị các source code của các ngôn ngữ khác nhau các bạn có thể thay thế "cpp" bằng  c, c++, c#, c-sharp, csharp, css, delphi, pascal, java, js, jscript, javascript, php, py, python, rb, ruby, rails, ror, sql, vb, vb.net, xml, html, xhtml, xslt

Chúc các bạn thành công!

"Nguồn: http://heisencoder.net/2009/01/adding-syntax-highlighting-to-blogger.html"