Loading post navigation ...
 
 

Pro page

9
Nhận xét

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

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

[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 javasscriptCSS để 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.


Enter your mail address:

9

Ngankvn ®

Sặc !!! Thủ thuật gì mà nặng kinh khiếp vậy ???

fandung-tester

cũng ko nặng lắm đâu Ngân

Mạng chậm mới thấy lúc nó load thôi. Chứ mạng nhanh nó load code đc liền

phattrien@so

Hơi rắc rối và rối rắm nhỉ FD ơi, cái gì nó đơn giản gọn nhẹ thôi là được. Có điều mhiểu thêm về CSS, cám ơn bạn nhé

garivamaxo

mình nhớ cũng có 1 cách dùng khung codeview của bác thuthuatblog , rất đơn giản mà lại nhẹ nữa !
Cái này ko biết tính tăng ra sao , nhưng nhìn thấy dài dằng dặc thế này , thấy ngại quá :">

Dù sao cũng thanks bạn vì đã giới thiệu ! :)

tuanva

Tớ vừa thử thủ thuật này, thấy rất hay và hài lòng, cám ơn dũng nhiều nhé

Triệu Đình Phúc

hic bùn, làm theo hướng dẫn nhưng mà vẫn hok post code vào bài viết đc, hic nó ẩn mất tiu.
mình vào blog bác vọc mà số bài làm đc đếm trên đầu ngón tay, hic

Triệu Đình Phúc

roài roài vọc đc bài này roài ha haahaaaaa, củm ơn bác Dũng nghen hahahaaa, tại hồi nãy nó load nên mình hok thí ra, 1 lúc nó mới hiện ra code, hì hì hì

CMET

pác Dũng xem lại code giùm em, sao em post code lên mà nó thêm tùm lum dòng nào nữa làm khách chẳng biết đâu mà copy đoạn code gốc

Bang chủ hội môi giới Forex

;)) uhm, thủ thuật này làm giảm tốc độ load lắm đấy



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home