Ở bài viết này mình sẽ hướng dẫn các bạn thêm chức năng mở cửa sổ mới và tự bôi đen cho khung code. Để thêm tiện ích này vào blog bạn hãy thực hiện theo các bước hướng dẫn đơn giản bên dưới và demo ngay tại bài viết này
Chèn code vào template
Chèn đoạn code bên dưới trước thẻ đóng </body><script type="text/javascript">
//<![CDATA[
function copy_code(id) {
var ref = document.getElementById(id),
code = ref.getElementsByTagName('code')[0].innerHTML,
w_w = window.innerWidth,
w_h = window.innerHeight,
win = window.open('', '', 'left=' + ((w_w/2)-250) + ',top=' + ((w_h/2)-150) + ',width=500,height=300,scrollbars=0');
win.document.write('<!DOCTYPE html><html><head><title>Source Code - Troll VL</title><style type="text/css">*{margin:0;padding:0}body{padding:10px;text-aign:center}textarea{display:block;width:98%;height:300px;padding:1px 1px;margin:0 auto;text-align:left;overflow:auto}</style></head><body><textarea>' + code.replace(/<(.*?)>/g, "") + '</textarea><scr' + 'ipt type="text/javascript">var a=document.getElementsByTagName(\'textarea\')[0];a.focus();a.select();</scr' + 'ipt></body></html>');
}
function add_copy_button() {
var pre = document.getElementsByTagName('pre');
for (var i = 0; i < pre.length; i++) {
pre[i].id = 'code-' + i;
pre[i].className += ' quick-copy';
pre[i].innerHTML += '<a class="copy" href="javascript:copy_code(\'code-' + i + '\');">Copy</a>';
}
} add_copy_button();
//]]>
</script>Thêm đoạn CSS bên dưới vào trước ]]></b:skin>
pre {position:relative}
pre .copy {display:block;position:absolute;top:0;right:0;padding:2px 5px;}Thực hiện khi viết bài
Để thêm chức năng mở cửa sổ mới và bôi đen cho code bạn viết bài với chế độ HTML với cú pháp sau<pre><code> Nội dung đoạn code </code></pre>
1 comments :
Cảm ơn bạn đã ghé thăm Troll VL !
Insert Emoticons» Tạm thời ngăn không cho comment với chế độ ẩn danh vì có một số bạn không có thành ý cố tình spam. Mong các bạn thông cảm!
» Bạn nên viết bằng Tiếng Việt có dấu để mọi người dễ đọc, dễ bình luận
» Để liên hệ,góp ý và đóng góp bài viết bạn click vào đây
Sử dụng các thẻ sau cho comments
» Chèn nội dung vào blockquote <b rel="quote">Nội dung blockquote</b>
» Chèn nội dung vào note <em rel="note">Nội dung note</em>
» Chèn code vào khung pre <i rel="pre">Nội dung code</i>
» Chèn hình ảnh <i rel="image">Link hình ảnh</i>
» Chèn video từ youtube [youtube]link video[/youtube]
» Chèn link <i rel="anchor">Link</i>
Mã Hóa Code Tạo và xem trước comments Cancel Reply
&Convert
'Convert
"Convert
<Convert
>