SyntaxHighlighter: Codeview cho web, blog

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:

Đoạn code "lõi" trong: shCore.js
Theme của vùng hiển thị: shCore.css
Brush ngôn ngữ của code (C#,JS...): shAutoloader.js *Only 3.0
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!!

SyntaxHighlighter: Codeview cho web, blog

1 comments :

Comments

SyntaxHighlighter: Codeview cho web, blog

RELATED POSTS

1 comments :