Làm cách nào để đặt đoạn code trên bài viết của blogger

Bạn là người yêu thích lập trình, muốn chia sẻ những đoạn code hay lên mạng hay những đoạn code made in tự tui nhưng ngặt nỗi blogger không có thể [code]...[/code] như wordpress hay bo-blog. Do đó hôm nay mình sẽ hướng dẫn bạn một cách rất đơn giản mà cũng rất khoa học.

Đầu tiên, bạn cần tải SyntaxHighlighter. Sau đó giải nén upload tất cả các file lên bất kì host nào có thể link được từ blogger
Thêm đoạn code này vào sau dòng <!-- end outer-wrapper -->


<link href="http://YOUR HOST URL/SyntaxHighlighter.css" rel="stylesheet" type="text/css">
<script language="javascript" src="http://YOUR HOST URL/shCore.js">
Add ngôn ngữ bạn cần thêm tại đây
<script language="'javascript'">
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

Và bây giờ bạn sẽ add ngôn ngữ mà bạn muốn sử dụng sau dòng the shCore.js

<script language="javascript" src="http://YOUR HOST URL/shBrushPython.js"></script> 

Bạn có thể xem thử kết quả này tại đây
Các bạn có thể dùng sẵn đoạn code của mình dưới đây


<!-- Them code hien thi -->
<link href='http://anbinhtrong.110mb.com/syntax_high_lighter/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://anbinhtrong.110mb.com/syntax_high_lighter/shCore.js'/>
<!-- them ngon ngu -->
<script language='javascript' src='http://anbinhtrong.110mb.com/syntax_high_lighter/shBrushCSharp.js'/>
<script language='javascript' src='http://anbinhtrong.110mb.com/syntax_high_lighter/shBrushCpp.js'/>
<script language='javascript' src='http://anbinhtrong.110mb.com/syntax_high_lighter/shBrushCss.js'/>
<script language='javascript' src='http://anbinhtrong.110mb.com/syntax_high_lighter/shBrushDelphi.js'/>
<script language='javascript' src='http://anbinhtrong.110mb.com/syntax_high_lighter/shBrushJava.js'/>
<script language='javascript' src='http://anbinhtrong.110mb.com/syntax_high_lighter/shBrushJScript.js'/>
<script language='javascript' src='http://anbinhtrong.110mb.com/syntax_high_lighter/shBrushPhp.js'/>
<script language='javascript' src='http://anbinhtrong.110mb.com/syntax_high_lighter/shBrushPython.js'/>
<script language='javascript' src='http://anbinhtrong.110mb.com/syntax_high_lighter/shBrushRuby.js'/>
<script language='javascript' src='http://anbinhtrong.110mb.com/syntax_high_lighter/shBrushSql.js'/>
<script language='javascript' src='http://anbinhtrong.110mb.com/syntax_high_lighter/shBrushVb.js'/>
<script language='javascript' src='http://anbinhtrong.110mb.com/syntax_high_lighter/shBrushXml.js'/>
<!-- them ngon ngu -->
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
<!-- end code hien thi -->

Để thêm đoạn code vào bài viết viết bạn sử dụng thẻ
<pre name="code" class="python">
Lưu ý: Bạn nên thay dấu < thành <> thành > trước khi đặt giữa 2 thẻ. Nếu bạn xem dưới dạng html thì nó có dạng & và #38 và gt; hoặc lt;
Các ngôn ngữ hỗ trợ:

Language Aliases
C++ cpp, c, c++
C# c#, c-sharp, csharp
CSS css
Delphi delphi, pascal
Java java
Java Script js, jscript, javascript
PHP php
Python py, python
Ruby rb, ruby, rails, ror
Sql sql
VB vb, vb.net
XML/HTML xml, html, xhtml, xslt

Nhận xét

  1. Tốt nhất bạn nên upload file nguồn lên host riêng của bạn. Vì đây là host riêng nên dễ hết băng thông.

    Trả lờiXóa
  2. một cách khác đơn giản là copy&paste từ chỗ có sẵn định dạng rồi vào giao diện WYSIWYG của blogger, rồi chỉnh lại vài tag html cho đẹp :)

    Trả lờiXóa
  3. Như vậy sẽ rất thủ công, với lại mình là dân lập trình, không thích các từ khóa cùng màu với các từ khác.

    Trả lờiXóa
  4. copy&paste giữ nguyên định dạng mà, có phải làm gì đâu mà thủ công ;))

    Trả lờiXóa
  5. Vậy làm sao hiện được những từ khóa như include, cout, cin, writeln...

    Trả lờiXóa
  6. Đã ra version mới nhưng mình sẽ không cập nhật vì không tương thích với version cũ, và việc cập nhật sẽ dẫn đến hàng loạt bài bị sai. Hi hi, mong các bạn thông cảm.

    Trả lờiXóa
  7. đọc cái này kô hỉu:
    Lưu ý: Bạn nên thay dấu < thành < và > thành > trước khi đặt giữa 2 thẻ. Nếu bạn xem dưới dạng html thì nó có dạng & và #38 và gt; hoặc lt;

    Trả lờiXóa
  8. Vì lúc chèn code hướng dẫn, đôi khi là code HTML, nên bạn chuyển sang #38 cho nó hiểu đây là kí tự đặc biệt ( mình là dân amateur nên chỉ hiểu thế thôi)

    Trả lờiXóa
  9. Mình mới thêm file C# vào. Quên nữa. Bạn nào copy rồi viết bổ sung thêm nhé.

    Trả lờiXóa

Đăng nhận xét

Bài đăng phổ biến từ blog này

Kinh nghiệm tạo biểu đồ Use Case

PHÉP TOÁN XOR

Phần mềm hỗ trợ vẽ bản đồ tư duy trên máy tính

Power Designer 12.5