8.5.19 |
0
nhận xét
|
lượt xem
Ở 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 đ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 - Huy DC</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>CSS
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>
Chèn hình ảnh: Chỉ cần dán link hình ảnh - Upload ảnh
Chèn code: [pre]Code đã mã hóa [/pre]
Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”
Chèn link: Click để chèn link