Trình bày code với Syntax Highlighter cho blogspot

Với các Blogspot về thủ thuật Blogspot thì kiếm cho mình được một mẫu trình bày code để tạo phong cách riêng cho mình là rất quan trọng. Hôm nay Namkna sẽ giới thiệu cho các bạn một plussin trình bày code với Syntax Highlighter  dành cho blogspot.

SyntaxHighlighter  rất nổi tiếng và được dùng bởi nhiều blogger chuyên nghiệp (trên Google nó toàn nằm thứ nhất hoặc thứ 2). Cho nên có thể tạm nói nó đảm bảo chất lượng và hoạt động ổn định. Về mặt thẩm mỹ, hầu hết các script đều cho phép bạn dùng các template khác nhau, nên nói cái nào đẹp hơn thì cũng không thuyết phục. Các tính năng thì chúng cũng gần na ná như nhau, vì vậy sự lựa chọn phần lớn là dựa trên kinh nghiệm đã test trên blog demo và nghe ngóng kinh nghiệm "khuyên dùng" của các blogger lớn mà thôi.

Xem trên – Demo for Themes Here

Cách tiến hành:

1. Đăng nhập vào Blogspot
2. Vào thiết Kế -> Chỉnh sửa HTML
3. Click chọn Mở rộng tiện ích mẫu.
4. Thêm đoạn code bên dưới vào trước thẻ  </head>  .

<link href='http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/2.1.364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>

Để sử dụng nó bạn chèn cấu trúc sau vào trong bài viết.

<pre class="brush: BRUSH-NAME">
Dán code của bạn vào đây
</pre>

Thay BRUSH-NAME thành mã của Bruss bạn muốn. Có rất nhiều mã Bruss bạn có thể xem trongDemo. Ví dụ mình thay BRUSH-NAME của Demo đầu tiên là xml thì sẽ được như sau:

<pre class="brush: xml">
Dán code của bạn vòa đây
</pre>

- Lưu ý: khi lắp vào Blog của bạn có thể khác vì tùy thuộcv ào độ rộng của phần main và độ dài của code. 
Để nhẹ cho Tempalte nếu bạn chỉ sử dụng 1 loại  Bruss thì bạn xóa bowys các Scrip Bruss còn lại ở phần màu xanh đầu tiên và giữ lại phần màu đỏ .
Nâng cao: nếu muốn bạn nhấn mạnh code ở dòng nào thì bạn thêm thuộc thính  hightlight:[số thứ tự dòng cách nhau bằng đấu phẩy]  vào trong thẻ  <pre>  như sau: Ví dụ ở đây mình muốn nhán mạnh dòng thứ 2 và dòng thứ 4.

<pre class="brush: xml;highlight: [2,4];">
Dán code của bạn tại đây.
</pre>

Khi đó dòng thứ 2 và thứ 4 sẽ in đậm như hình:

Bạn có thể cho thêm số dòng in đậm như bằngchách thêm số dòng vào code trên.

<pre class="brush: xml;highlight: [2,4,6];">
Dán code của bạn tại đây.
</pre>

5. Bạn có thể ẩn thanh Toolbar bằng cách thêm lệnh  toolbar: false .

<pre class="brush: xml; toolbar: false;">
 Dán code của bạn ở đây.
 </pre>

- Code vừa nhấn mạnh vừa ẩn toobal như sau:

<pre class="brush: xml;highlight: [2,4]; toolbar: false;">
Dán cde của bạn vào đây.
</pre>

Hiện nay đã có bản 3,0,83 bạn vào đây để xem thêm nha, 

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

Theo: stylifyyourblog - Namkna