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

  Bài viết hay nhất1
First topic message reminder :

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


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


  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

[You must be registered and logged in to see this image.]
Giao diện zzPrettify v2


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)
  Bài viết hay nhất26
Mình mới cập nhật xong. Không có các nút chức năng
  Bài viết hay nhất27
[You must be registered and logged in to see this link.]
congdantoancau wrote:Mình mới cập nhật xong. Không có các nút chức năng
Code này cho phiên bản PunBB.
  Bài viết hay nhất28
[You must be registered and logged in to see this link.]
Zzbaivong wrote:Code này cho phiên bản PunBB.
Cho mình xin bản của Invision được không?
  Bài viết hay nhất29
[You must be registered and logged in to see this link.]
congdantoancau wrote:[You must be registered and logged in to see this link.]
Zzbaivong wrote:Code này cho phiên bản PunBB.
Cho mình xin bản của Invision được không?
[You must be registered and logged in to see this link.]
  Bài viết hay nhất30
You cannot reply to topics in this forum