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
Đầ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"/>Ở 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é!)
<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/>
<script type="text/javascript" src="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/scripts/shBrushJScript.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
<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"/>
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'>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ó.
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
Thẻ <pre>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
<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>
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!!
0 Nhận xét