Thứ Năm, 23 tháng 8, 2012

Sử dụng syntaxHighlighting trong blogger

syntaxHighlighting là mã nguồn tuyệt vời để trang điểm code, giống như trình soạn thảo code NotePad++ hay các trình soạn thảo code khác.

Nếu bạn chưa có mã nguồn này thì download tại đây.
SyntaxHighlighting sử dụng javascript 100%, bạn có thể dùng trực tiếp mã nguồn trên server của nhà cung cấp hoặc download & upload lên host của mình.

Chú ý: Ở đây mình sử dụng phiên bản mới nhất. Phiên bản cũ có thể tìm thấy tại http://alexgorbatchev.com/pub/sh/

Để cài đặt & sử dụng syntaxHighlighting trên blog, theo các bước sau:
1). Vào Template Layout -> download để lưu lại bản gốc, nếu bạn muốn khôi phục lại.
2) Nhấn vào Edit HTML và dán code dưới đây vào ngay trước  thẻ </head>.


<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/>

<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'></script>

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'></script>

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'></script>

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'></script>

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'></script>

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'></script>

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'></script>

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'></script>

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'></script>

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'></script>

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'></script>

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'></script>

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js' type='text/javascript'></script>

<script language='javascript'>

SyntaxHighlighter.config.bloggerMode = true;

SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';

SyntaxHighlighter.all();

</script>


3) Lưu template.
Chú ý:

  • Trong template không được có đoạn javavscript nào bị lỗi, nếu lỗi trước đoạn mã của syntaxHighlighting thì mã nguồn này sẽ không chạy.

Sử dụng.
Với phiên bản SyntaxHighlighter 2.0 hoặc mới hơn. Đoạn code muốn hiển thị được đặt trong:

<script type="syntaxhighlighter" class="brush: html"><![CDATA[
#######YOUR CODE############
]]></script>
Ở đây mình hiển thị mã nguồn html, nếu muốn hiển thị ngôn ngữ khác thì thay đổi brush.
Một cách khác đơn giản hơn để sử dụng syntaxHighlighting là đặt code hiển thị trong cặp thẻ sau:
<pre class="brush: js">
#########YOUR CODE########
</pre>

Để chèn mã trong blogger, chuỗi code cần phải được mã hoá (encode). Blogger không chấp nhận trực tiếp ký tự đặc biệt như: < & >

Sử dụng công cụ này để mã hoá chuỗi:
http://www.string-functions.com/htmlencode.aspx

0 nhận xét:

Đăng nhận xét

 
Copyright © hoangit