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.


Nhưng do trang web của anh Cường chưa có chức năng hiển thị mã lập trình nên mình xin copy bài viết từ trang blog của mình. Do đó có một vài chỗ sẽ chạy không đúng. Bạn có thể tham khảo bài viết của mình tại đây.
Đầ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/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 -->

Tốt nhất là đặt bên trong cặp thẻ ...

<!-- 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/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');

<!-- 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

13 Nhận xét

  1. Án Bình Trọng // Wednesday, August 27, 2008 at 5:41:00 AM PDT  

    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.

  2. Quang Cường // Wednesday, August 27, 2008 at 9:45:00 AM PDT  

    Có một cách để đặt code vào bài viết không biết bạn đã thử chưa?
    Dùng bất kỳ phần mềm phát triển web nào bạn đang sử dụng. Với mình thì mình sẽ dùng Macromedia Dreamweaver.
    - Từ Macromedia Dreamweaver mình sẽ new 1 file HTML
    - Chọn Tab Design
    - Gõ hoặc dán đoạn mã mà bạn cần hiển thị
    - Sau đó click vào Tab Code
    - Tiếp theo tạo bài viết cần viết ở blogger.com
    - Chọn chế độ Chỉnh sửa HTML
    - Copy và dán đoạn code đang hiển thị ở Tab Code
    Bây giờ bạn có thể công báo Blog và xem lại kết quả.

  3. Quang Cường // Wednesday, August 27, 2008 at 9:49:00 AM PDT  

    Bạn có thể chọn 1 trong 2 cách đó để đặt code vào bài viết của bạn.

  4. Án Bình Trọng // Wednesday, August 27, 2008 at 8:23:00 PM PDT  

    Nhưng đây là cách mình tìm trên http://code.google.com. Nếu theo như bạn nói, mình sẽ dùng phần mềm notepad++, hiển thị mã lập trình rất tốt.
    Thứ 1:Nhưng cách này rất có ích. Chẳng hạn như khi bạn đi vào tiệm Net, không lẽ bạn bê nguyên phần mềm Macromedia Dreamweaver.(Không phải nhà bạn nào cũng có Internet)
    Thứ 2: Máy nhà mình thuộc loại yếu, celeron 3 thôi, sao cài nỗi Macromedia Dreamweaver.
    Tóm lại xài cách nào cũng được, tùy theo nhu cầu của mình. Tại vì thấy thuthuatblog.com và vietnamwebguide.com có bàn luận nên mình cũng thử.

  5. Án Bình Trọng // Wednesday, August 27, 2008 at 8:24:00 PM PDT  

    Àh, mà quên, Macromedia Dreamweaver có hiển thị màu của các từ khóa khác nhau như notepad++ không?

  6. Quang Cường // Wednesday, August 27, 2008 at 8:30:00 PM PDT  

    :) Vô tư luôn. Vì nó chuyên nghiệp nên nó có những bản lĩnh của những phần mềm khác. Nó hỗ trợ nhiều thứ tốt lắm.
    Mình không có ý là các bạn phải cài đặt Macromedia Dreamweaver, ý mình chỉ là bạn cần có 1 phần mềm Web Editor thôi. Miễn sao là có thể tạo được HTML ở chế độ Code và Design thôi.
    Chúc ABT Vui...

  7. 116 TRUNG TÂM CỨU HỘ MÁY TÍNH & AN NINH MẠNG THẾ GIỚI // Monday, September 15, 2008 at 1:47:00 AM PDT  

    huong dan minh post bài viết kem các doan mã minh hoạ bạn ơi

  8. Dan choi 10X // Monday, October 27, 2008 at 8:49:00 PM PDT  

    Bài viết này rất ổn, mình đã thử và ok

  9. nguyen huu tuan // Thursday, November 20, 2008 at 2:31:00 AM PST  

    chao ban !
    minh la tuan moi tap lam webs thoi a minh da co doan ma code ve mot clip ki niem ban be minh muon dua vao webs ma minh so may dua ban no lam duoc doan code do y minh la minh muon doc quyen doan ma do a tai minh mat rat nhieu thoi gian ve no minh ko muon ho lay di mot cach vo tu duoc ban co the giup minh ko ban! lam on di ban

  10. Quang Cường // Thursday, November 20, 2008 at 2:43:00 AM PST  

    Theo mình được biết thì bạn chỉ cần dùng 1 ảnh trong suốt để che đoạn video đó lại và mã hóa đoạn code video đó đi là được.
    Chúc bạn thành công!
    Nên chia sẻ, trước khi chia sẻ sửa lại đoạn Video là được.

  11. Enigmatic // Saturday, August 1, 2009 at 2:07:00 AM PDT  

    Cho mình hỏi SyntaxHighlighter trên có đưa vào forum phpbb/phpbb2/phpbb3 được không?
    Mình sử dụng bb2 mà mình chèn thẻ code C++ và các ngôn ngữ khác vào không dc, bạn nào biết chỉ mình với..

  12. Enigmatic // Saturday, August 1, 2009 at 2:17:00 AM PDT  

    code của bạn có sử dụng cho forum phpbb dc không?
    và sử dụng như thế nào vậy?

  13. Hien // Thursday, August 13, 2009 at 3:37:00 AM PDT  

    anh cường có thể hướng dẫn em chèn links lên blogger không ví dụ như để cái chữ trang chủ ở đầu trang giống anh ý

Post a Comment

Chào bạn, cảm ơn bạn đã để lại nhất xét trên blog của mình. Hãy để lại tên bạn và liên kết để mình có thể làm quen với bạn.