zzPrettify v2 - Khung code cho diễn đàn chuyên nghiệp

zzPrettify^ver.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

1. Phân dòng code
   
2. Màu riêng cho các phần tử, biến, hàm...
   
3. Chọn toàn bộ nội dung code.
   
4. Cuộn nhanh đến dòng chỉ định.
   
5. Chuyển đổi chế độ xem code gốc và code prettify.
   
6. Sửa lỗi màu trên punBB.
   
7. Giao diện mới và sửa một số lỗi nhỏ ở ver.1
   

Demo

Hướng dẫn

Bước 1

ACP >> 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 2

ACP >> 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:

Nguồn

Zzbaivong (devs.forumvi.com)

---

Tags: #tutorial