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

  Bài viết hay nhất1

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 [You must be registered and logged in to see this link.] 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:

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();
         }
      });
   }));
});


Nguồn

Zzbaivong (devs.forumvi.com)
  Bài viết hay nhất2
cảm ơn nhiều nhé. khung code rất chuyên nghiệp <3
  Bài viết hay nhất3
Giúp mình Fix lỗi die ảnh ở chỗ thay đổi giao diện xem code ! :'(
( Hay do forum mình có vấn đề nhỉ )
[You must be registered and logged in to see this image.]
  Bài viết hay nhất4
lỗi ảnh phía gócvà ô bên cạnh bị lệch lên: [You must be registered and logged in to see this link.]
  Bài viết hay nhất5
vào css tìm
Code:
.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}
tăng top:-30px lên top:-26px
và add lại js :)
  Bài viết hay nhất6
vẫn lỗi ảnh :/
  Bài viết hay nhất7
[You must be registered and logged in to see this link.]
[You must be registered and logged in to see this link.] wrote:vẫn lỗi ảnh :/
Đây là link ảnh data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==
Nhưng fix thế nào đây -_-
  Bài viết hay nhất8
[You must be registered and logged in to see this link.]
[You must be registered and logged in to see this link.] wrote:[You must be registered and logged in to see this link.]
[You must be registered and logged in to see this link.] wrote:vẫn lỗi ảnh :/
Đây là link ảnh data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==
Nhưng fix thế nào đây -_-
sao lại hỏi mình? -_-
data:image/gif;base64,R0lGODlhAQABAIAAAP
  Bài viết hay nhất9
Có lẽ là do lightbox, mình đã lọc ảnh base64 trong các bài hướng dẫn của devs forumvi, nếu bạn dùng lightbox khác hoặc code nào liên quan thì gửi demo lỗi xem thử?
  Bài viết hay nhất10
mình chỉ dùng fancyFBcmt với xem trước bài viết không chuyển trang thôi, đều dùng mod của devs:
[You must be registered and logged in to see this link.]
  Bài viết hay nhất11
[You must be registered and logged in to see this link.]
[You must be registered and logged in to see this link.] wrote:mình chỉ dùng fancyFBcmt với xem trước bài viết không chuyển trang thôi, đều dùng mod của devs:
[You must be registered and logged in to see this link.]
Chắc phải tạm lấy ảnh khác chèn vào thử xem ! Chưa tìm ra nguyên nhân ! Nhưng cách này áp dụng cũng tốt ! Thay hình mình thích cũng được ! Tạm thời thế đã -_-
[You must be registered and logged in to see this image.]
  Bài viết hay nhất12
[You must be registered and logged in to see this link.]
[You must be registered and logged in to see this link.] wrote:[You must be registered and logged in to see this link.]
[You must be registered and logged in to see this link.] wrote:mình chỉ dùng fancyFBcmt với xem trước bài viết không chuyển trang thôi, đều dùng mod của devs:
[You must be registered and logged in to see this link.]
Chắc phải tạm lấy ảnh khác chèn vào thử xem ! Chưa tìm ra nguyên nhân ! Nhưng cách này áp dụng cũng tốt ! Thay hình mình thích cũng được ! Tạm thời thế đã -_-
[You must be registered and logged in to see this image.]
Vừa tìm ra cách khắc phục khá đơn giản:
Thay:
Code:
data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==
bằng:
Code:
http://illiweb.com/fa/empty.gif
hoặc 1 link ảnh trong suốt 1x1
  Bài viết hay nhất13
[You must be registered and logged in to see this link.]
[You must be registered and logged in to see this link.] wrote:[You must be registered and logged in to see this link.]
[You must be registered and logged in to see this link.] wrote:[You must be registered and logged in to see this link.]
[You must be registered and logged in to see this link.] wrote:mình chỉ dùng fancyFBcmt với xem trước bài viết không chuyển trang thôi, đều dùng mod của devs:
[You must be registered and logged in to see this link.]
Chắc phải tạm lấy ảnh khác chèn vào thử xem ! Chưa tìm ra nguyên nhân ! Nhưng cách này áp dụng cũng tốt ! Thay hình mình thích cũng được ! Tạm thời thế đã -_-
[You must be registered and logged in to see this image.]
Vừa tìm ra cách khắc phục khá đơn giản:
Thay:
Code:
data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==
bằng:
Code:
http://illiweb.com/fa/empty.gif
hoặc 1 link ảnh trong suốt 1x1
Vậy là xong ! :) Ổn cả rồi
  Bài viết hay nhất14
