Trang trí cho khung codeview - Sử dụng Javascript
[ PanaMoney ] 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 .
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.
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
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:
Tags:
Thủ thuật Blog
Ở 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 .
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://fandung.110mb.com/JS-files/codeview/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script src='http://fandung.110mb.com/JS-files/codeview/shCore.js' type='text/javascript'/>
<script src='http://fandung.110mb.com/JS-files/codeview/shBrushCpp.js' type='text/javascript'/>
<script src='http://fandung.110mb.com/JS-files/codeview/shBrushCSharp.js' type='text/javascript'/>
<script src='http://fandung.110mb.com/JS-files/codeview/shBrushCss.js' type='text/javascript'/>
<script src='http://fandung.110mb.com/JS-files/codeview/shBrushDelphi.js' type='text/javascript'/>
<script src='http://fandung.110mb.com/JS-files/codeview/shBrushJava.js' type='text/javascript'/>
<script src='http://fandung.110mb.com/JS-files/codeview/shBrushJScript.js' type='text/javascript'/>
<script src='http://fandung.110mb.com/JS-files/codeview/shBrushPhp.js' type='text/javascript'/>
<script src='http://fandung.110mb.com/JS-files/codeview/shBrushPython.js' type='text/javascript'/>
<script src='http://fandung.110mb.com/JS-files/codeview/shBrushSql.js' type='text/javascript'/>
<script src='http://fandung.110mb.com/JS-files/codeview/shBrushVb.js' type='text/javascript'/>
<script src='http://fandung.110mb.com/JS-files/codeview/shBrushXml.js' type='text/javascript'/>
<script src='http://fandung.110mb.com/JS-files/codeview/shBrushRuby.js' type='text/javascript'/>
<script src='http://fandung.110mb.com/JS-files/codeview/shCore.js' type='text/javascript'/>
<script src='http://fandung.110mb.com/JS-files/codeview/shBrushCpp.js' type='text/javascript'/>
<script src='http://fandung.110mb.com/JS-files/codeview/shBrushCSharp.js' type='text/javascript'/>
<script src='http://fandung.110mb.com/JS-files/codeview/shBrushCss.js' type='text/javascript'/>
<script src='http://fandung.110mb.com/JS-files/codeview/shBrushDelphi.js' type='text/javascript'/>
<script src='http://fandung.110mb.com/JS-files/codeview/shBrushJava.js' type='text/javascript'/>
<script src='http://fandung.110mb.com/JS-files/codeview/shBrushJScript.js' type='text/javascript'/>
<script src='http://fandung.110mb.com/JS-files/codeview/shBrushPhp.js' type='text/javascript'/>
<script src='http://fandung.110mb.com/JS-files/codeview/shBrushPython.js' type='text/javascript'/>
<script src='http://fandung.110mb.com/JS-files/codeview/shBrushSql.js' type='text/javascript'/>
<script src='http://fandung.110mb.com/JS-files/codeview/shBrushVb.js' type='text/javascript'/>
<script src='http://fandung.110mb.com/JS-files/codeview/shBrushXml.js' type='text/javascript'/>
<script src='http://fandung.110mb.com/JS-files/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
b. Dùng thẻ Textarea
<pre name="code" class="c-sharp">
Dán code ở đây (code nguyên mẫu)
</pre>
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>
Dán code ở đây (code nguyên mẫu)
</textarea>
Nguồn Fandung.com
Chúc các bạn thành công.
Tin liên quan
Comments[ 0 ]
Đăng nhận xét
- Nghiêm cấm nói tục, chửi thề trong blog. Mọi hành vi vô văn hóa không được chấp nhận trong blog này.
- Không sex, quảng bá trang web cấm tại đây.
- Các bài viết phải tuân thủ yêu cầu tiếng việt, đầy đủ dấu.
- Bạn có thể sử dụng các thẻ html cơ bản cho comment của mình