Thứ Năm, 22 tháng 11, 2012

Hiển thị mã nguồn (code) trong Blogger với Syntaxhighliter

Hiển thị mã nguồn (code) trong Blogger với Syntaxhighliter
* Syntaxhighliter có thể tải về tại đường kết nối (link) sau : http://alexgorbatchev.com/SyntaxHighlighter/download/
* Trong cửa sổ quản lý blog chọn Template>Edit HTML
* Lưu một bản sao của template phòng trường hợp cần khôi phục lại
* Tìm thẻ (tag) </head> và chèn vào trước nó phần mã sau :

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<!--  brushes go here -->
<script type='text/javascript'>
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.all();
</script> 

* Sau đó sau câu chú (comment) "brushes go here" thêm vào phần mã sau :
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
* Bạn có thể thêm brush cho những ngôn ngữ khác bạn dùng, tham khảo tên tập tin javascript tại đây : http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
* Sau đó lưu lại template với phần mã vừa thêm này.
* Giờ ta có thể hiển thị mã với Syntaxhighlighter như sau : chú ý phần mã nằm ở phần chú "codes go here"
<script type="syntaxhighlighter" class="brush: html"><![CDATA[
 <!-- codes go here -->
 ]]></script>
* Hoặc dùng thẻ <pre>, nội dung nằm trong thẻ <pre> này phải được mã hóa html hợp lệ trước (mã hóa tại đây) :
<pre class="brush: html">
 <!-- codes go here -->
</pre>

Không có nhận xét nào:

Đăng nhận xét