của mình nó ko có tác dụng mọi người giúp nhé
demo: [You must be registered and logged in to see this link.]
  Bài viết hay nhất15
[You must be registered and logged in to see this link.]
[You must be registered and logged in to see this link.] wrote:của mình nó ko có tác dụng mọi người giúp nhé
demo: [You must be registered and logged in to see this link.]
làm lại đi - thiếu js
  Bài viết hay nhất16
[You must be registered and logged in to see this link.]
[You must be registered and logged in to see this link.] wrote:[You must be registered and logged in to see this link.]
[You must be registered and logged in to see this link.] wrote:của mình nó ko có tác dụng mọi người giúp nhé
demo: [You must be registered and logged in to see this link.]
làm lại đi - thiếu js
có rồi mà : [You must be registered and logged in to see this link.]
  Bài viết hay nhất17
[You must be registered and logged in to see this link.]
[You must be registered and logged in to see this link.] wrote:[You must be registered and logged in to see this link.]
[You must be registered and logged in to see this link.] wrote:[You must be registered and logged in to see this link.]
[You must be registered and logged in to see this link.] wrote:của mình nó ko có tác dụng mọi người giúp nhé
demo: [You must be registered and logged in to see this link.]
làm lại đi - thiếu js
có rồi mà : [You must be registered and logged in to see this link.]
Tìm trong Template viewtopic_body:
Code:
class="main-content topic"
Sửa thành:
Code:
class="main-content post"
  Bài viết hay nhất18
sao nó ko hiện cái hình bên góc phải nhỉ với chữ code nó nằm trận lên cái hình luôn mọi người giúp nhé thank
  Bài viết hay nhất19
[You must be registered and logged in to see this link.]
[You must be registered and logged in to see this link.] wrote:sao nó ko hiện cái hình bên góc phải nhỉ với chữ code nó nằm trận lên cái hình luôn mọi người giúp nhé thank
Thay các dòng CSS tương ứng:
Code:
.codebox > dt{position:relative;z-index:1;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 #333!important;border-color:#333 #333 transparent #333!important;height:30px!important;border-bottom-width:0;line-height:26px!important;padding:2px 10px 0 30px!important;width:90px;margin-bottom:2px}
.codebox dd.cont_code{background:#FFF;max-height:100%!important;overflow:visible!important;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 #333;padding:0!important}
.codebox dd.cont_code input.findLine:focus{color:#333;background:#FFF!important;width:50px;border-color:red}
.pun img.textCode{width:30px;height:30px;position:absolute;right:-1px;top:-30px;border:1px solid #333;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}
  Bài viết hay nhất20
Cám ơn..Ai xóa dùm tính năng
Cuộn nhanh đến dòng chỉ định.
được không..các tính năng còn lại vẫn để nguyên..Tks.
  Bài viết hay nhất21
[You must be registered and logged in to see this link.]
[You must be registered and logged in to see this link.] wrote:Cám ơn..Ai xóa dùm tính năng
Cuộn nhanh đến dòng chỉ định.
được không..các tính năng còn lại vẫn để nguyên..Tks.
Trong js, dòng 24, xóa:
Code:
<input class="findLine" size="4" maxlength="4" type="text" />
Và xóa từ dòng 25 đến 40
  Bài viết hay nhất22
Cám ơn..Nhưng sao tính năng
Chuyển đổi chế độ xem code gốc và code prettify.
lại không sử dụng được nữa vậy...
Demo:
[You must be registered and logged in to see this link.]
  Bài viết hay nhất23
[You must be registered and logged in to see this link.]
[You must be registered and logged in to see this link.] wrote:Cám ơn..Nhưng sao tính năng
Chuyển đổi chế độ xem code gốc và code prettify.
lại không sử dụng được nữa vậy...
Demo:
[You must be registered and logged in to see this link.]
Sửa:
Code:
var code = $(this).next().next();
Thành:
Code:
var code = $(this).next();
  Bài viết hay nhất24
Nâng cấp! 8| [You must be registered and logged in to see this link.]
  Bài viết hay nhất25
Giờ méo mới biết nếu nhập dòng tìm là 0 thì nó sẽ cuộn xuống dòng cuối cùng :v
  Bài viết hay nhất26
You cannot reply to topics in this forum