Tab Menu

SyntaxHighlighter: Codeview cho web, blog

AnhDaiDienBaiDang Một có một blog, webpage chia sẽ công nghệ, kiến thức lập trình sẽ không tránh khỏi những lúc bạn post lên vài đoạn code. Cách hiển thị đoạn code bình thường như văn bản sẽ rất khó để quan sát. Có một Plugin giúp ta có 1 vùng code view như trên một môi trường lập trình chuyên nghiệp như Dreamweaver ngay trên blog, site. Nó là plugin của Wordpress nhưng cũng được public hóa dưới dạng Javascript cho mọi site.

Xem demo Tại đây
Trước khi hướng dẫn các bạn cài đặt, s xin nói sơ về cấu trúc của plugin khi chèn vào site. Nó gồm 4 phần:
  1. Đoạn code "lõi" trong: shCore.js
  2. Theme của vùng hiển thị: shCore.css
  3. Brush ngôn ngữ của code (C#,JS...): shAutoloader.js *Only 3.0
  4. Theme của Brush (màu sắc ngôn ngữ): shThemeDefault.css
Bây giờ s sẽ cài đặt SyntaxHighlight phiên bản mới nhất tính đên lúc này là 3.0.83. Để biết những thay đổi của phiên bản mới này bạn hãy vào: SyntaxHighlighter
Đầu tiên hãy chèn những file Javascript sau vào thẻ <head> </head>:
.<script type="text/javascript" src="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/scripts/shCore.js"/>
<link rel='stylesheet' type='text/css' href='http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/styles/shCore.css' />
<link rel='stylesheet' type='text/css' href='http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/styles/shThemeDefault.css' />
<script type="text/javascript" src="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/scripts/shAutoloader.js/>
Ở phiên bản 3.0 này SyntaxHighlight (SH) đã cho phép tự động load lên hơn 30 Brush ngôn ngữ với shAutoloader.js. Nếu bạn không thích thì thay nó bằng ngôn ngữ mà bạn cần, truy cập vào link này để chọn ngôn ngữ: Brush ngôn ngữ Ví dụ s chỉ dùng dùng JavaScript, Css, C# (nhớ bỏ dòng shAutoloader.js nhé!)
<script type="text/javascript" src="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/scripts/shBrushJScript.js"/>
<script type="text/javascript" src="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/scripts/shBrushCss.js"/>
<script type="text/javascript" src="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/scripts/shBrushCSharp.js"/>
Ngoài cách dùng liên kết như trên, bạn cũng có thể download các file js để dùng riêng: Tại đây
Tiếp theo bạn cũng chèn vào đoạn code sau để khởi động SH trên site bạn
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
Vậy là xong. Để sử dụng bạn có thể sử dụng 2 thẻ sau <pre> </pre>, <script> </script> . Nên dùng thẻ <pre> </pre> vì ít xảy ra lỗi hơn nhưng có nhược điểm RSS không nhận nó.
Thẻ <pre> 
<pre class="brush: js">
function demo()
{
 alert("Enjoy it!!");
}
</pre>
Thẻ <script> cần lưu ý [CDATA là bắt buộc. 
<script type="syntaxhighlighter" class="brush: js"><![CDATA[
  function foo()
  {
 alert("Enjoy it!!");
  }
]]></script>
Class="brush: x" với x là từ khóa đại diện cho ngôn ngữ bạn muốn hiển thị. Xem thêm từ khóa Tại đây 
Với một vài blog như blogger thì sẽ không chấp nhận thẻ code vì thế trước khi chèn các bạn chuyển code thành text.
Chúc thành công!!

Hiện có 1 comments :

Kiến Hâu

Cảm ơn bạn nhá, nhưng sao không thấy nó hoạt động

Post a Comment

Bạn có thể tự do cho ý kiến, thảo luận về bài viết này nhưng phải theo những điều khoản sau:
- Phải nghiêm túc, không dung tục, không spam.
- Nội dung phải liên quan đến bài viết.
- Không mang tính chất chính trị...
- Hạn chế sử dụng Ẩn danh, hãy dùng Tên/URL để thay thế.
Lưu ý : Có thể sử dụng tag HTML cơ bản trong comment: br, b, i, u, a href= ...

:)
:(
;)
:D
=))
:-/
:x
I-)
@-)
=D:
:-q
:-w
[-X
B-)
:((
:-B
:-h
:x(
:-*
~O)
@};-

About

RSS
Coming soon... :))