zzPrettifyver.2 sẽ làm cho khung code của bạn đẹp hơn với Google Code Prettify và tiện lợi hơn với chức năng chọn toàn bộ, chuyển dòng.
CHỨC NĂNG
- Phân dòng code
- Màu riêng cho các phần tử, biến, hàm...
- Chọn toàn bộ nội dung code.
- Cuộn nhanh đến dòng chỉ định.
- Chuyển đổi chế độ xem code gốc và code prettify.
- Sửa lỗi màu trên punBB.
- Giao diện mới và sửa một số lỗi nhỏ ở ver.1
DEMOGiao diện zzPrettify v2 HƯỚNG DẪNBƯỚC 1ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet - Code:
/* zzPrettify v2 by devs forumvi */ .codebox,.codebox *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} .codebox{background:transparent;border:0 none;margin:0 0 10px} .codebox dd{background:transparent;margin:0;padding:0} .codebox > dt{position:relative;background:url(//i83.servimg.com/u/f83/16/58/89/73/page_w10.png) no-repeat scroll 10px center #777;color:#FFF;border:1px solid #e2e2e2;height:30px!important;border-bottom-width:0;line-height:26px!important;padding:2px 10px 0 30px!important} .codebox dd.cont_code{background:#FFF;max-height:100%!important;overflow:visible!important;position:relative;border:1px solid #e2e2e2} .cont_code > code{overflow:auto;white-space:pre;display:block;line-height:17px;padding:10px;word-break:break-word} .pun .controlCode,.pun .controlCode *{transition:all .3s;-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;-ms-transition:all .3s} .pun .controlCode{position:absolute;right:0;top:-30px;opacity:0} .pun .codebox:hover .controlCode{opacity:1} .pun .controlCode *{width:20px;height:20px!important;display:block;float:right;border:1px solid #999;background:url(http://i.imgur.com/ccn5y7c.png) no-repeat center #FFF;margin:4px 4px 0 0 !important} .pun .controlCode input.findLine{background:url(http://i.imgur.com/8fxbcQy.png) no-repeat center #FFF!important;padding:0!important} .pun .controlCode input.findLine:focus{background:#FFF!important;width:40px;text-align:center;color:#333;font-size:11px} .pun .controlCode img.textCode{background-image:url(http://i.imgur.com/gXbPqhr.png)} .pun .controlCode img.textCode.pretty{background-image:url(http://i.imgur.com/FJOia1z.png)} .pun .controlCode :hover{cursor:pointer;border-color:#FFF} /* Code prettify by google */ .prettyprint.linenums{box-shadow:inset 50px 0 0 #eeeeee, inset 51px 0 0 #ececf0} .prettyprint ol.linenums{padding-left:44px;margin:0} .prettyprint ol.linenums li{position:relative;padding-left:12px!important;color:#999;line-height:17px;text-shadow:0 1px 0 #fff;white-space:normal} .pln{color:#48484c} @media screen { .lit{color:#195f91} .fun{color:#dc322f} .str,.atv{color:#D14} .kwd,.tag{color:#1e347b} .typ,.atn,.dec,.var{color:teal} .com,.pan,.opn,.clo{color:#93a1a1} } @media print,projection { .com{color:#600;font-style:italic} .typ{color:#404;font-weight:700} .lit{color:#044} .pan,.opn,.clo{color:#440} .atn{color:#404} .str,.atv{color:#060} .kwd,.tag{color:#006;font-weight:700} }
BƯỚC 2ACP >> Modules >> HTML & JAVASCRIPT >> Javascript Codes >> Create a new javascript:
Placement : In the topics Javascript Code * : - Code:
/* zzPrettify v2 by devs forumvi */ function selectCode(a) { a = $(a).parent().next()[0]; if (window.getSelection) { var b = window.getSelection(); if (b.setBaseAndExtent) b.setBaseAndExtent(a, 0, a, a.innerText.length - 1); else { window.opera && "<BR>" == a.innerHTML.substring(a.innerHTML.length - 4) && (a.innerHTML += " "); var c = document.createRange(); c.selectNodeContents(a); b.removeAllRanges(); b.addRange(c) } } else document.getSelection ? (b = document.getSelection(), c = document.createRange(), c.selectNodeContents(a), b.removeAllRanges(), b.addRange(c)) : document.selection && (c = document.body.createTextRange(), c.moveToElementText(a), c.select()) } $(function () { $(".post code").length && ($(".post code br").replaceWith("\n"), $(".post code").addClass("prettyprint linenums"), $.getScript("http://www.devs.cf/11727.js", function () { prettyPrint(); $(".codebox dd.cont_code").prepend('<div class="controlCode"><img class="selectCode" title="Click để chọn toàn bộ code" onclick="selectCode(this)" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><img class="textCode" title="Bỏ số thứ tự đầu dòng" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><input class="findLine" title="Nhập số dòng muốn chuyển đến" size="4" maxlength="4" type="text" /></div>'); $(".codebox dd.cont_code .findLine").on("input", function () { this.value = /\d+/g.exec(this.value); }).keydown(function (a) { var t = $(this); if (13 == a.keyCode) { a = t.parent().next().find("li:eq(" + (parseInt(this.value, 10) - 1) + ")"); a.length && $("body, html").animate({ scrollTop: a.offset().top }); this.value = "" } else { $("body, html").animate({ scrollTop: t.offset().top - 5 }); } }).focus(function () { $(this).parent().css("opacity", 1); }).blur(function () { this.value = ""; $(this).parent().removeAttr("style"); }); $(".textCode").click(function () { var _this = $(this), code = _this.parent().next(); _this.toggleClass("pretty"); if (_this.hasClass("pretty")) { $("li", code).after("\n"); code.removeClass().text(function () { return $(this).text() }).html(function () { return $(this).html().replace(/\n/g, "<br />") }); _this.attr("title", "Thêm số thứ tự đầu dòng").next().hide(); } else { $(".post code br").replaceWith("\n"); code.addClass("prettyprint linenums"); prettyPrint(); _this.attr("title", "Bỏ số thứ tự đầu dòng").next().show(); } }); })); }); - KHÔNG TỰ ĐỘNG CHẠY PRETTYPRINT:
- Code:
function selectCode(a) { a = $(a).parent().next()[0]; if (window.getSelection) { var b = window.getSelection(); if (b.setBaseAndExtent) b.setBaseAndExtent(a, 0, a, a.innerText.length - 1); else { window.opera && "<BR>" == a.innerHTML.substring(a.innerHTML.length - 4) && (a.innerHTML += " "); var c = document.createRange(); c.selectNodeContents(a); b.removeAllRanges(); b.addRange(c) } } else document.getSelection ? (b = document.getSelection(), c = document.createRange(), c.selectNodeContents(a), b.removeAllRanges(), b.addRange(c)) : document.selection && (c = document.body.createTextRange(), c.moveToElementText(a), c.select()) } $(function () { $(".post code").length && ($.getScript("http://www.devs.cf/11727.js", function () { $(".codebox dd.cont_code").prepend('<div class="controlCode"><img class="selectCode" title="Click để chọn toàn bộ code" onclick="selectCode(this)" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><img class="textCode pretty" title="Thêm số thứ tự đầu dòng" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><input class="findLine" style="display: none;" title="Nhập số dòng muốn chuyển đến" size="4" maxlength="4" type="text" /></div>'); $(".codebox dd.cont_code .findLine").on("input", function () { this.value = /\d+/g.exec(this.value); }).keydown(function (a) { var t = $(this); if (13 == a.keyCode) { a = t.parent().next().find("li:eq(" + (parseInt(this.value, 10) - 1) + ")"); a.length && $("body, html").animate({ scrollTop: a.offset().top }); this.value = "" } else { $("body, html").animate({ scrollTop: t.offset().top - 50 }); } }).focus(function () { $(this).parent().css("opacity", 1); }).blur(function () { this.value = ""; $(this).parent().removeAttr("style"); }); $(".textCode").click(function () { var _this = $(this), code = _this.parent().next(); _this.toggleClass("pretty"); if (_this.hasClass("pretty")) { $("li", code).after("\n"); code.removeClass().text(function () { return $(this).text() }).html(function () { return $(this).html().replace(/\n/g, "<br />") }); _this.attr("title", "Thêm số thứ tự đầu dòng").next().hide(); } else { $(".post code br").replaceWith("\n"); code.addClass("prettyprint linenums"); prettyPrint(); _this.attr("title", "Bỏ số thứ tự đầu dòng").next().show(); } }); })); });
|