Trang trí cho khung codeview - Sử dụng Javascript

[FD's BlOg] - Ở thủ thuật trước, mình có giới thiệu cách để post code vào bài viết, và trang trí cho khung chứa code với CSS (xem thêm ở đây). Bài viết này cũng sẽ hướng dẫn cách chèn code vào bài viết nhưng pro hơn và dễ dàng hơn.

Ở thủ thuật này ta sẽ sử dụng kết hợp giữa javasscript và CSS để post code vào bài viết và trang trí nó. Với CSS là để trang trí, còn Java là để hiển thị code .

Với thủ thuật trước, khi ta muốn post code vào bài viết, ta phải mã hóa những kí tự đặc biệt của code thành những chuỗi thay thế. Nhưng ở thủ thuật này, ta sẽ không phải mã hóa chúng, mà chèn thẳng chúng vào trong bài viết luôn. Và thủ thuật này cũng hỗ trợ hầu hết các ngôn ngữ như : HTML, Java, Javascript, SQL, php...

Do việc hỗ trợ tự động nhận dạng các ngôn ngữ, nên code của bạn khi chèn vào bài viết phải chính xác, nếu không nó sẽ báo lỗi.

Thủ thuật hỗ trợ 2 thẻ là <pre> và thẻ <textarea> để chèn code vào. Sử dụng 2 thẻ đều cho kết quả như nhau.

Hình ảnh minh họa :

Ta thấy trong hình, các class, id, title... đều được làm nổi bật (có màu xanh), và ở các ngôn ngữ khác thì nó sẽ hiển thị khác.

Do có sử dụng javascript, nên khi hiện thị bài viết nó phải load, và lúc load code nó sẽ trông giống như bên dưới:

☼ Bây giờ ta bắt đầu thủ thuật :
1. Đăng nhập blog
2. Vào bố cục (layout)
3. Vào chỉnh sửa code HTML (edit code HMTL)
4. Chèn đọan code Javascript bên dưới vào trước thẻ đóng </head>

<link href='http://data.fandung.com/js/codeview/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script src='http://data.fandung.com/js/codeview/shCore.js' type='text/javascript'/>
<script src='http://data.fandung.com/js/codeview/shBrushCpp.js' type='text/javascript'/>
<script src='http://data.fandung.com/js/codeview/shBrushCSharp.js' type='text/javascript'/>
<script src='http://data.fandung.com/js/codeview/shBrushCss.js' type='text/javascript'/>
<script src='http://data.fandung.com/js/codeview/shBrushDelphi.js' type='text/javascript'/>
<script src='http://data.fandung.com/js/codeview/shBrushJava.js' type='text/javascript'/>
<script src='http://data.fandung.com/js/codeview/shBrushJScript.js' type='text/javascript'/>
<script src='http://data.fandung.com/js/codeview/shBrushPhp.js' type='text/javascript'/>
<script src='http://data.fandung.com/js/codeview/shBrushPython.js' type='text/javascript'/>
<script src='http://data.fandung.com/js/codeview/shBrushSql.js' type='text/javascript'/>
<script src='http://data.fandung.com/js/codeview/shBrushVb.js' type='text/javascript'/>
<script src='http://data.fandung.com/js/codeview/shBrushXml.js' type='text/javascript'/>
<script src='http://data.fandung.com/js/codeview/shBrushRuby.js' type='text/javascript'/>

5. Tiếp tục xuống phía dưới chèn thêm đọan code Javascript bên dưới vào trước thẻ đóng </body>

<script language='javascript'>
function start() {
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code', true, true, false, 1, false);
}
window.onload = start;
</script>

6. Save template.

7. Để post code vào bài viết, bạn sử dụng 2 cách bên dưới

a. Dùng thẻ <pre>

<pre name="code" class="c-sharp">

Dán code ở đây (code nguyên mẫu)

</pre>

b. Dùng thẻ <textarea>

<textarea name="code" class="c#" cols="60" rows="10">

Dán code ở đây (code nguyên mẫu)

</textarea>

Nguồn internet

Chúc các bạn thành công.