zzCodeBox 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ộ khi nhấn vào tiêu đề khung Code.
Sửa lỗi màu trên punBB.
Cuộn nhanh đến dòng chỉ định.
Chuyển đổi chế độ xem code gốc và code prettify.
demo:[You must be registered and logged in to see this image.]
Bước 1: ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet

Code:

/* zzCodeBox 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;border-bottom-width:0;line-height:26px;padding:2px 10px 0 30px;width:90px}
.codebox dd.cont_code{background:#FFF;max-height:100%;overflow:visible;position:relative;border:1px solid #e2e2e2}
.codebox dd.cont_code input.findLine{width:30px;text-align:center;position:absolute;right:28px;background:url(http://i56.servimg.com/u/f56/18/59/49/93/list210.png) no-repeat scroll center center #fff!important;top:-30px;height:30px!important;transition:width .3s ease 0;border:1px solid #DDD;padding:0!important}
.codebox dd.cont_code input.findLine:focus{color:#333;background:#FFF!important;width:50px}
.cont_code > code{overflow:auto;white-space:pre;display:block;line-height:17px;padding:10px}
.codebox > dt:hover, .pun img.textCode:hover{color:#333;background-color:#F2F2F2}
.pun img.textCode{width:30px;height:30px;position:absolute;right:-1px;top:-30px;border:1px solid #e2e2e2;background:url(http://i56.servimg.com/u/f56/18/59/49/93/code10.png) no-repeat 6px 6px transparent;background-clip:content-box;cursor:pointer;padding:5px;transition:background .3s;-webkit-transition:background .3s;-moz-transition:background .3s;-o-transition:background .3s;-ms-transition:background .3s}
.pun img.textCode.pretty{background-position:6px -10px}
/* 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}
.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:

/* zzCodeBox by devs forumvi */
function selectCode(a) {
  a = $(a).closest(".codebox").find("CODE")[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").parent().prev().attr({
      onclick: "selectCode(this)",
      title: "Click để chọn toàn bộ code",
      style: "cursor:pointer"
  }), $.getScript("http://devs.forumvi.com/11727.js", function () {
      prettyPrint();
      $(".codebox dd.cont_code").prepend('<img class="textCode" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><input class="findLine" size="4" maxlength="4" type="text" />');
      $(".codebox dd.cont_code .findLine").on("input", function () {
        this.value = /\d+/g.exec(this.value);
        $(window).scrollTop($(this).offset().top)
      }).keydown(function (a) {
        if (13 == a.keyCode) {
            a = parseInt(this.value, 10);
            var b = $(this).next(),
              c = b.offset().top,
              h = b.height(),
              s = c + h,
              d = 17 * a - 7;
            if (0 == a || d + 13 > h) d = h - 20;
            $(window).scrollTop(c + d);
            this.value = ""
        }
      });
      $(".textCode").click(function () {
        $(this).toggleClass("pretty");
        var code = $(this).next().next();
        if ($(this).hasClass("pretty")) {
            $("li", code).after("\n");
            code.removeClass().text(function () {
              return $(this).text()
            }).html(function () {
              return $(this).html().replace(/\n/g, "<br />")
            });
        } else {
            $(".post code br").replaceWith("\n");
            code.addClass("prettyprint linenums");
            prettyPrint();
        }
      });
  }));
});

Nguồn: DEVS