Đăng Nhập

Vui lòng khai báo chính xác tên truy cập và mật khẩu!

Quên mật khẩu?

Đăng Ký

Bạn phải điền đầy đủ thông tin đăng ký!

  

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

    Quản trị viên

    baivong

    Bài viết : 89

    Tài sản : 275

    Uy tín : 7

    #1

     21.08.15 13:22 

    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

    [TUTs] zzPrettify v2 - Khung code cho diễn đàn chuyên nghiệp K1UHoZo
    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)
    Tags: #tutorial
    You cannot reply to topics in this forum