Đă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] Làm đẹp code với Google code prettify

    Quản trị viên

    avatar

    Bài viết : 89

    Tài sản : 275

    Uy tín : 7

    #1

     on 21.08.15 13:16 

    Hướng dẫn này sẽ làm cho khung code của bạn đẹp và dễ nhìn hơn:

    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ộ khi nhấn vào tiêu đề khung Code
    4. Sửa lỗi màu trên punBB



    Khung code bình thường


    Khung code dùng Google code prettify


    Bước 1: ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet

    Code:
    .codebox dd.cont_code{background:#FFF;max-height:100%;overflow:auto;border:1px solid #e2e2e2;margin:0;padding:0}
    .cont_code > code{white-space:pre;display:block;line-height:17px;padding:10px}
    /* Code prettify */
    .prettyprint.linenums{box-shadow:inset 50px 0 0 #eeeeee, inset 51px 0 0 #ececf0}
    .prettyprint ol.linenums{padding-left:44px;margin:0;list-style-type: decimal;}
    .prettyprint ol.linenums li{padding-left:12px!important;color:#999;line-height:10pt;text-shadow:0 1px 0 #fff;margin-bottom:5px}
    .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: In the topics

    Javascript Code * :
    Code:
    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()
          }));
    });

    Zzbaivong
    You cannot reply to topics in this forum