Hiển Thị Code Trong Bài Viết Theo Kiểu Của Syntax Highlighter

Các tín đồ của WordPress không còn xa lạ với SyntaxHighlighter, một plugin hỗ trợ việc hiển thị code trong bài viết với nhiều tùy chọn kèm theo như: view source, copy to clipboard, print rất thuận lợi cho người sử dụng. Và ngay bay giờ bạn cũng có thể mang những tính năng hấp dẫn đó vào Bloger một cách dễ dàng. Bạn có thể tìm hiểu về Syntax Highlighter.
Bạn có thể xem hình ảnh minh họa sau đây:



Để tiến hành cài đặt bạn hãy làm các bước như sau:
- Truy cập vào Layout ->Edit HTML, chèn đoạn mã sau vào ngay trước </head>


<link href='http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js'/>



- Tiếp theo chèn đoạn mã sau vào trước thẻ </body>


<script language="javascript">
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>



- Chuyển đổi các ký tự đặc biệt trong đoạn code cần chèn thành mã HTML ( < thành &lt; và > thành &gt;) trước khi chèn vào bài viết. Để chuyển đổi bạn hãy truy cập vào đây để chuyển đổi đoạn mã trước khi chèn nhé.

- Để hiển thị code trong bài viết bạn hãy chèn đoạn mã đã được chuyển sang chế độ HTML trên vào giữa hai thẻ trên.


<pre name="code" class="Cpp">
Chèn đoạn mã của bạn vào đây
</pre>


Để tiện cho mỗi lần dùng đến mà bạn không phải gõ lại bạn có thể lưu đoạn code đó vào Post Template (Mẫu đăng bài) trong Settings (Cài đặt) | Formatting (Đang định dạng)
Chúc bạn thành công!